aboutsummaryrefslogtreecommitdiffstats
path: root/demos/controlgroup
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2014-08-22 23:39:35 -0400
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-07 10:57:59 -0400
commit40a9d1dfdb6a341904ae7bcd4600b0ef201d14df (patch)
treeb4eaf29211bd94d9f947e8f0613f7798efe98126 /demos/controlgroup
parent6e2bbcaa5e19bb933d8024ff5d6fcff34f91e034 (diff)
downloadjquery-ui-40a9d1dfdb6a341904ae7bcd4600b0ef201d14df.tar.gz
jquery-ui-40a9d1dfdb6a341904ae7bcd4600b0ef201d14df.zip
Controlgroup: Inital commit of new widget
This widget replaces the buttonset widget
Diffstat (limited to 'demos/controlgroup')
-rw-r--r--demos/controlgroup/default.html23
-rw-r--r--demos/controlgroup/index.html2
-rw-r--r--demos/controlgroup/splitbutton.html23
-rw-r--r--demos/controlgroup/toolbar.html140
4 files changed, 90 insertions, 98 deletions
diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html
index 9e4bcdd80..0fc963537 100644
--- a/demos/controlgroup/default.html
+++ b/demos/controlgroup/default.html
@@ -16,18 +16,15 @@
<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;
@@ -35,9 +32,6 @@
</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 @@
<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 @@
<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>
diff --git a/demos/controlgroup/index.html b/demos/controlgroup/index.html
index 58e2f7eda..5aa4f5fd6 100644
--- a/demos/controlgroup/index.html
+++ b/demos/controlgroup/index.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>
diff --git a/demos/controlgroup/splitbutton.html b/demos/controlgroup/splitbutton.html
index 5d4c7b3ce..a72cefd96 100644
--- a/demos/controlgroup/splitbutton.html
+++ b/demos/controlgroup/splitbutton.html
@@ -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 @@
<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>
diff --git a/demos/controlgroup/toolbar.html b/demos/controlgroup/toolbar.html
index f90fb3040..fb3172418 100644
--- a/demos/controlgroup/toolbar.html
+++ b/demos/controlgroup/toolbar.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 @@ From the fiends, that plague thee thus!—
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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 02:36:12 +0000