Skip to content

Commit 03526d2

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: Improvements to theme demo pages.
1 parent ef8730d commit 03526d2

File tree

3 files changed

+75
-30
lines changed

3 files changed

+75
-30
lines changed

‎demos/theme-classic/images/ajax-loader.gif‎

6.1 KB
Loading

‎demos/theme-classic/index.php‎

Lines changed: 59 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@
2121
$( ".ui-collapsible-content" ).removeClass( "ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e" ).addClass( "ui-body-" + themeClass );
2222
$( ".theme" ).text( themeClass );
2323
});
24+
$( "#opt-navbars input" ).on( "change", function( event ) {
25+
if ( $( "#show" ).prop( "checked" ) ) {
26+
$( "#testpage .ui-navbar" ).show();
27+
$( "#testpage .ui-footer h4" ).hide();
28+
} else if ( $( "#hide" ).prop( "checked" ) ) {
29+
$( "#testpage .ui-navbar" ).hide();
30+
$( "#testpage .ui-footer h4" ).show();
31+
}
32+
});
2433
$( "#opt-shadow input" ).on( "change", function( event ) {
2534
if ( $( "#on" ).prop( "checked" ) ) {
2635
$( "#testpage" ).removeClass( "noshadow" );
@@ -35,13 +44,18 @@
3544
$( "#testpage" ).addClass( "ui-shadow-icon" );
3645
}
3746
});
38-
$( "#opt-navbars input" ).on( "change", function( event ) {
39-
if ( $( "#show" ).prop( "checked" ) ) {
40-
$( "#testpage .ui-navbar" ).show();
41-
$( "#testpage .ui-footer h4" ).hide();
42-
} else if ( $( "#hide" ).prop( "checked" ) ) {
43-
$( "#testpage .ui-navbar" ).hide();
44-
$( "#testpage .ui-footer h4" ).show();
47+
$( "#opt-gradient input" ).on( "change", function( event ) {
48+
if ( $( "#off2" ).prop( "checked" ) ) {
49+
$( "#testpage" ).addClass( "nogradient" );
50+
} else if ( $( "#on2" ).prop( "checked" ) ) {
51+
$( "#testpage" ).removeClass( "nogradient" );
52+
}
53+
});
54+
$( "#opt-highlight input" ).on( "change", function( event ) {
55+
if ( $( "#off3" ).prop( "checked" ) ) {
56+
$( "#testpage" ).addClass( "nohighlight" );
57+
} else if ( $( "#on3" ).prop( "checked" ) ) {
58+
$( "#testpage" ).removeClass( "nohighlight" );
4559
}
4660
});
4761
});
@@ -52,6 +66,16 @@
5266
-moz-box-shadow: none !important;
5367
box-shadow: none !important;
5468
}
69+
.nogradient,
70+
.nogradient * {
71+
background-image: none !important;
72+
}
73+
.nohighlight .ui-btn:before {
74+
display: none !important;
75+
}
76+
form.ui-mini .ui-field-contain fieldset.ui-controlgroup legend small {
77+
color: #666;
78+
}
5579
</style>
5680
</head>
5781
<body>
@@ -90,31 +114,49 @@
90114
<input type="radio" name="theme" id="e">
91115
</fieldset>
92116
</div>
117+
<div class="ui-field-contain" id="opt-navbars">
118+
<fieldset data-role="controlgroup" data-type="horizontal">
119+
<legend>Navbars:</legend>
120+
<label for="show">Show</label>
121+
<input type="radio" name="navbars" id="show" checked>
122+
<label for="hide">Hide</label>
123+
<input type="radio" name="navbars" id="hide">
124+
</fieldset>
125+
</div>
93126
<div class="ui-field-contain" id="opt-shadow">
94127
<fieldset data-role="controlgroup" data-type="horizontal">
95-
<legend>Shadow:</legend>
128+
<legend>Shadow:<br><small>Off: set the widget option shadow to false (data-shadow="false")</small></legend>
96129
<label for="on">On</label>
97-
<input type="radio" name="shadow" id="on">
130+
<input type="radio" name="shadow" id="on" checked>
98131
<label for="off">Off</label>
99-
<input type="radio" name="shadow" id="off" checked>
132+
<input type="radio" name="shadow" id="off">
100133
</fieldset>
101134
</div>
102135
<div class="ui-field-contain" id="opt-iconshadow">
103136
<fieldset data-role="controlgroup" data-type="horizontal">
104-
<legend>Icon shadow:</legend>
137+
<legend>Icon shadow:<br><small>On: add class ui-shadow-icon to the button or its container</small></legend>
105138
<label for="on1">On</label>
106139
<input type="radio" name="iconshadow" id="on1">
107140
<label for="off1">Off</label>
108141
<input type="radio" name="iconshadow" id="off1" checked>
109142
</fieldset>
110143
</div>
111-
<div class="ui-field-contain" id="opt-navbars">
144+
<div class="ui-field-contain" id="opt-gradient">
112145
<fieldset data-role="controlgroup" data-type="horizontal">
113-
<legend>Navbars:</legend>
114-
<label for="show">Show</label>
115-
<input type="radio" name="navbars" id="show" checked>
116-
<label for="hide">Hide</label>
117-
<input type="radio" name="navbars" id="hide">
146+
<legend>Gradient:<br><small>Off: remove background-image rules from classic theme CSS</small></legend>
147+
<label for="on2">On</label>
148+
<input type="radio" name="gradient" id="on2" checked>
149+
<label for="off2">Off</label>
150+
<input type="radio" name="gradient" id="off2">
151+
</fieldset>
152+
</div>
153+
<div class="ui-field-contain" id="opt-highlight">
154+
<fieldset data-role="controlgroup" data-type="horizontal">
155+
<legend>Highlight:<br><small>Off: remove .ui-btn:before rule from classic theme CSS</small></legend>
156+
<label for="on3">On</label>
157+
<input type="radio" name="highlight" id="on3" checked>
158+
<label for="off3">Off</label>
159+
<input type="radio" name="highlight" id="off3">
118160
</fieldset>
119161
</div>
120162
</form>

