Skip to content

Commit 0203326

Browse files
arschmitzarschmitz
committed
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
1 parent 79d312f commit 0203326

21 files changed

Lines changed: 849 additions & 982 deletions

‎demos/button/checkbox.html‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎demos/button/default.html‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,33 @@
1111
<script src="../../ui/button.js"></script>
1212
<link rel="stylesheet" href="../demos.css">
1313
<script>
14-
$(function() {
15-
$( "input[type=submit], a, button" )
16-
.button()
17-
.on( "click", function( event ) {
18-
event.preventDefault();
19-
});
20-
});
14+
$( function() {
15+
$( ".widget input[type=submit], .widget a, .widget button" ).button();
16+
$( "button, input, a" ).click( function( event ) {
17+
event.preventDefault();
18+
} );
19+
} );
2120
</script>
2221
</head>
2322
<body>
23+
<div class="widget">
24+
<h1>Widget Buttons</h1>
25+
<button>A button element</button>
2426

25-
<button>A button element</button>
27+
<input type="submit" value="A submit button">
2628

27-
<input type="submit" value="A submit button">
29+
<a href="#">An anchor</a>
30+
</div>
31+
<h1>CSS Buttons</h1>
32+
<button class="ui-button ui-widget ui-corner-all">A button element</button>
33+
34+
<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
2835

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

3138
<div class="demo-description">
3239
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
40+
<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>
3341
</div>
3442
</body>
3543
</html>

‎demos/button/icons.html‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,58 @@
1111
<script src="../../ui/button.js"></script>
1212
<link rel="stylesheet" href="../demos.css">
1313
<script>
14-
$(function() {
15-
$( "button:first" ).button({
16-
icons: {
17-
primary: "ui-icon-locked"
18-
},
19-
text: false
20-
}).next().button({
21-
icons: {
22-
primary: "ui-icon-locked"
23-
}
24-
}).next().button({
25-
icons: {
26-
primary: "ui-icon-gear",
27-
secondary: "ui-icon-triangle-1-s"
28-
}
29-
}).next().button({
30-
icons: {
31-
primary: "ui-icon-gear",
32-
secondary: "ui-icon-triangle-1-s"
33-
},
34-
text: false
35-
});
36-
});
14+
$( function() {
15+
$( ".widget button" ).first()
16+
.button()
17+
.next().button( {
18+
icon: "ui-icon-gear",
19+
showLabel: false
20+
} ).next().button( {
21+
icon: "ui-icon-gear"
22+
} ).next().button( {
23+
icon: "ui-icon-gear",
24+
iconPosition: "end"
25+
} ).next().button( {
26+
icon: "ui-icon-gear",
27+
iconPosition: "top"
28+
} ).next().button( {
29+
icon: "ui-icon-gear",
30+
iconPosition: "bottom"
31+
} );
32+
} );
3733
</script>
3834
</head>
3935
<body>
40-
41-
<button>Button with icon only</button>
42-
<button>Button with icon on the left</button>
43-
<button>Button with two icons</button>
44-
<button>Button with two icons and no text</button>
45-
36+
<div class="widget">
37+
<h1>Widget</h1>
38+
<button>Button with only text</button>
39+
<button>Button with icon only</button>
40+
<button>Button with icon on the left</button>
41+
<button>Button with icon on the right</button>
42+
<button>Button with icon on the top</button>
43+
<button>Button with icon on the bottom</button>
44+
</div>
45+
<div class="css">
46+
<h1>CSS</h1>
47+
<button class="ui-button ui-widget ui-corner-all">
48+
Button with only text
49+
</button>
50+
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
51+
<span class="ui-icon ui-icon-gear"></span> Button with icon only
52+
</button>
53+
<button class="ui-button ui-widget ui-corner-all">
54+
<span class="ui-icon ui-icon-gear"></span> Button with icon on the left
55+
</button>
56+
<button class="ui-button ui-widget ui-corner-all">
57+
Button with icon on the right <span class="ui-icon ui-icon-gear"></span>
58+
</button>
59+
<button class="ui-button ui-widget ui-corner-all">
60+
<span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> Button with icon on the top
61+
</button>
62+
<button class="ui-button ui-widget ui-corner-all">
63+
Button with icon on the bottom <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span>
64+
</button>
65+
</div>
4666
<div class="demo-description">
4767
<p>Some buttons with various combinations of text and icons.</p>
4868
</div>

