| @@ -0,0 +1,65 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery UI - Checkboxes</title> | ||
| <link rel="stylesheet" href="../../../themes/base/all.css"> | ||
| <script src="../../../external/jquery/jquery.js"></script> | ||
| <script src="../../../ui/core.js"></script> | ||
| <script src="../../../ui/widget.js"></script> | ||
| <script src="../../../ui/button.js"></script> | ||
| <script src="../../../ui/checkboxradio.js"></script> | ||
| <script> | ||
| $(function() { | ||
| var checkboxes = $( "form input" ).checkboxradio(); | ||
|
|
||
| $( ".controls input, .controls select" ).on( "change keyup", function() { | ||
| var option = $( this ).attr( "name" ), | ||
| value = $( this ).val(); | ||
|
|
||
| if ( $( this ).is( "[type=checkbox]" ) ) { | ||
| value = $( this ).is( ":checked" ); | ||
| } | ||
| if ( option != "label" || value !== "" ) { | ||
| checkboxes.checkboxradio( "option", option, value ); | ||
| } | ||
| }); | ||
| $( ".controls > button" ).click( function() { | ||
| if ( this.id !== "create" ) { | ||
| checkboxes.checkboxradio( this.id ); | ||
| } else { | ||
| checkboxes.checkboxradio(); | ||
| } | ||
| }); | ||
| }); | ||
| </script> | ||
| <style> | ||
| #format { margin-top: 2em; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h2> | ||
| Easy way to toggle through various combinations of options and states to make sure none lead to | ||
| a broken appearence. | ||
| </h2> | ||
| <div class="controls"> | ||
| <button id="create">Create</button> | ||
| <button id="destroy">Destroy</button> | ||
| <button id="enable">Enable</button> | ||
| <button id="disable">Disable</button> | ||
| <button id="refresh">Refresh</button> | ||
| <input type="checkbox" id="icon" name="icon" checked><label for="icon">Icon</label> | ||
| <input type="checkbox" id="disabled" name="disabled"><label for="disabled">Disabled</label> | ||
| <label for="label">Label<input type="text" id="label" name="label"></label> | ||
| </div> | ||
| <form> | ||
| <input type="checkbox" id="checkbox-1"> | ||
| <label for="checkbox-1">Checkbox widget sample</label> | ||
| <input type="checkbox" id="checkbox-2"><label for="checkbox-2">Checkbox widget sample</label> | ||
|
|
||
| <label for="radio-1">Radio widget sample <input type="radio" id="radio-1" name="radio" checked></label> | ||
| <input type="radio" id="radio-2" name="radio"><label for="radio-2"><span>boom</span>Radio widget sample 2</label> | ||
| <button type="reset">Reset</button> | ||
| </form> | ||
| </body> | ||
| </html> |
| @@ -16,18 +16,6 @@ | ||
| padding: .5em .5em .5em .7em; | ||
| font-size: 100%; | ||
| } | ||
| .ui-accordion .ui-accordion-content { | ||
| padding: 1em 2.2em; | ||
| border-top: 0; | ||
| @@ -0,0 +1,34 @@ | ||
| /*! | ||
| * jQuery UI Checkboxradio @VERSION | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright jQuery Foundation and other contributors | ||
| * Released under the MIT license. | ||
| * http://jquery.org/license | ||
| * | ||
| * http://api.jqueryui.com/checkboxradio/#theming | ||
| */ | ||
|
|
||
| .ui-checkboxradio-label .ui-icon-background { | ||
| box-shadow: inset 1px 1px 1px #ccc; | ||
| border-radius: .12em; | ||
| border: none; | ||
| } | ||
| .ui-checkboxradio-radio-label .ui-icon-background { | ||
| width: 16px; | ||
| height: 16px; | ||
| border-radius: 1em; | ||
| overflow: visible; | ||
| border: none; | ||
| } | ||
| .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, | ||
| .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { | ||
| background-image: none; | ||
| width: 8px; | ||
| height: 8px; | ||
| border-width: 4px; | ||
| border-style: solid; | ||
| } | ||
| .ui-checkboxradio-disabled { | ||
| pointer-events: none; | ||
| } |
| @@ -0,0 +1,70 @@ | ||
| /*! | ||
| * jQuery UI Controlgroup @VERSION | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright jQuery Foundation and other contributors | ||
| * Released under the MIT license. | ||
| * http://jquery.org/license | ||
| * | ||
| * http://api.jqueryui.com/controlgroup/#theming | ||
| */ | ||
|
|
||
| .ui-controlgroup { | ||
| vertical-align: middle; | ||
| display: inline-block; | ||
| } | ||
| .ui-controlgroup > .ui-controlgroup-item { | ||
| float: left; | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| .ui-controlgroup > .ui-controlgroup-item:focus, | ||
| .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { | ||
| z-index: 9999; | ||
| } | ||
| .ui-controlgroup-vertical > .ui-controlgroup-item { | ||
| display: block; | ||
| float: none; | ||
| width: 100%; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| text-align: left; | ||
| } | ||
| .ui-controlgroup-vertical .ui-controlgroup-item { | ||
| box-sizing: border-box; | ||
| } | ||
| .ui-controlgroup .ui-controlgroup-label { | ||
| padding: .4em 1em; | ||
| } | ||
| .ui-controlgroup .ui-controlgroup-label span { | ||
| font-size: 80%; | ||
| } | ||
| .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { | ||
| border-left: none; | ||
| } | ||
| .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { | ||
| border-top: none; | ||
| } | ||
| .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { | ||
| border-right: none; | ||
| } | ||
| .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| /* Spinner specific style fixes */ | ||
| .ui-controlgroup-vertical .ui-spinner { | ||
| padding-right: .4em; | ||
| } | ||
| .ui-controlgroup-vertical .ui-spinner-input { | ||
| margin: .4em; | ||
| padding: 0; | ||
|
|
||
| /* Support: IE8 only, Android < 4.4 only */ | ||
| width: 85%; | ||
| width: calc( 100% - 22px ); | ||
| } | ||
| .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { | ||
| border-top-style: solid; | ||
| } | ||
|
|
| @@ -33,27 +33,10 @@ | ||
| .ui-selectmenu-open { | ||
| display: block; | ||
| } | ||
| .ui-selectmenu-button.ui-button { | ||
| text-align: left; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| width: 14em; | ||
| } | ||
| @@ -0,0 +1,272 @@ | ||
| /*! | ||
| * jQuery UI Checkboxradio @VERSION | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright jQuery Foundation and other contributors | ||
| * Released under the MIT license. | ||
| * http://jquery.org/license | ||
| */ | ||
|
|
||
| //>>label: Checkboxradio | ||
| //>>group: Widgets | ||
| //>>description: Enhances a form with multiple themeable checkboxes or radio buttons. | ||
| //>>docs: http://api.jqueryui.com/checkboxradio/ | ||
| //>>demos: http://jqueryui.com/checkboxradio/ | ||
| //>>css.structure: ../themes/base/core.css | ||
| //>>css.structure: ../themes/base/button.css | ||
| //>>css.structure: ../themes/base/checkboxradio.css | ||
| //>>css.theme: ../themes/base/theme.css | ||
|
|
||
| ( function( factory ) { | ||
| if ( typeof define === "function" && define.amd ) { | ||
|
|
||
| // AMD. Register as an anonymous module. | ||
| define( [ | ||
| "jquery", | ||
| "../escape-selector", | ||
| "../form-reset-mixin", | ||
| "../labels", | ||
| "../widget" | ||
| ], factory ); | ||
| } else { | ||
|
|
||
| // Browser globals | ||
| factory( jQuery ); | ||
| } | ||
| }( function( $ ) { | ||
|
|
||
| $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, { | ||
| version: "@VERSION", | ||
| options: { | ||
| disabled: null, | ||
| label: null, | ||
| icon: true, | ||
| classes: { | ||
| "ui-checkboxradio-label": "ui-corner-all", | ||
| "ui-checkboxradio-icon": "ui-corner-all" | ||
| } | ||
| }, | ||
|
|
||
| _getCreateOptions: function() { | ||
| var disabled, labels; | ||
| var that = this; | ||
| var options = this._super() || {}; | ||
|
|
||
| // We read the type here, because it makes more sense to throw a element type error first, | ||
| // rather then the error for lack of a label. Often if its the wrong type, it | ||
| // won't have a label (e.g. calling on a div, btn, etc) | ||
| this._readType(); | ||
|
|
||
| labels = this.element.labels(); | ||
|
|
||
| // If there are multiple labels, use the last one | ||
| this.label = $( labels[ labels.length - 1 ] ); | ||
| if ( !this.label.length ) { | ||
| $.error( "No label found for checkboxradio widget" ); | ||
| } | ||
|
|
||
| this.originalLabel = ""; | ||
|
|
||
| // We need to get the label text but this may also need to make sure it does not contain the | ||
| // input itself. | ||
| this.label.contents().not( this.element ).each( function() { | ||
|
|
||
| // The label contents could be text, html, or a mix. We concat each element to get a string | ||
| // representation of the label, without the input as part of it. | ||
| that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML; | ||
| } ); | ||
|
|
||
| // Set the label option if we found label text | ||
| if ( this.originalLabel ) { | ||
| options.label = this.originalLabel; | ||
| } | ||
|
|
||
| disabled = this.element[ 0 ].disabled; | ||
| if ( disabled != null ) { | ||
| options.disabled = disabled; | ||
| } | ||
| return options; | ||
| }, | ||
|
|
||
| _create: function() { | ||
| var checked = this.element[ 0 ].checked; | ||
|
|
||
| this._bindFormResetHandler(); | ||
|
|
||
| // this.form is set by the form-reset-mixin | ||
| this.formParent = this.form.length ? this.form : $( "body" ); | ||
|
|
||
| if ( this.options.disabled == null ) { | ||
| this.options.disabled = this.element[ 0 ].disabled; | ||
| } | ||
|
|
||
| this._setOption( "disabled", this.options.disabled ); | ||
| this._addClass( "ui-checkboxradio", "ui-helper-hidden-accessible" ); | ||
| this._addClass( this.label, "ui-checkboxradio-label", "ui-button ui-widget" ); | ||
|
|
||
| if ( this.type === "radio" ) { | ||
| this._addClass( this.label, "ui-checkboxradio-radio-label" ); | ||
| } | ||
|
|
||
| if ( this.options.label && this.options.label !== this.originalLabel ) { | ||
| this._updateLabel(); | ||
| } else if ( this.originalLabel ) { | ||
| this.options.label = this.originalLabel; | ||
| } | ||
|
|
||
| this._enhance(); | ||
|
|
||
| if ( checked ) { | ||
| this._addClass( this.label, "ui-checkboxradio-checked", "ui-state-active" ); | ||
| this._addClass( this.icon, null, "ui-state-hover" ); | ||
| } | ||
|
|
||
| this._on( { | ||
| change: "_toggleClasses", | ||
| focus: function() { | ||
| this._addClass( this.label, null, "ui-state-focus ui-visual-focus" ); | ||
| }, | ||
| blur: function() { | ||
| this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" ); | ||
| } | ||
| } ); | ||
| }, | ||
|
|
||
| _readType: function() { | ||
| var nodeName = this.element[ 0 ].nodeName.toLowerCase(); | ||
| this.type = this.element[ 0 ].type; | ||
| if ( nodeName !== "input" || !/radio|checkbox/.test( this.type ) ) { | ||
| $.error( "Can't create checkboxradio on element.nodeName=" + nodeName + | ||
| " and element.type=" + this.type ); | ||
| } | ||
| }, | ||
|
|
||
| // Support jQuery Mobile enhanced option | ||
| _enhance: function() { | ||
| this._updateIcon( this.element[ 0 ].checked ); | ||
| }, | ||
|
|
||
| widget: function() { | ||
| return this.label; | ||
| }, | ||
|
|
||
| _getRadioGroup: function() { | ||
| var name = this.element[ 0 ].name; | ||
| var formParent = this.formParent[ 0 ]; | ||
|
|
||
| if ( !name ) { | ||
| return $( [] ); | ||
| } | ||
|
|
||
| return this.formParent.find( "[name='" + $.ui.escapeSelector( name ) + "']" ).filter( function() { | ||
| var form = $( this ).form(); | ||
| return ( form.length ? form : $( "body" ) )[ 0 ] === formParent; | ||
| } ).not( this.element ); | ||
| }, | ||
|
|
||
| _toggleClasses: function() { | ||
| var checked = this.element[ 0 ].checked; | ||
| this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked ); | ||
|
|
||
| if ( this.options.icon && this.type === "checkbox" ) { | ||
|
|
||
| // We add ui-state-highlight to change the icon color | ||
| this._toggleClass( this.icon, null, "ui-icon-check ui-state-highlight", checked ) | ||
| ._toggleClass( this.icon, null, "ui-icon-blank", !checked ); | ||
| } | ||
| if ( this.type === "radio" ) { | ||
| this._getRadioGroup() | ||
| .each( function() { | ||
| var instance = $( this ).checkboxradio( "instance" ); | ||
|
|
||
| if ( instance ) { | ||
| instance._removeClass( instance.label, | ||
| "ui-checkboxradio-checked", "ui-state-active" ); | ||
| } | ||
| } ); | ||
| } | ||
| }, | ||
|
|
||
| _destroy: function() { | ||
| this._unbindFormResetHandler(); | ||
|
|
||
| if ( this.icon ) { | ||
| this.icon.remove(); | ||
| this.iconSpace.remove(); | ||
| } | ||
| }, | ||
|
|
||
| _setOption: function( key, value ) { | ||
|
|
||
| // We don't allow the value to be set to nothing | ||
| if ( key === "label" && !value ) { | ||
| return; | ||
| } | ||
|
|
||
| this._super( key, value ); | ||
|
|
||
| if ( key === "disabled" ) { | ||
| this._toggleClass( this.label, null, "ui-state-disabled", value ); | ||
| this.element[ 0 ].disabled = value; | ||
|
|
||
| // Don't refresh when setting disabled | ||
| return; | ||
| } | ||
| this.refresh(); | ||
| }, | ||
|
|
||
| _updateIcon: function( checked ) { | ||
| var toAdd = "ui-icon ui-icon-background "; | ||
|
|
||
| if ( this.options.icon ) { | ||
| if ( !this.icon ) { | ||
| this.icon = $( "<span>" ); | ||
| this.iconSpace = $( "<span> </span>" ); | ||
| this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" ); | ||
| } | ||
|
|
||
| if ( this.type === "checkbox" ) { | ||
| toAdd += checked ? "ui-icon-check ui-state-highlight" : "ui-icon-blank"; | ||
| this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" ); | ||
| } else { | ||
| toAdd += "ui-icon-blank"; | ||
| } | ||
| this._addClass( this.icon, "ui-checkboxradio-icon", toAdd ); | ||
| if ( !checked ) { | ||
| this._removeClass( this.icon, null, "ui-icon-check ui-state-highlight" ); | ||
| } | ||
| this.icon.prependTo( this.label ).after( this.iconSpace ); | ||
| } else if ( this.icon !== undefined ) { | ||
| this.icon.remove(); | ||
| this.iconSpace.remove(); | ||
| delete this.icon; | ||
| } | ||
| }, | ||
|
|
||
| _updateLabel: function() { | ||
|
|
||
| // Remove the contents of the label ( minus the icon, icon space, and input ) | ||
| this.label.contents().not( this.element.add( this.icon ).add( this.iconSpace ) ).remove(); | ||
| this.label.append( this.options.label ); | ||
| }, | ||
|
|
||
| refresh: function() { | ||
| var checked = this.element[ 0 ].checked, | ||
| isDisabled = this.element[ 0 ].disabled; | ||
|
|
||
| this._updateIcon( checked ); | ||
| this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked ); | ||
| if ( this.options.label !== null ) { | ||
| this._updateLabel(); | ||
| } | ||
|
|
||
| if ( isDisabled !== this.options.disabled ) { | ||
| this._setOptions( { "disabled": isDisabled } ); | ||
| } | ||
| } | ||
|
|
||
| } ] ); | ||
|
|
||
| return $.ui.checkboxradio; | ||
|
|
||
| } ) ); |
| @@ -0,0 +1,240 @@ | ||
| /*! | ||
| * jQuery UI Controlgroup @VERSION | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright jQuery Foundation and other contributors | ||
| * Released under the MIT license. | ||
| * http://jquery.org/license | ||
| */ | ||
|
|
||
| //>>label: Controlgroup | ||
| //>>group: Widgets | ||
| //>>description: Visually groups form control widgets | ||
| //>>docs: http://api.jqueryui.com/controlgroup/ | ||
| //>>demos: http://jqueryui.com/controlgroup/ | ||
| //>>css.structure: ../themes/base/core.css | ||
| //>>css.structure: ../themes/base/controlgroup.css | ||
| //>>css.theme: ../themes/base/theme.css | ||
|
|
||
| ( function( factory ) { | ||
| if ( typeof define === "function" && define.amd ) { | ||
|
|
||
| // AMD. Register as an anonymous module. | ||
| define( [ | ||
| "jquery", | ||
| "../widget" | ||
| ], factory ); | ||
| } else { | ||
|
|
||
| // Browser globals | ||
| factory( jQuery ); | ||
| } | ||
| }( function( $ ) { | ||
|
|
||
| return $.widget( "ui.controlgroup", { | ||
| version: "@VERSION", | ||
| defaultElement: "<div>", | ||
| options: { | ||
| direction: "horizontal", | ||
| disabled: null, | ||
| onlyVisible: true, | ||
| items: { | ||
| "button": "input[type=button], input[type=submit], input[type=reset], button, a", | ||
| "controlgroupLabel": ".ui-controlgroup-label", | ||
| "checkboxradio": "input[type='checkbox'], input[type='radio']", | ||
| "selectmenu": "select", | ||
| "spinner": ".ui-spinner-input" | ||
| } | ||
| }, | ||
|
|
||
| _create: function() { | ||
| this._enhance(); | ||
| }, | ||
|
|
||
| // To support the enhanced option in jQuery Mobile, we isolate DOM manipulation | ||
| _enhance: function() { | ||
| this.element.attr( "role", "toolbar" ); | ||
| this.refresh(); | ||
| }, | ||
|
|
||
| _destroy: function() { | ||
| this._callChildMethod( "destroy" ); | ||
| this.childWidgets.removeData( "ui-controlgroup-data" ); | ||
| this.element.removeAttr( "role" ); | ||
| }, | ||
|
|
||
| _initWidgets: function() { | ||
| var that = this, | ||
| childWidgets = []; | ||
|
|
||
| // First we iterate over each of the items options | ||
| $.each( this.options.items, function( widget, selector ) { | ||
| var labels; | ||
| var options = {}; | ||
|
|
||
| // Make sure the widget actually exists and has a selector set | ||
| if ( !$.fn[ widget ] || !selector ) { | ||
| return; | ||
| } | ||
|
|
||
| if ( widget === "controlgroupLabel" ) { | ||
| labels = that.element.find( selector ); | ||
| labels.each( function() { | ||
| $( this ).contents().wrapAll( "<span class='ui-controlgroup-label-contents'></span>" ); | ||
| } ); | ||
| that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" ); | ||
| childWidgets = childWidgets.concat( labels.get() ); | ||
| return; | ||
| } | ||
|
|
||
| // We assume everything is in the middle to start because we can't determine | ||
| // first / last elements until all enhancments are done. | ||
| if ( that[ "_" + widget + "Options" ] ) { | ||
| options = that[ "_" + widget + "Options" ]( "middle" ); | ||
| } | ||
|
|
||
| // Find instances of this widget inside controlgroup and init them | ||
| that.element | ||
| .find( selector )[ widget ]( options ) | ||
| .each( function() { | ||
| var element = $( this ); | ||
|
|
||
| // Store an instance of the controlgroup to be able to reference | ||
| // from the outermost element for changing options and refresh | ||
| var widgetElement = element[ widget ]( "widget" ); | ||
| $.data( widgetElement[ 0 ], "ui-controlgroup-data", | ||
| element[ widget ]( "instance" ) ); | ||
|
|
||
| childWidgets.push( widgetElement[ 0 ] ); | ||
| } ); | ||
| } ); | ||
|
|
||
| this.childWidgets = $( $.unique( childWidgets ) ); | ||
| this._addClass( this.childWidgets, "ui-controlgroup-item" ); | ||
| }, | ||
|
|
||
| _callChildMethod: function( method ) { | ||
| this.childWidgets.each( function() { | ||
| var element = $( this ), | ||
| data = element.data( "ui-controlgroup-data" ); | ||
| if ( data && data[ method ] ) { | ||
| data[ method ](); | ||
| } | ||
| } ); | ||
| }, | ||
|
|
||
| _updateCornerClass: function( element, position ) { | ||
| var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right"; | ||
| var add = this._buildSimpleOptions( position, "label" ).classes.label; | ||
|
|
||
| this._removeClass( element, null, remove ); | ||
| this._addClass( element, null, add ); | ||
| }, | ||
|
|
||
| _buildSimpleOptions: function( position, key ) { | ||
| var direction = this.options.direction === "vertical"; | ||
| var result = { | ||
| classes: {} | ||
| }; | ||
| result.classes[ key ] = { | ||
| "middle": null, | ||
| "first": "ui-corner-" + ( direction ? "top" : "left" ), | ||
| "last": "ui-corner-" + ( direction ? "bottom" : "right" ) | ||
| }[ position ]; | ||
|
|
||
| return result; | ||
| }, | ||
|
|
||
| _spinnerOptions: function( position ) { | ||
| var options = this._buildSimpleOptions( position, "ui-spinner" ); | ||
|
|
||
| options.classes[ "ui-spinner-up" ] = ""; | ||
| options.classes[ "ui-spinner-down" ] = ""; | ||
|
|
||
| return options; | ||
| }, | ||
|
|
||
| _buttonOptions: function( position ) { | ||
| return this._buildSimpleOptions( position, "ui-button" ); | ||
| }, | ||
|
|
||
| _checkboxradioOptions: function( position ) { | ||
| return this._buildSimpleOptions( position, "ui-checkboxradio-label" ); | ||
| }, | ||
|
|
||
| _selectmenuOptions: function( position ) { | ||
| var direction = this.options.direction === "vertical"; | ||
| return { | ||
| width: direction ? "auto" : false, | ||
| classes: { | ||
| middle: { | ||
| "ui-selectmenu-button-open": null, | ||
| "ui-selectmenu-button-closed": null | ||
| }, | ||
| first: { | ||
| "ui-selectmenu-button-open": "ui-corner-" + ( direction ? "top" : "tl" ), | ||
| "ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "top" : "left" ) | ||
| }, | ||
| last: { | ||
| "ui-selectmenu-button-open": direction ? null : "ui-corner-tr", | ||
| "ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "bottom" : "right" ) | ||
| } | ||
|
|
||
| }[ position ] | ||
| }; | ||
| }, | ||
|
|
||
| _setOption: function( key, value ) { | ||
| if ( key === "direction" ) { | ||
| this._removeClass( "ui-controlgroup-" + this.options.direction ); | ||
| } | ||
|
|
||
| this._super( key, value ); | ||
| if ( key === "disabled" ) { | ||
| this._callChildMethod( value ? "disable" : "enable" ); | ||
| return; | ||
| } | ||
|
|
||
| this.refresh(); | ||
| }, | ||
|
|
||
| refresh: function() { | ||
| var children, | ||
| that = this; | ||
|
|
||
| this._addClass( "ui-controlgroup ui-controlgroup-" + this.options.direction ); | ||
|
|
||
| if ( this.options.direction === "horizontal" ) { | ||
| this._addClass( null, "ui-helper-clearfix" ); | ||
| } | ||
| this._initWidgets(); | ||
|
|
||
| children = this.childWidgets; | ||
|
|
||
| // We filter here because we need to track all childWidgets not just the visible ones | ||
| if ( this.options.onlyVisible ) { | ||
| children = children.filter( ":visible" ); | ||
| } | ||
|
|
||
| if ( children.length ) { | ||
|
|
||
| // We do this last because we need to make sure all enhancment is done | ||
| // before determining first and last | ||
| $.each( [ "first", "last" ], function( index, value ) { | ||
| var instance = children[ value ]().data( "ui-controlgroup-data" ); | ||
|
|
||
| if ( instance && that[ "_" + instance.widgetName + "Options" ] ) { | ||
| instance.element[ instance.widgetName ]( | ||
| that[ "_" + instance.widgetName + "Options" ]( value ) | ||
| ); | ||
| } else { | ||
| that._updateCornerClass( children[ value ](), value ); | ||
| } | ||
| } ); | ||
|
|
||
| // Finally call the refresh method on each of the child widgets. | ||
| this._callChildMethod( "refresh" ); | ||
| } | ||
| } | ||
| } ); | ||
| } ) ); |