library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Controlgroup: Add controlgroup labels

Browse Source
This commit is contained in:
Alexander Schmitz 2015-08-12 11:24:30 -04:00
parent 77be50d7a6
commit 6c1390dc0d
4 changed files with 282 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
demos/controlgroup/default.html
View File

@ -9,9 +9,16 @@
.ui-controlgroup-vertical {
width: 150px;
}
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
text-align: center;
}
#car-type-button {
width: 120px;
}
.ui-controlgroup-horizontal .ui-spinner {
width: 50px;
}
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="button checkboxradio selectmenu spinner">
@ -27,8 +34,7 @@
<fieldset>
<legend>Rental Car</legend>
<div class="controlgroup">
<input class="ui-spinner-input">
<select>
<select id="car-type">
<option>Compact car</option>
<option>Midsize car</option>
<option>Full size car</option>
@ -37,15 +43,15 @@
<option>Truck</option>
<option>Van</option>
</select>
<input class="ui-spinner-input">
<label for="transmission-standard">Standard</label>
<input type="radio" name="transmission" id="transmission-standard">
<label for="transmission-automatic">Automatic</label>
<input type="radio" name="transmission" id="transmission-automatic">
<label for="insurance">Insurance</label>
<input type="checkbox" name="insurance" id="insurance">
<label for="horizontal-spinner" class="ui-controlgroup-label"># of cars</label>
<input id="horizontal-spinner" class="ui-spinner-input">
<button>Book Now!</button>
<input class="ui-spinner-input">
</div>
</fieldset>
<br/>
@ -67,6 +73,8 @@
<input type="radio" name="transmission-v" id="transmission-automatic-v">
<label for="insurance-v">Insurance</label>
<input type="checkbox" name="insurance" id="insurance-v">
<label for="vertical-spinner" class="ui-controlgroup-label"># of cars</label>
<input id="vertical-spinner" class="ui-spinner-input">
<button>Book Now!</button>
</div>
</fieldset>

356
demos/controlgroup/toolbar.html
View File