‎demos/button/index.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@
99

1010
<ul>
1111
<li><a href="default.html">Default functionality</a></li>
12-
<li><a href="radio.html">Radios</a></li>
13-
<li><a href="checkbox.html">Checkboxes</a></li>
1412
<li><a href="icons.html">Icons</a></li>
15-
<li><a href="toolbar.html">Toolbar</a></li>
16-
<li><a href="splitbutton.html">Split Button</a></li>
1713
</ul>
1814

1915
</body>

‎demos/button/radio.html‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎tests/unit/button/button.html‎

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,23 @@
66

77
<script src="../../../external/requirejs/require.js"></script>
88
<script src="../../lib/css.js" data-modules="core button"></script>
9-
<script src="../../lib/bootstrap.js" data-widget="button"></script>
9+
<script src="../../lib/bootstrap.js" data-widget="button" data-no-back-compat="true"></script>
1010
</head>
1111
<body>
1212

1313
<div id="qunit"></div>
1414
<div id="qunit-fixture">
15+
<form id="form1">
16+
<div><button id="button">Label</button></div>
1517

16-
<div><button id="button" class="foo">Label</button></div>
17-
18-
<div id="radio0" style="margin-top: 2em;">
19-
<input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
20-
<input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
21-
<input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
22-
</div>
23-
<div id="checkbox0">
24-
<input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
25-
<input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
26-
<input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
27-
</div>
28-
<form>
29-
<div id="radio1" style="margin-top: 2em;">
30-
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
31-
<input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
32-
<input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
33-
</div>
34-
</form>
35-
<form>
36-
<div id="radio2" style="margin-top: 2em;">
37-
<input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
38-
<input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
39-
<input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
40-
</div>
18+
<div><input id="submit" type="submit" value="Label"></div>
4119
</form>
42-
<form>
43-
<div id="radio3">
44-
<input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
45-
<input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
46-
<input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
47-
</div>
48-
</form>
49-
50-
<input type="checkbox" id="check"><label for="check">Toggle</label>
51-
<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
5220

53-
<div><input id="submit" type="submit" value="Label"></div>
54-
55-
<button id="button1">Button</button>
21+
<form id="form2">
22+
<button id="button-disabled" disabled>Button</button>
5623

24+
<a href="#" id="anchor-button">Anchor Button</a>
25+
</form>
5726
</div>
5827
</body>
5928
</html>

‎tests/unit/button/common-deprecated.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
define( [
2+
"lib/common",
3+
"ui/button"
4+
], function( common ) {
5+
6+
common.testWidget( "button", {
7+
defaults: {
8+
classes: {
9+
"ui-button": "ui-corner-all"
10+
},
11+
disabled: null,
12+
icon: null,
13+
iconPosition: "beginning",
14+
icons: {
15+
primary: null,
16+
secondary: null
17+
},
18+
label: null,
19+
showLabel: true,
20+
text: true,
21+
22+
// Callbacks
23+
create: null
24+
}
25+
} );
26+
27+
} );

‎tests/unit/button/common.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ define( [
55

66
common.testWidget( "button", {
77
defaults: {
8-
classes: {},
9-
disabled: null,
10-
icons: {
11-
primary: null,
12-
secondary: null
8+
classes: {
9+
"ui-button": "ui-corner-all"
1310
},
11+
disabled: null,
12+
icon: null,
13+
iconPosition: "beginning",
1414
label: null,
15-
text: true,
15+
showLabel: true,
1616

1717
// Callbacks
1818
create: null

0 commit comments

Comments
 (0)