Skip to content
Permalink
Browse files

Controlgroup: Inital commit of new widget

This widget replaces the buttonset widget
  • Loading branch information...
arschmitz committed Aug 23, 2014
1 parent 6e2bbca commit 40a9d1dfdb6a341904ae7bcd4600b0ef201d14df
@@ -41,6 +41,7 @@ <h1>Widget</h1>
<button>Button with icon on the right</button>
<button>Button with icon on the top</button>
<button>Button with icon on the bottom</button>
<button>Button with icon on the top</button>
</div>
<div class="css">
<h1>CSS</h1>
@@ -16,28 +16,22 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( ".controlgroup" ).eq( 0 ).controlgroup()
.end().eq( 1 ).controlgroup({
"direction": "vertical"
});
$( ".controlgroup" ).controlgroup()
$( ".controlgroup-vertical" ).controlgroup({
"direction": "vertical"
});
});
</script>
<style>
.ui-controlgroup-vertical {
width: 300px;
}
.ui-controlgroup-vertical select {
width: 100%;
width: 150px;
}
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
text-align: center;
}
</style>
</head>
<body>
<div class="demo-description">
<p>A Controlgroup featuring various form controls</p>
</div>
<div class="widget">
<h1>Controlgroup</h1>
<fieldset>
@@ -64,7 +58,7 @@ <h1>Controlgroup</h1>
<br/>
<fieldset>
<legend>Rental Car</legend>
<div class="controlgroup-horizontal">
<div class="controlgroup-vertical">
<select>
<option>Compact car</option>
<option>Midsize car</option>
@@ -83,8 +77,9 @@ <h1>Controlgroup</h1>
<button>Book Now!</button>
</div>
</fieldset>
>>>>>>> 423b976... Checkboxradio: Fixed demos and tests
</div>

<div class="demo-description">
<p>A controlgroup featuring various form controls. The first features a horizontal toolbar like orientation, the second is in a space saving vertical orientation for usages like mobile devices and panels.</p>
</div>
</body>
</html>
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Checkboxradio Demos</title>
<title>jQuery UI Controlgroup Demos</title>
</head>
<body>