@ -6,42 +6,55 @@
<link rel="stylesheet" href="../../themes/base/all.css">
<link rel="stylesheet" href="../demos.css">
<style>
#zoom-button {
width: 55px;
}
#fontname-button,
#fontsize-button {
width: 45px;
}
#forecolor-button {
width: 50px;
}
#hilitecolor-button {
width: 70px;
}
#bold {
font-weight: bold;
}
#italic {
font-style: italic;
}
#underline {
text-decoration: underline;
}
.toolbar {
font-size: .75em;
}
.toolbar .ui-selectmenu-button {
width: auto;
float: left;
}
#zoom, #fontsize {
min-width: 75px;
}
#input {
display: none;
}
#input, #display {
width: 98%;
height: 300px;
border: 2px inset #ccc;
#page {
width: 440px;
left: 50%;
position: relative;
margin-left: -226px;
height: 450px;
border: 1px solid #888;
box-shadow: 7px 7px 3px #ccc;
font-size: 11px;
font-family: "Lucida Grande";
zoom: 100%;
padding: 5px;
white-space: pre-line;
overflow: scroll;
}
.wrap {
width: 588px;
}
</style>
<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" );
// 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[ 0 ].designMode = "On";
contents[ 0 ].contenteditable = true;
contents.find( "body" ).append( $( "#input" ).clone().attr( "id", "output" ) );
var page = $( "#page" );
var basicControls = [ "#print", "#bold", "#italic", "#undo", "#redo" ];
var valueControls = [ "#fontsize", "#forecolor", "#hilitecolor", "#backcolor", "fontname" ];
$( "#print" ).button({
"icon": "ui-icon-print",
@ -55,50 +68,55 @@
"icon": "ui-icon-arrowreturnthick-1-w",
"showLabel": false
});
$( "#print, #bold, #italic, #underline, #undo, #redo" ).on( "click", function() {
contents[ 0 ].execCommand( this.id );
});
$( "#fontsize, #forecolor, #hilitecolor, #backcolor, #fontname" ).on( "change selectmenuchange", function() {
contents[ 0 ].execCommand( this.id, false, $( this ).val() );
});
$( ".toolbar" ).controlgroup();
$( "#zoom" ).on( "selectmenuchange", function() {
contents.find( "#output" ).css({ "zoom": $( this ).val() });
page.css({ "zoom": $( this ).val() });
})
$( basicControls.concat( valueControls ).join( ", " ) ).on( "click change selectmenuchange", function() {
document.execCommand(
this.id,
false,
$( this ).val()
);
});
$( "form" ).on( "submit", function( event ) {
return false;
});
});
</script>
</head>
<body>
<div class="toolbar">
<div class="wrap">
<div class="toolbar">
<button id="print">Print</button>
<button id="undo">Undo</button>
<button id="redo">Redo</button>
<select id="zoom">
<option value="100%" selected>Zoom</option>
<option>50%</option>
<option>75%</option>
<option>90%</option>
<option selected>100%</option>
<option>100%</option>
<option>125%</option>
<option>150%</option>
<option>200%</option>
</select>
<select id="fontname">
<option value="Lucida Grande" selected>Font</option>
<option>Arial</option>
<option>Comic Sans MS</option>
<option>Courier New</option>
<option>Georgia</option>
<option>Impact</option>
<option selected>Lucida Grande</option>
<option>Lucida Grande</option>
<option>Times New Roman</option>
<option>Verdana</option>
</select>
<select id="fontsize">
<option value="3" selected>Size</option>
<option value="1">8px</option>
<option value="2">9px</option>
<option value="3" selected>10px</option>
<option value="3">10px</option>
<option value="4">11px</option>
<option value="5">12px</option>
<option value="6">14px</option>
@ -108,145 +126,147 @@
<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>
<option value="white">Highlight</option>
<option value="white">None</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="grey">Grey</option>
<option value="purple">Purple</option>
<option value="orange">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>
<option value="black" selected>Color</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="#ccc">Grey</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
</select>
<button id="bold">B</button>
<button id="italic">I</button>
<button id="underline">U</button>
</div>
<pre id="page" contenteditable='true'>
The Rime of the Ancient Mariner (text of 1834)
BY SAMUEL TAYLOR COLERIDGE
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
of the strange things that befell; and in what manner the Ancyent Marinere came back to his own
Country.
PART I
It is an ancient Mariner,
And he stoppeth one of three.
'By thy long grey beard and glittering eye,
Now wherefore stopp'st thou me?
The Bridegroom's doors are opened wide,
And I am next of kin;
The guests are met, the feast is set:
May'st hear the merry din.'
He holds him with his skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
Eftsoons his hand dropt he.
He holds him with his glittering eye—
The Wedding-Guest stood still,
And listens like a three years' child:
The Mariner hath his will.
The Wedding-Guest sat on a stone:
He cannot choose but hear;
And thus spake on that ancient man,
The bright-eyed Mariner.
'The ship was cheered, the harbour cleared,
Merrily did we drop
Below the kirk, below the hill,
Below the lighthouse top.
The Sun came up upon the left,
Out of the sea came he!
And he shone bright, and on the right
Went down into the sea.
Higher and higher every day,
Till over the mast at noon—'
The Wedding-Guest here beat his breast,
For he heard the loud bassoon.
The bride hath paced into the hall,
Red as a rose is she;
Nodding their heads before her goes
The merry minstrelsy.
The Wedding-Guest he beat his breast,
Yet he cannot choose but hear;
And thus spake on that ancient man,
The bright-eyed Mariner.
And now the STORM-BLAST came, and he
Was tyrannous and strong:
He struck with his o'ertaking wings,
And chased us south along.
With sloping masts and dipping prow,
As who pursued with yell and blow
Still treads the shadow of his foe,
And forward bends his head,
The ship drove fast, loud roared the blast,
And southward aye we fled.
And now there came both mist and snow,
And it grew wondrous cold:
And ice, mast-high, came floating by,
As green as emerald.
And through the drifts the snowy clifts
Did send a dismal sheen:
Nor shapes of men nor beasts we ken—
The ice was all between.
The ice was here, the ice was there,
The ice was all around:
It cracked and growled, and roared and howled,
Like noises in a swound!
At length did cross an Albatross,
Thorough the fog it came;
As if it had been a Christian soul,
We hailed it in God's name.
It ate the food it ne'er had eat,
And round and round it flew.
The ice did split with a thunder-fit;
The helmsman steered us through!
And a good south wind sprung up behind;
The Albatross did follow,
And every day, for food or play,
Came to the mariner's hollo!
In mist or cloud, on mast or shroud,
It perched for vespers nine;
Whiles all the night, through fog-smoke white,
Glimmered the white Moon-shine.'
'God save thee, ancient Mariner!
From the fiends, that plague thee thus!—
Why look'st thou so?'—With my cross-bow
I shot the ALBATROSS.
</pre>
</div>
<br/><br/>
<pre id="input">
The Rime of the Ancient Mariner (text of 1834)
BY SAMUEL TAYLOR COLERIDGE
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
of the strange things that befell; and in what manner the Ancyent Marinere came back to his own
Country.
PART I
It is an ancient Mariner,
And he stoppeth one of three.
'By thy long grey beard and glittering eye,
Now wherefore stopp'st thou me?
The Bridegroom's doors are opened wide,
And I am next of kin;
The guests are met, the feast is set:
May'st hear the merry din.'
He holds him with his skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
Eftsoons his hand dropt he.
He holds him with his glittering eye—
The Wedding-Guest stood still,
And listens like a three years' child:
The Mariner hath his will.
The Wedding-Guest sat on a stone:
He cannot choose but hear;
And thus spake on that ancient man,
The bright-eyed Mariner.
'The ship was cheered, the harbour cleared,
Merrily did we drop
Below the kirk, below the hill,
Below the lighthouse top.
The Sun came up upon the left,
Out of the sea came he!
And he shone bright, and on the right
Went down into the sea.
Higher and higher every day,
Till over the mast at noon—'
The Wedding-Guest here beat his breast,
For he heard the loud bassoon.
The bride hath paced into the hall,
Red as a rose is she;
Nodding their heads before her goes
The merry minstrelsy.
The Wedding-Guest he beat his breast,
Yet he cannot choose but hear;
And thus spake on that ancient man,
The bright-eyed Mariner.
And now the STORM-BLAST came, and he
Was tyrannous and strong:
He struck with his o'ertaking wings,
And chased us south along.
With sloping masts and dipping prow,
As who pursued with yell and blow
Still treads the shadow of his foe,
And forward bends his head,
The ship drove fast, loud roared the blast,
And southward aye we fled.
And now there came both mist and snow,
And it grew wondrous cold:
And ice, mast-high, came floating by,
As green as emerald.
And through the drifts the snowy clifts
Did send a dismal sheen:
Nor shapes of men nor beasts we ken—
The ice was all between.
The ice was here, the ice was there,
The ice was all around:
It cracked and growled, and roared and howled,
Like noises in a swound!
At length did cross an Albatross,
Thorough the fog it came;
As if it had been a Christian soul,
We hailed it in God's name.
It ate the food it ne'er had eat,
And round and round it flew.
The ice did split with a thunder-fit;
The helmsman steered us through!
And a good south wind sprung up behind;
The Albatross did follow,
And every day, for food or play,
Came to the mariner's hollo!
In mist or cloud, on mast or shroud,
It perched for vespers nine;
Whiles all the night, through fog-smoke white,
Glimmered the white Moon-shine.'
'God save thee, ancient Mariner!
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>

