<meta charset="utf-8">
<title>jQuery UI Controlgroup - Default Functionality</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 src="../../ui/menu.js"></script>
- <script src="../../ui/position.js"></script>
- <script src="../../ui/selectmenu.js"></script>
- <script src="../../ui/controlgroup.js"></script>
<link rel="stylesheet" href="../demos.css">
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
$( ".controlgroup" ).controlgroup()
$( ".controlgroup-vertical" ).controlgroup({
"direction": "vertical"
});
- });
</script>
<style>
.ui-controlgroup-vertical {
<meta charset="utf-8">
<title>jQuery UI Controlgroup - Split Button</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 src="../../ui/menu.js"></script>
- <script src="../../ui/position.js"></script>
- <script src="../../ui/selectmenu.js"></script>
- <script src="../../ui/controlgroup.js"></script>
<link rel="stylesheet" href="../demos.css">
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js" data-modules="button checkboxradio selectmenu">
$( "select" ).selectmenu({
classes: {
"ui-selectmenu-button": "ui-button-icon-only"
$( "button" ).click(function() {
$( ".output" ).append( "<li>Running Last Action...</li>" );
});
- });
</script>
</head>
<body>
<meta charset="utf-8">
<title>jQuery UI Controlgroup - Toolbar</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 src="../../ui/menu.js"></script>
- <script src="../../ui/position.js"></script>
- <script src="../../ui/selectmenu.js"></script>
- <script src="../../ui/controlgroup.js"></script>
<link rel="stylesheet" href="../demos.css">
- <script>
- $(function() {
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js" data-modules="button checkboxradio selectmenu">
var iframe = $( "<iframe id='display' contenteditable='true'>" ),
contents = iframe.appendTo( "body" );
return false;
});
});
- });
</script>
<style>
#zoom, #fontsize {
define( [
"lib/common",
- "ui/controlgroup",
- "ui/checkboxradio",
- "ui/selectmenu",
- "ui/button"
+ "ui/widgets/controlgroup",
+ "ui/widgets/checkboxradio",
+ "ui/widgets/selectmenu",
+ "ui/widgets/button"
], function( common ) {
common.testWidget( "controlgroup", {
+++ /dev/null
-module( "Controlgroup: Core" );
-
-function hasCornerClass( element ) {
- return !!element.attr( "class" ).match( /ui-corner/g );
-}
-
-test( "selectmenu: open/close corners", function( assert ) {
- expect( 1 );
- var element = $( ".controlgroup" ).controlgroup(),
- selects = element.find( "select" ),
- selectButton = selects.eq( 0 ).selectmenu( "widget" );
-
- expect( 12 );
-
- selects.eq( 0 ).selectmenu( "open" );
- assert.hasClasses( selectButton, "ui-corner-tl",
- "Horizontal: First selectmenu gets ui-corner-tl when opened" );
-
- selects.eq( 0 ).selectmenu( "close" );
- assert.hasClasses( selectButton, "ui-corner-left",
- "Horizontal: First selectmenu gets ui-corner-left when closed" );
-
- selectButton = selects.eq( 1 ).selectmenu( "widget" );
- selects.eq( 1 ).selectmenu( "open" );
- strictEqual( hasCornerClass( selectButton ), false,
- "Horizontal: Middle selectmenu does not get corner class when opened" );
-
- selects.eq( 1 ).selectmenu( "close" );
- strictEqual( hasCornerClass( selectButton ), false,
- "Horizontal: Middle selectmenu does not get corner class when closed" );
-
- selectButton = selects.eq( 2 ).selectmenu( "widget" );
- selects.eq( 2 ).selectmenu( "open" );
- assert.hasClasses( selectButton, "ui-corner-tr",
- "Horizontal: Last selectmenu gets ui-corner-tr when opened" );
-
- selects.eq( 2 ).selectmenu( "close" );
- assert.hasClasses( selectButton, "ui-corner-right",
- "Horizontal: Last selectmenu gets ui-corner-right when closed" );
-
- element.controlgroup( "option", "direction", "vertical" );
- selectButton = selects.eq( 0 ).selectmenu( "widget" );
- selects.eq( 0 ).selectmenu( "open" );
- assert.hasClasses( selectButton, "ui-corner-top",
- "vertical: First selectmenu gets ui-corner-top when opened" );
-
- selects.eq( 0 ).selectmenu( "close" );
- assert.hasClasses( selectButton, "ui-corner-top",
- "vertical: First selectmenu gets ui-corner-top when closed" );
-
- selectButton = selects.eq( 1 ).selectmenu( "widget" );
- selects.eq( 1 ).selectmenu( "open" );
- strictEqual( hasCornerClass( selectButton ), false,
- "vertical: Middle selectmenu does not get corner class when opened" );
-
- selects.eq( 1 ).selectmenu( "close" );
- strictEqual( hasCornerClass( selectButton ), false,
- "vertical: Middle selectmenu does not get corner class when closed" );
-
- selectButton = selects.eq( 2 ).selectmenu( "widget" );
- selects.eq( 2 ).selectmenu( "open" );
- strictEqual( hasCornerClass( selectButton ), false,
- "vertical: Last selectmenu does not get corner class when opened" );
-
- selects.eq( 2 ).selectmenu( "close" );
- assert.hasClasses( selectButton, "ui-corner-bottom",
- "vertical: Last selectmenu gets ui-corner-bottom when closed" );
-});
-test( "invisibles excluded from corner classes", function( assert ) {
- expect( 2 );
- var element = $( ".controlgroup" ).controlgroup(),
- buttons = element.children( ".ui-button" );
- strictEqual( hasCornerClass( buttons.eq( 0 ) ), false,
- "ExcludeInvisible: true: Hidden first element does not get a corner class" );
- assert.hasClasses( buttons.eq( 1 ), "ui-corner-left",
- "ExcludeInvisible: true: First button is hidden second button get corner class" );
-});
\ No newline at end of file
define( [
"jquery",
- "ui/controlgroup",
- "ui/checkboxradio",
- "ui/selectmenu",
- "ui/button"
+ "ui/widgets/controlgroup",
+ "ui/widgets/checkboxradio",
+ "ui/widgets/selectmenu",
+ "ui/widgets/button"
], function( $ ) {
module( "Controlgroup: Core" );
define( [
"jquery",
- "ui/controlgroup",
- "ui/checkboxradio",
- "ui/selectmenu",
- "ui/button"
+ "ui/widgets/controlgroup",
+ "ui/widgets/checkboxradio",
+ "ui/widgets/selectmenu",
+ "ui/widgets/button"
], function( $ ) {
module( "Controlgroup: methods" );
define( [
"jquery",
- "ui/controlgroup",
- "ui/checkboxradio",
- "ui/selectmenu",
- "ui/button"
+ "ui/widgets/controlgroup",
+ "ui/widgets/checkboxradio",
+ "ui/widgets/selectmenu",
+ "ui/widgets/button"
], function( $ ) {
module( "Controlgroup: options" );
+++ /dev/null
-/*!
- * jQuery UI Controlgroup @VERSION
- * http://jqueryui.com
- *
- * Copyright 2014 jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- *
- * http://api.jqueryui.com/controlgroup/
- */
-( function( factory ) {
- if ( typeof define === "function" && define.amd ) {
-
- // AMD. Register as an anonymous module.
- define( [
- "jquery",
- "./core",
- "./widget"
- ], factory );
- } else {
-
- // Browser globals
- factory( jQuery );
- }
-}( function( $ ) {
-
-return $.widget( "ui.controlgroup", {
- version: "@VERSION",
- defaultElement: "<div>",
- options: {
- disabled: null,
- items: {
- "button": "input[type=button], input[type=submit], input[type=reset], button, a",
- "checkboxradio": "input[type='checkbox'], input[type='radio']",
- "selectmenu": "select"
- },
- direction: "horizontal",
- excludeInvisible: true
- },
-
- _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 widgets,
- options = {};
-
- // 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" );
- }
-
- // Make sure the widget actually exists and has a selector set
- if ( $.fn[ widget ] && selector ) {
-
- // Find instances of this widget inside controlgroup and run method or set options
- widgets = that.element.find( selector )[ widget ]( options );
-
- // Don't set data or add to the collection if the method is destroy
- widgets.each( function() {
-
- // Set data on the widget element pointing to the this.element of the widget
- // and telling us what type of widget this is
- var widgetElement =
- $( this )[ widget ]( "widget" ).data( "ui-controlgroup-data", {
- "widgetType": widget,
- "element": $( this )
- } );
-
- childWidgets.push( widgetElement[ 0 ] );
- } );
- }
- } );
-
- this.childWidgets = $( $.unique( childWidgets ) );
- },
-
- _callChildMethod: function( method ) {
- this.childWidgets.each( function() {
- var element = $( this ),
- data = element.data( "ui-controlgroup-data" );
-
- data.element[ data.widgetType ]( method );
- } );
- },
-
- _buildSimpleOptions: function( position, direction, key ) {
- var result = {
- classes: {}
- };
- result.classes[ key ] = {
- "middle": null,
- "first": "ui-corner-" + ( direction ? "top" : "left" ),
- "last": "ui-corner-" + ( direction ? "bottom" : "right" )
- }[ position ];
-
- return result;
- },
-
- _button_options: function( position, direction ) {
- return this._buildSimpleOptions( position, direction, "ui-button" );
- },
-
- _checkboxradio_options: function( position, direction ) {
- return this._buildSimpleOptions( position, direction, "ui-checkboxradio-label" );
- },
-
- _selectmenu_options: function( position, direction ) {
- 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.excludeInvisible ) {
- 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
- [ "first", "last" ].forEach( function( value ) {
- var data = children[ value ]().data( "ui-controlgroup-data" );
- if ( that[ "_" + data.widgetType + "_options" ] ) {
- data.element[ data.widgetType ](
- that[ "_" + data.widgetType + "_options" ](
- value,
- that.options.direction === "vertical"
- )
- );
- }
- } );
-
- // Finally call the refresh method on each of the child widgets.
- this._callChildMethod( "refresh" );
- }
- }
-} );
-} ) );
--- /dev/null
+/*!
+ * jQuery UI Controlgroup @VERSION
+ * http://jqueryui.com
+ *
+ * Copyright 2014 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/controlgroup/
+ */
+( 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: {
+ disabled: null,
+ items: {
+ "button": "input[type=button], input[type=submit], input[type=reset], button, a",
+ "checkboxradio": "input[type='checkbox'], input[type='radio']",
+ "selectmenu": "select"
+ },
+ direction: "horizontal",
+ excludeInvisible: true
+ },
+
+ _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 widgets,
+ options = {};
+
+ // 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" );
+ }
+
+ // Make sure the widget actually exists and has a selector set
+ if ( $.fn[ widget ] && selector ) {
+
+ // Find instances of this widget inside controlgroup and run method or set options
+ widgets = that.element.find( selector )[ widget ]( options );
+
+ // Don't set data or add to the collection if the method is destroy
+ widgets.each( function() {
+
+ // Set data on the widget element pointing to the this.element of the widget
+ // and telling us what type of widget this is
+ var widgetElement =
+ $( this )[ widget ]( "widget" ).data( "ui-controlgroup-data", {
+ "widgetType": widget,
+ "element": $( this )
+ } );
+
+ childWidgets.push( widgetElement[ 0 ] );
+ } );
+ }
+ } );
+
+ this.childWidgets = $( $.unique( childWidgets ) );
+ },
+
+ _callChildMethod: function( method ) {
+ this.childWidgets.each( function() {
+ var element = $( this ),
+ data = element.data( "ui-controlgroup-data" );
+
+ data.element[ data.widgetType ]( method );
+ } );
+ },
+
+ _buildSimpleOptions: function( position, direction, key ) {
+ var result = {
+ classes: {}
+ };
+ result.classes[ key ] = {
+ "middle": null,
+ "first": "ui-corner-" + ( direction ? "top" : "left" ),
+ "last": "ui-corner-" + ( direction ? "bottom" : "right" )
+ }[ position ];
+
+ return result;
+ },
+
+ _button_options: function( position, direction ) {
+ return this._buildSimpleOptions( position, direction, "ui-button" );
+ },
+
+ _checkboxradio_options: function( position, direction ) {
+ return this._buildSimpleOptions( position, direction, "ui-checkboxradio-label" );
+ },
+
+ _selectmenu_options: function( position, direction ) {
+ 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.excludeInvisible ) {
+ 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
+ [ "first", "last" ].forEach( function( value ) {
+ var data = children[ value ]().data( "ui-controlgroup-data" );
+ if ( that[ "_" + data.widgetType + "_options" ] ) {
+ data.element[ data.widgetType ](
+ that[ "_" + data.widgetType + "_options" ](
+ value,
+ that.options.direction === "vertical"
+ )
+ );
+ }
+ } );
+
+ // Finally call the refresh method on each of the child widgets.
+ this._callChildMethod( "refresh" );
+ }
+ }
+} );
+} ) );
projects / jquery-ui.git / commitdiff