@@ -19,27 +19,19 @@
$( "select" ).selectmenu({
classes: {
"ui-selectmenu-button": "ui-button-icon-only"
},
change: function(){
$( ".output" ).append( "<li>" + this.value + "</li>" );
}
}).selectmenu( "widget" ).removeClass( "ui-icon-end" );
$( ".controlgroup" ).controlgroup();
$( "select" ).on( "selectmenuchange", function(){
alert( this.value );
});
$( ".controlgroup" ).controlgroup();
$( "button" ).click(function() {
alert( "Running the last action" );
$( ".output" ).append( "<li>Running Last Action...</li>" );
});
});
</script>
<style>
select {
width: 2em;
}
</style>
</head>
<body>
<div class="demo-description">
<p>A Controlgroup creating a split button</p>
</div>
<div class="widget">
<h1>Split button</h1>
<div class="controlgroup">
@@ -50,9 +42,12 @@ <h1>Split button</h1>
<option>Delete</option>
</select>
</div>
<br/>
<h3>Output:</h3>
<ul class="output"></ul>
</div>
<div class="demo-description">
<p>A Controlgroup creating a split button</p>
<p>A controlgroup creating a split button, by combining a button and a selectmenu. We adjust the classes option on the selectmenu to show only the icon</p>
</div>
</body>
</html>
@@ -19,10 +19,11 @@
var iframe = $( "<iframe id='display' contenteditable='true'>" ),
contents = iframe.appendTo( "body" );
// Firefox and IE require us to wait for next tick before interacting with the iframe
// Support: Firefox <= 36, IE <= 11
// These browsers require us to wait for next tick before interacting with the iframe
setTimeout(function(){
contents = contents.contents()
contents = contents.contents();
contents[ 0 ].designMode = "On";
contents[ 0 ].contenteditable = true;
contents.find( "body" ).append( $( "#input" ).clone().attr( "id", "output" ) );
@@ -43,7 +44,7 @@
contents[ 0 ].execCommand( this.id );
});
$( "#fontsize, #forecolor, #hilitecolor, #backcolor, #fontname" ).on( "change selectmenuchange", function() {
contents[ 0 ].execCommand( this.id ,false, $( this ).val() );
contents[ 0 ].execCommand( this.id, false, $( this ).val() );
});
$( ".toolbar" ).controlgroup();
$( "#zoom" ).on( "selectmenuchange", function() {
@@ -57,7 +58,7 @@
</script>
<style>
#zoom, #fontsize {
min-width:75px;
min-width: 75px;
}
#input {
display: none;
@@ -74,75 +75,72 @@
</style>
</head>
<body>
<div class="demo-description">
<p>A sample editor toolbar</p>
<p>Highlight text and edit it using the buttons and dropdowns in the toolbar</p>
</div>
<div class="toolbar">
<button id="print">Print</button>
<button id="undo">Undo</button>
<button id="redo">Redo</button>
<select id="zoom">
<option>50%</option>
<option>75%</option>
<option>90%</option>
<option selected>100%</option>
<option>125%</option>
<option>150%</option>
<option>200%</option>
</select>
<select id="fontname">
<option>Arial</option>
<option>Comic Sans MS</option>
<option>Courier New</option>
<option>Georgia</option>
<option>Impact</option>
<option selected>Lucida Grande</option>
<option>Times New Roman</option>
<option>Verdana</option>
</select>
<select id="fontsize">
<option value="1">8px</option>
<option value="2">9px</option>
<option value="3" selected>10px</option>
<option value="4">11px</option>
<option value="5">12px</option>
<option value="6">14px</option>
<option value="7">18px</option>
<option value="8">24px</option>
<option value="9">30px</option>
<option value="10">36px</option>
</select>
<select id="hilitecolor">
<option value="white">Highlight: None</option>
<option value="red">Highlight: Red</option>
<option value="yellow">Highlight: Yellow</option>
<option value="green">Highlight: Green</option>
<option value="blue">Highlight: Blue</option>
<option value="grey">Highlight: Grey</option>
<option value="purple">Highlight: Purple</option>
<option value="orange">Highlight: Orange</option>
</select>
<select id="forecolor">
<option value="white">Font: None</option>
<option value="red">Font: Red</option>
<option value="yellow">Font: Yellow</option>
<option value="green">Font: Green</option>
<option value="blue">Font: Blue</option>
<option value="#ccc">Font: Grey</option>
<option value="purple">Font: Purple</option>
<option value="orange">Font: Orange</option>
</select>
<button id="bold">B</button>
<button id="italic">I</button>
<button id="underline">U</button>
<div class="toolbar">
<button id="print">Print</button>
<button id="undo">Undo</button>
<button id="redo">Redo</button>
<select id="zoom">
<option>50%</option>
<option>75%</option>
<option>90%</option>
<option selected>100%</option>
<option>125%</option>
<option>150%</option>
<option>200%</option>
</select>
<select id="fontname">
<option>Arial</option>
<option>Comic Sans MS</option>
<option>Courier New</option>
<option>Georgia</option>
<option>Impact</option>
<option selected>Lucida Grande</option>
<option>Times New Roman</option>
<option>Verdana</option>
</select>
<select id="fontsize">
<option value="1">8px</option>
<option value="2">9px</option>
<option value="3" selected>10px</option>
<option value="4">11px</option>
<option value="5">12px</option>
<option value="6">14px</option>
<option value="7">18px</option>
<option value="8">24px</option>
<option value="9">30px</option>
<option value="10">36px</option>
</select>
<select id="hilitecolor" title="Background color">
<option value="white">Highlight: None</option>
<option value="red">Highlight: Red</option>
<option value="yellow">Highlight: Yellow</option>
<option value="green">Highlight: Green</option>
<option value="blue">Highlight: Blue</option>
<option value="grey">Highlight: Grey</option>
<option value="purple">Highlight: Purple</option>
<option value="orange">Highlight: Orange</option>
</select>
<select id="forecolor">
<option value="black" selected>Font: Black</option>
<option value="white">Font: White</option>
<option value="red">Font: Red</option>
<option value="yellow">Font: Yellow</option>
<option value="green">Font: Green</option>
<option value="blue">Font: Blue</option>
<option value="#ccc">Font: Grey</option>
<option value="purple">Font: Purple</option>
<option value="orange">Font: Orange</option>
</select>
<button id="bold">B</button>
<button id="italic">I</button>
<button id="underline">U</button>

</div>
<br/><br/>
</div>
<br/><br/>
<pre id="input">
The Rime of the Ancient Mariner (text of 1834)
BY SAMUEL TAYLOR COLERIDGE
Argument
Argument

How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole;
and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and
@@ -252,5 +250,9 @@
Why look'st thou so?'—With my cross-bow
I shot the ALBATROSS.
</pre>
<div class="demo-description">
<p>A sample editor toolbar</p>
<p>Highlight text and edit it using the buttons and dropdowns in the toolbar</p>
</div>
</body>
</html>
@@ -12,6 +12,7 @@
<li><a href="autocomplete/">autocomplete</a></li>
<li><a href="button/">button</a></li>
<li><a href="checkboxradio/">checkboxradio</a></li>
<li><a href="controlgroup/">controlgroup</a></li>
<li><a href="datepicker/">datepicker</a></li>
<li><a href="dialog/">dialog</a></li>
<li><a href="draggable/">draggable</a></li>
@@ -35,7 +35,7 @@
}
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="button menu effect effect-blind">
<script src="../bootstrap.js" data-modules="button controlgroup menu effect effect-blind">
function notify( input ) {
var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() );
$( "<div>" )
@@ -70,8 +70,10 @@
notify( button );
});
});
$( ".set" ).buttonset({
items: "button"
$( ".set" ).controlgroup({
items: {
"button" : "button"
}
});
$( "button.menu" )
@@ -0,0 +1,26 @@
define( [
"lib/common",
"ui/controlgroup",
"ui/checkboxradio",
"ui/selectmenu",
"ui/button"
], function( common ) {

common.testWidget( "controlgroup", {
defaults: {
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,
classes: {},

// Callbacks
create: null
}
});

} );
@@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Controlgroup Test Suite</title>

<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button checboxradio selectmenu controlgroup"></script>
<script src="../../lib/bootstrap.js" data-modules="common core methods options"></script>
</head>
<body>

<div id="qunit"></div>
<div id="qunit-fixture">
<div class="controlgroup">
<button style="display:none">Button with icon only</button>
<select>
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<label for="checkbox">Checkbox</label>
<input type="checkbox" value="checkbox" id="checkbox" />
<select>
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<div class="test"></div>
<button>Button with icon on the bottom</button>
<select>
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
</div>
</div>
</body>
</html>

0 comments on commit 40a9d1d

Please sign in to comment.
You can’t perform that action at this time.