25
themes/base/controlgroup.css
View File

@ -12,12 +12,15 @@
.ui-controlgroup {
vertical-align: middle;
}
.ui-controlgroup > .ui-button {
.ui-controlgroup > .ui-controlgroup-item {
float: left;
margin-left: 0;
margin-right: 0;
}
.ui-controlgroup-vertical > .ui-button {
.ui-controlgroup > .ui-controlgroup-item:focus {
z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
display: block;
float: none;
width: 100%;
@ -25,12 +28,18 @@
margin-bottom: 0;
text-align: left;
}
.ui-controlgroup-vertical label.ui-button {
.ui-controlgroup-vertical .ui-controlgroup-item {
box-sizing: border-box;
}
.ui-controlgroup .ui-spinner {
padding-top: .225em;
padding-bottom: .225em;
border-color: #ccc;
float: left;
.ui-controlgroup-label {
padding: .4em 1em;
}
.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;
}

14
ui/widgets/controlgroup.js
View File

@ -39,7 +39,8 @@ return $.widget( "ui.controlgroup", {
"button": "input[type=button], input[type=submit], input[type=reset], button, a",
"checkboxradio": "input[type='checkbox'], input[type='radio']",
"selectmenu": "select",
"spinner": ".ui-spinner-input"
"spinner": ".ui-spinner-input",
"controlgroupLabel": ".ui-controlgroup-label"
},
direction: "horizontal",
excludeInvisible: true
@ -67,7 +68,7 @@ return $.widget( "ui.controlgroup", {
// First we iterate over each of the items options
$.each( this.options.items, function( widget, selector ) {
var widgets,
var widgets, labels,
options = {};
// We assume everything is in the middle to start because we can't determine
@ -94,17 +95,22 @@ return $.widget( "ui.controlgroup", {
childWidgets.push( widgetElement[ 0 ] );
} );
} else if ( selector && widget === "controlgroupLabel" ) {
labels = that.element.find( selector );
that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
Array.prototype.push.apply( childWidgets, labels );
}
} );
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[ method ] ) {
if( data && data[ method ] ) {
data[ method ]();
}
} );
@ -203,7 +209,7 @@ return $.widget( "ui.controlgroup", {
// before determining first and last
$.each( [ "first", "last" ], function( index, value ) {
var instance = children[ value ]().data( "ui-controlgroup-data" );
console.log( instance )
if ( that[ "_" + instance.widgetName + "_options" ] ) {
instance.element[ instance.widgetName ](
that[ "_" + instance.widgetName + "_options" ](