‎demos/theme-default/index.php‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@
5050
-moz-box-shadow: none !important;
5151
box-shadow: none !important;
5252
}
53+
form.ui-mini .ui-field-contain fieldset.ui-controlgroup legend small {
54+
color: #666;
55+
}
5356
</style>
5457
</head>
5558
<body>
@@ -80,33 +83,33 @@
8083
<input type="radio" name="theme" id="b">
8184
</fieldset>
8285
</div>
86+
<div class="ui-field-contain" id="opt-navbars">
87+
<fieldset data-role="controlgroup" data-type="horizontal">
88+
<legend>Navbars:</legend>
89+
<label for="show">Show</label>
90+
<input type="radio" name="navbars" id="show" checked>
91+
<label for="hide">Hide</label>
92+
<input type="radio" name="navbars" id="hide">
93+
</fieldset>
94+
</div>
8395
<div class="ui-field-contain" id="opt-shadow">
8496
<fieldset data-role="controlgroup" data-type="horizontal">
85-
<legend>Shadow:</legend>
97+
<legend>Shadow:<br><small>Off: set the widget option shadow to false (data-shadow="false")</small></legend>
8698
<label for="on">On</label>
87-
<input type="radio" name="shadow" id="on">
99+
<input type="radio" name="shadow" id="on" checked>
88100
<label for="off">Off</label>
89-
<input type="radio" name="shadow" id="off" checked>
101+
<input type="radio" name="shadow" id="off">
90102
</fieldset>
91103
</div>
92104
<div class="ui-field-contain" id="opt-iconshadow">
93105
<fieldset data-role="controlgroup" data-type="horizontal">
94-
<legend>Icon shadow:</legend>
106+
<legend>Icon shadow:<br><small>On: add class ui-shadow-icon to the button or its container</small></legend>
95107
<label for="on1">On</label>
96108
<input type="radio" name="iconshadow" id="on1">
97109
<label for="off1">Off</label>
98110
<input type="radio" name="iconshadow" id="off1" checked>
99111
</fieldset>
100112
</div>
101-
<div class="ui-field-contain" id="opt-navbars">
102-
<fieldset data-role="controlgroup" data-type="horizontal">
103-
<legend>Navbars:</legend>
104-
<label for="show">Show</label>
105-
<input type="radio" name="navbars" id="show" checked>
106-
<label for="hide">Hide</label>
107-
<input type="radio" name="navbars" id="hide">
108-
</fieldset>
109-
</div>
110113
</form>
111114
112115
<div id="ui-body-test" class="ui-body ui-body-a ui-corner-all" style="margin-bottom:1em;">

0 commit comments

Comments
 (0)