Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-17 06:20:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactored switch sliders - more iPhone-like in behavior and appearance now.

Browse source
This commit is contained in:
scottjehl 2010-10-05 19:17:47 -04:00
parent c5ceff175b
commit 2fe29a1d2b
3 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
_form-controls.html
View file

@ -70,6 +70,14 @@
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider3">Another select slider:</label>
<select name="slider3" id="slider3" data-role="slider">
<option value="off">Off</option>
<option value="on" selected="selected">On</option>
</select>
</div>
</fieldset>
@ -96,9 +104,9 @@
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a" id="radio-choice-a" value="choice-a" checked="checked" />
<input type="radio" name="radio-choice-a" id="radio-choice-a" value="on" checked="checked" />
<label for="radio-choice-a">On</label>
<input type="radio" name="radio-choice-a" id="radio-choice-b" value="choice-b" />
<input type="radio" name="radio-choice-a" id="radio-choice-b" value="off" />
<label for="radio-choice-b">Off</label>
</fieldset>

7
css/jQuery.mobile.forms.slider.css
View file

@ -7,12 +7,13 @@ label.ui-slider { display: block; }
input.ui-slider-input { display: inline-block; width: 40px; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 0; top: 4px; width: 66%; }
div.ui-slider-switch { height: 32px; width: 40%; }
div.ui-slider-switch { height: 32px; overflow: hidden; }
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
div.ui-slider-labels { overflow: hidden; }
div.ui-slider-label { float: left; text-align: center; height: 36px; line-height: 36px; }
a.ui-slider-handle { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -13px; margin-left: -13px; }
div.ui-slider-switch a.ui-slider-handle { width: 101%; height: 32px; margin-top: -18px; margin-left: -101%; }
span.ui-slider-label { width: 101%; position: absolute; text-align: center; height: 36px; line-height: 36px; top: 0; margin: -1px 0; }
span.ui-slider-label-a { left: -126%; padding-left: 25%; margin-left: -2px }
span.ui-slider-label-b { right: -126%; padding-right: 25%; margin-right: -2px }
a.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; }
@media screen and (min-width: 480px){
label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }

2
css/jQuery.mobile.headerfooter.css
View file

@ -4,8 +4,8 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
/* page header & footer configuration */
.ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { position: absolute; z-index: 1000; overflow: hidden; width: 100%; }
.ui-page .ui-header, .ui-page .ui-footer { position: relative; }
.ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { position: absolute; z-index: 1000; overflow: hidden; width: 100%; }
.ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline { display: none; }
.ui-header .ui-back { position: absolute; left: 10px; top: .4em; }
.ui-header h1, .ui-footer h1 { text-align: center; font-size: 16px; display: block; margin: .6em 90px .8em; padding: 0; white-space: nowrap; overflow: hidden; }