Skip to content
Permalink
Browse files

Button demos: Coding standards.

  • Loading branch information...
scottgonzalez committed Sep 10, 2010
1 parent eba3067 commit 8b4d1877465d92de68c83a92b9c2eee2a5e096fa
@@ -1,49 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Button - Checkboxes demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
<meta charset="utf-8">
<title>jQuery UI Button - Checkboxes</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$("#check").button();
$("#format").buttonset();
$( "#check" ).button();
$( "#format" ).buttonset();
});
</script>
<style>
#format { margin-top: 2em; }
#format { margin-top: 2em; }
</style>
</head>
<body>

<div class="demo">

<input type="checkbox" id="check" /><label for="check">Toggle</label>
<div id="format">
<input type="checkbox" id="check1" /><label for="check1">B</label>
<input type="checkbox" id="check2" /><label for="check2">I</label>
<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>
<input type="checkbox" id="check" /><label for="check">Toggle</label>

<div id="format">
<input type="checkbox" id="check1" /><label for="check1">B</label>
<input type="checkbox" id="check2" /><label for="check2">I</label>
<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>

</div><!-- End demo -->



<div class="demo-description">

<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>

<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>

</div><!-- End demo-description -->



</body>
</html>
@@ -1,46 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Button - Default demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
<meta charset="utf-8">
<title>jQuery UI Button - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$("button, input:submit, a", ".demo").button();
$("a", ".demo").click(function() { return false; });
$( "button, input:submit, a", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
<style>
</style>
</head>
<body>

<div class="demo">

<button>A button element</button>
<input type="submit" value="A submit button"/>
<a href="#">An anchor</a>
<button>A button element</button>

<input type="submit" value="A submit button"/>

<a href="#">An anchor</a>

</div><!-- End demo -->



<div class="demo-description">

<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>

</div><!-- End demo-description -->



</body>
</html>
@@ -1,63 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Button - Icons demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
<meta charset="utf-8">
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$(".demo button:first").button({
$( ".demo button:first" ).button({
icons: {
primary: 'ui-icon-locked'
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: 'ui-icon-locked'
primary: "ui-icon-locked"
}
}).next().button({
icons: {
primary: 'ui-icon-gear',
secondary: 'ui-icon-triangle-1-s'
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: 'ui-icon-gear',
secondary: 'ui-icon-triangle-1-s'
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
</script>
<style>
</style>
</head>
<body>

<div class="demo">

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>
<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>

</div><!-- End demo -->



<div class="demo-description">

<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>

</div><!-- End demo-description -->



</body>
</html>
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta charset="utf-8">
<title>jQuery UI Button Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link rel="stylesheet" href="../demos.css">
</head>
<body>

@@ -1,46 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Button - Radio Buttons demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$("#radio").buttonset();
$( "#radio" ).buttonset();
});
</script>
<style>
</style>
</head>
<body>

<div class="demo">

<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>

</div><!-- End demo -->



<div class="demo-description">

<p>A set of three radio buttons transformed into a button set.</p>

</div><!-- End demo-description -->



</body>
</html>
@@ -1,33 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Button - Default demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
<meta charset="utf-8">
<title>jQuery UI Button - Split button</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$("#rerun")
$( "#rerun" )
.button()
.click( function() {
.click(function() {
alert( "Running the last action" );
})
.next()
.button( {
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click( function() {
alert( "Could display a menu to select an action" );
})
.parent()
.buttonset();
.next()
.button( {
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click(function() {
alert( "Could display a menu to select an action" );
})
.parent()
.buttonset();
});
</script>
<style>
@@ -38,23 +38,18 @@

<div class="demo">

<div>
<button id="rerun">Run last action</button>
<button id="select">Select an action</button>
</div>
<div>
<button id="rerun">Run last action</button>
<button id="select">Select an action</button>
</div>

</div><!-- End demo -->



<div class="demo-description">

<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon
and no text. Both are grouped together in a set.</p>

<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon and no text. Both are grouped together in a set.</p>
</div><!-- End demo-description -->



</body>
</html>

0 comments on commit 8b4d187

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