mirror of
https://github.com/tuxis-ie/nsedit.git
synced 2025-06-07 00:47:00 +03:00
Merge commit 'd32092c1f0' as 'jquery-ui'
This commit is contained in:
Mark Schouten
commit
b23131fdc2
717 changed files with 518330 additions and 0 deletions
63
jquery-ui/demos/checkboxradio/default.html
Normal file
63
jquery-ui/demos/checkboxradio/default.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Checkboxradio - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/all.css">
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script src="../../external/requirejs/require.js"></script>
|
||||
<script src="../bootstrap.js">
|
||||
$( "input" ).checkboxradio();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="widget">
|
||||
<h1>Checkbox and radio button widgets</h1>
|
||||
|
||||
<h2>Radio Group</h2>
|
||||
<fieldset>
|
||||
<legend>Select a Location: </legend>
|
||||
<label for="radio-1">New York</label>
|
||||
<input type="radio" name="radio-1" id="radio-1">
|
||||
<label for="radio-2">Paris</label>
|
||||
<input type="radio" name="radio-1" id="radio-2">
|
||||
<label for="radio-3">London</label>
|
||||
<input type="radio" name="radio-1" id="radio-3">
|
||||
</fieldset>
|
||||
|
||||
<h2>Checkbox</h2>
|
||||
<fieldset>
|
||||
<legend>Hotel Ratings: </legend>
|
||||
<label for="checkbox-1">2 Star</label>
|
||||
<input type="checkbox" name="checkbox-1" id="checkbox-1">
|
||||
<label for="checkbox-2">3 Star</label>
|
||||
<input type="checkbox" name="checkbox-2" id="checkbox-2">
|
||||
<label for="checkbox-3">4 Star</label>
|
||||
<input type="checkbox" name="checkbox-3" id="checkbox-3">
|
||||
<label for="checkbox-4">5 Star</label>
|
||||
<input type="checkbox" name="checkbox-4" id="checkbox-4">
|
||||
</fieldset>
|
||||
|
||||
<h2>Checkbox nested in label</h2>
|
||||
<fieldset>
|
||||
<legend>Bed Type: </legend>
|
||||
<label for="checkbox-nested-1">2 Double
|
||||
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
|
||||
</label>
|
||||
<label for="checkbox-nested-2">2 Queen
|
||||
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
|
||||
</label>
|
||||
<label for="checkbox-nested-3">1 Queen
|
||||
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
|
||||
</label>
|
||||
<label for="checkbox-nested-4">1 King
|
||||
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Examples of the markup that can be used with checkboxes and radio buttons.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
jquery-ui/demos/checkboxradio/images/jquery-mobile.png
Normal file
BIN
jquery-ui/demos/checkboxradio/images/jquery-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
jquery-ui/demos/checkboxradio/images/jquery-ui.png
Normal file
BIN
jquery-ui/demos/checkboxradio/images/jquery-ui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
jquery-ui/demos/checkboxradio/images/jquery.png
Normal file
BIN
jquery-ui/demos/checkboxradio/images/jquery.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
jquery-ui/demos/checkboxradio/images/qunit.png
Normal file
BIN
jquery-ui/demos/checkboxradio/images/qunit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
jquery-ui/demos/checkboxradio/images/sizzle.png
Normal file
BIN
jquery-ui/demos/checkboxradio/images/sizzle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
18
jquery-ui/demos/checkboxradio/index.html
Normal file
18
jquery-ui/demos/checkboxradio/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery UI Checkboxradio Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="no-icons.html">No icons</a></li>
|
||||
<li><a href="radiogroup.html">Radiogroup</a></li>
|
||||
<li><a href="product-selector.html">Product Selector</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
65
jquery-ui/demos/checkboxradio/no-icons.html
Normal file
65
jquery-ui/demos/checkboxradio/no-icons.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Checkboxradio - No Icons</title>
|
||||
<link rel="stylesheet" href="../../themes/base/all.css">
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script src="../../external/requirejs/require.js"></script>
|
||||
<script src="../bootstrap.js">
|
||||
$( "input" ).checkboxradio({
|
||||
icon: false
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="widget">
|
||||
<h1>Checkbox and radio button widgets</h1>
|
||||
|
||||
<h2>Radio Group</h2>
|
||||
<fieldset>
|
||||
<legend>Select a Location: </legend>
|
||||
<label for="radio-1">New York</label>
|
||||
<input type="radio" name="radio-1" id="radio-1">
|
||||
<label for="radio-2">Paris</label>
|
||||
<input type="radio" name="radio-1" id="radio-2">
|
||||
<label for="radio-3">London</label>
|
||||
<input type="radio" name="radio-1" id="radio-3">
|
||||
</fieldset>
|
||||
|
||||
<h2>Checkbox</h2>
|
||||
<fieldset>
|
||||
<legend>Hotel Ratings: </legend>
|
||||
<label for="checkbox-1">2 Star</label>
|
||||
<input type="checkbox" name="checkbox-1" id="checkbox-1">
|
||||
<label for="checkbox-2">3 Star</label>
|
||||
<input type="checkbox" name="checkbox-2" id="checkbox-2">
|
||||
<label for="checkbox-3">4 Star</label>
|
||||
<input type="checkbox" name="checkbox-3" id="checkbox-3">
|
||||
<label for="checkbox-4">5 Star</label>
|
||||
<input type="checkbox" name="checkbox-4" id="checkbox-4">
|
||||
</fieldset>
|
||||
|
||||
<h2>Checkbox nested in label</h2>
|
||||
<fieldset>
|
||||
<legend>Bed Type: </legend>
|
||||
<label for="checkbox-nested-1">2 Double
|
||||
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
|
||||
</label>
|
||||
<label for="checkbox-nested-2">2 Queen
|
||||
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
|
||||
</label>
|
||||
<label for="checkbox-nested-3">1 Queen
|
||||
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
|
||||
</label>
|
||||
<label for="checkbox-nested-4">1 King
|
||||
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Examples of the markup that can be used with checkboxes and radio buttons, here showing both without icons.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
138
jquery-ui/demos/checkboxradio/product-selector.html
Normal file
138
jquery-ui/demos/checkboxradio/product-selector.html
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Checkboxradio - Product Selector</title>
|
||||
<link rel="stylesheet" href="../../themes/base/all.css">
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script src="../../external/requirejs/require.js"></script>
|
||||
<script src="../bootstrap.js" data-modules="controlgroup">
|
||||
function handleShape( e ) {
|
||||
$( ".shape" )
|
||||
.removeClass( "circle pill square rectangle" )
|
||||
.addClass( $( e.target ).val() );
|
||||
};
|
||||
function handleToggle( e ) {
|
||||
var target = $( e.target );
|
||||
|
||||
if ( target.is( ".brand-toggle" ) ) {
|
||||
var checked = target.is( ":checked" ),
|
||||
value = $( "[name='brand']" )
|
||||
.filter( ":checked" )
|
||||
.attr( "data-" + target[ 0 ].id )
|
||||
$( ".shape" ).css( target[ 0 ].id, checked ? value : "" );
|
||||
} else {
|
||||
$( ".shape" ).toggleClass( target[ 0 ].id, target.is( ":checked") );
|
||||
}
|
||||
}
|
||||
function updateBrand() {
|
||||
handleShape( { target: $( "[name='shape']:checked" ) } );
|
||||
$( ".toggle:checked" ).each( function() {
|
||||
handleToggle( { target: $( this ) } );
|
||||
} );
|
||||
}
|
||||
|
||||
// Initalize widgets
|
||||
$( "input" ).checkboxradio();
|
||||
$( ".shape-bar, .brand" ).controlgroup();
|
||||
$( ".toggles" ).controlgroup( {
|
||||
direction: "vertical"
|
||||
} );
|
||||
|
||||
// Bind event handlers
|
||||
$( "[name='shape']").on( "change", handleShape );
|
||||
$( ".toggle" ).on( "change", handleToggle );
|
||||
$( "[name='brand']").on( "change", updateBrand );
|
||||
|
||||
// Set initial values
|
||||
updateBrand();
|
||||
</script>
|
||||
<style>
|
||||
.shape {
|
||||
margin-left: 4em;
|
||||
margin-top: 2.5em;
|
||||
height: 8em;
|
||||
width: 8em;
|
||||
box-shadow: 4px 4px 8px;
|
||||
color: #ccc;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 90%;
|
||||
background-position: 50%;
|
||||
}
|
||||
.circle, .pill {
|
||||
border-radius: 8em;
|
||||
}
|
||||
.pill, .rectangle {
|
||||
width: 16em;
|
||||
}
|
||||
.square, .circle {
|
||||
margin-left: 9em;
|
||||
}
|
||||
.border {
|
||||
border: 2px solid #333333;
|
||||
}
|
||||
.toggles {
|
||||
width: 200px;
|
||||
}
|
||||
.toggle-wrap, .shape {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.controls {
|
||||
background: #ccc;
|
||||
padding: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<div class="brand-wrap">
|
||||
<h3>1.) Select a brand</h3>
|
||||
<div class="brand">
|
||||
<label for="brand-jquery">jQuery</label>
|
||||
<input type="radio" name="brand" id="brand-jquery" data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)">
|
||||
<label for="brand-jquery-ui">jQuery UI</label>
|
||||
<input type="radio" name="brand" id="brand-jquery-ui" data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" checked>
|
||||
<label for="brand-jquery-mobile">jQuery Mobile</label>
|
||||
<input type="radio" name="brand" id="brand-jquery-mobile" data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)">
|
||||
<label for="brand-sizzle">Sizzle</label>
|
||||
<input type="radio" name="brand" id="brand-sizzle" data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)">
|
||||
<label for="brand-qunit">QUnit</label>
|
||||
<input type="radio" name="brand" id="brand-qunit" data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="shape-wrap">
|
||||
<h3>2.) Select a shape</h3>
|
||||
<div class="shape-bar">
|
||||
<label for="shape-circle">Circle</label>
|
||||
<input type="radio" name="shape" id="shape-circle" value="circle" checked>
|
||||
<label for="shape-square">Square</label>
|
||||
<input type="radio" name="shape" id="shape-square" value="square">
|
||||
<label for="shape-pill">Pill</label>
|
||||
<input type="radio" name="shape" id="shape-pill" value="pill">
|
||||
<label for="shape-rectangle">Rectangle</label>
|
||||
<input type="radio" name="shape" id="shape-rectangle" value="rectangle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-wrap">
|
||||
<h3>3.) Customize</h3>
|
||||
<div class="toggles">
|
||||
<label for="color">Shadow</label>
|
||||
<input class="toggle brand-toggle" type="checkbox" name="color" id="color">
|
||||
<label for="border">Border</label>
|
||||
<input class="toggle" type="checkbox" name="border" id="border">
|
||||
<label for="background-color">Background</label>
|
||||
<input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
|
||||
<label for="background-image">Background Image</label>
|
||||
<input class="toggle brand-toggle" type="checkbox" name="background-image" id="background-image" checked>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shape circle background jquery-ui"></div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Using two sets of radio buttons, as horizontal controlgroups, and one group of checkboxes, as a vertical controlgroup, to implement a product selector.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
33
jquery-ui/demos/checkboxradio/radiogroup.html
Normal file
33
jquery-ui/demos/checkboxradio/radiogroup.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Checkboxradio - Radio Group</title>
|
||||
<link rel="stylesheet" href="../../themes/base/all.css">
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script src="../../external/requirejs/require.js"></script>
|
||||
<script src="../bootstrap.js" data-modules="controlgroup">
|
||||
$( "input" ).checkboxradio();
|
||||
$( "fieldset" ).controlgroup();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="widget">
|
||||
|
||||
<h2>Radio Group</h2>
|
||||
<fieldset>
|
||||
<legend>Select a Location: </legend>
|
||||
<label for="radio-1">New York</label>
|
||||
<input type="radio" name="radio-1" id="radio-1">
|
||||
<label for="radio-2">Paris</label>
|
||||
<input type="radio" name="radio-1" id="radio-2">
|
||||
<label for="radio-3">London</label>
|
||||
<input type="radio" name="radio-1" id="radio-3">
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Example markup using the controlgroup widget to create a radio group.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue