Skip to content
Permalink
Browse files

Button: Initial commit of button re-factor

Move to using element stats rather then js class states remove
ui-button-text spans.
Removed button set
  • Loading branch information...
arschmitz committed Jan 22, 2014
1 parent 79d312f commit 02033262ee0fb1d9f33c361b3c2ddfa168604854

This file was deleted.

@@ -11,25 +11,33 @@
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "input[type=submit], a, button" )
.button()
.on( "click", function( event ) {
event.preventDefault();
});
});
$( function() {
$( ".widget input[type=submit], .widget a, .widget button" ).button();
$( "button, input, a" ).click( function( event ) {
event.preventDefault();
} );
} );
</script>
</head>
<body>
<div class="widget">
<h1>Widget Buttons</h1>
<button>A button element</button>

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

<input type="submit" value="A submit button">
<a href="#">An anchor</a>
</div>
<h1>CSS Buttons</h1>
<button class="ui-button ui-widget ui-corner-all">A button element</button>

<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">

<a href="#">An anchor</a>
<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>

<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>
<p>Buttons can be styled via the button widget or by adding the classes yourself. This avoids the JavaScript overhead if you don't need any of the methods provided by the button widget.</p>
</div>
</body>
</html>
@@ -11,38 +11,58 @@
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "button:first" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-locked"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
$( function() {
$( ".widget button" ).first()
.button()
.next().button( {
icon: "ui-icon-gear",
showLabel: false
} ).next().button( {
icon: "ui-icon-gear"
} ).next().button( {
icon: "ui-icon-gear",
iconPosition: "end"
} ).next().button( {
icon: "ui-icon-gear",
iconPosition: "top"
} ).next().button( {
icon: "ui-icon-gear",
iconPosition: "bottom"
} );
} );
</script>
</head>
<body>

<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 class="widget">
<h1>Widget</h1>
<button>Button with only text</button>
<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with icon on the right</button>
<button>Button with icon on the top</button>
<button>Button with icon on the bottom</button>
</div>
<div class="css">
<h1>CSS</h1>
<button class="ui-button ui-widget ui-corner-all">
Button with only text
</button>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
<span class="ui-icon ui-icon-gear"></span> Button with icon only
</button>
<button class="ui-button ui-widget ui-corner-all">
<span class="ui-icon ui-icon-gear"></span> Button with icon on the left
</button>
<button class="ui-button ui-widget ui-corner-all">
Button with icon on the right <span class="ui-icon ui-icon-gear"></span>
</button>
<button class="ui-button ui-widget ui-corner-all">
<span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> Button with icon on the top
</button>
<button class="ui-button ui-widget ui-corner-all">
Button with icon on the bottom <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span>
</button>
</div>
<div class="demo-description">
<p>Some buttons with various combinations of text and icons.</p>
</div>
@@ -9,11 +9,7 @@

<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="radio.html">Radios</a></li>
<li><a href="checkbox.html">Checkboxes</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="toolbar.html">Toolbar</a></li>
<li><a href="splitbutton.html">Split Button</a></li>
</ul>

</body>

This file was deleted.

@@ -6,54 +6,23 @@

<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core button"></script>
<script src="../../lib/bootstrap.js" data-widget="button"></script>
<script src="../../lib/bootstrap.js" data-widget="button" data-no-back-compat="true"></script>
</head>
<body>

<div id="qunit"></div>
<div id="qunit-fixture">
<form id="form1">
<div><button id="button">Label</button></div>

<div><button id="button" class="foo">Label</button></div>

<div id="radio0" style="margin-top: 2em;">
<input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
<input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
<input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
</div>
<div id="checkbox0">
<input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
<input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
<input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
</div>
<form>
<div id="radio1" style="margin-top: 2em;">
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
<input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
<input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
</div>
</form>
<form>
<div id="radio2" style="margin-top: 2em;">
<input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
<input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
<input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
</div>
<div><input id="submit" type="submit" value="Label"></div>
</form>
<form>
<div id="radio3">
<input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
<input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
<input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
</div>
</form>

<input type="checkbox" id="check"><label for="check">Toggle</label>
<input type="checkbox" id="check2"><label for="check2">Checkbox</label>

<div><input id="submit" type="submit" value="Label"></div>

<button id="button1">Button</button>
<form id="form2">
<button id="button-disabled" disabled>Button</button>

<a href="#" id="anchor-button">Anchor Button</a>
</form>
</div>
</body>
</html>
@@ -0,0 +1,27 @@
define( [
"lib/common",
"ui/button"
], function( common ) {

common.testWidget( "button", {
defaults: {
classes: {
"ui-button": "ui-corner-all"
},
disabled: null,
icon: null,
iconPosition: "beginning",
icons: {
primary: null,
secondary: null
},
label: null,
showLabel: true,
text: true,

// Callbacks
create: null
}
} );

} );
@@ -5,14 +5,14 @@ define( [

common.testWidget( "button", {
defaults: {
classes: {},
disabled: null,
icons: {
primary: null,
secondary: null
classes: {
"ui-button": "ui-corner-all"
},
disabled: null,
icon: null,
iconPosition: "beginning",
label: null,
text: true,
showLabel: true,

// Callbacks
create: null

0 comments on commit 0203326

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