Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Demos: Separate demo page for new flipswitch widget.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaspermdegroot
jaspermdegroot committed Jul 22, 2013
1 parent 915edb5 commit d0e94b4
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 12 deletions.
4 changes: 3 additions & 1 deletion demos/nav-widgets.php
View file
Expand Up @@ -16,7 +16,9 @@

<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.php" data-ajax="false">Flip switch toggle</a></li>
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.php" data-ajax="false">Flip switch, slider</a></li>

<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/flipswitch/index.php" data-ajax="false">Flip switch <span class="ui-li-count">New</span></a></a></li>

<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer toolbar</a></li>

Expand Down
189 changes: 189 additions & 0 deletions demos/widgets/flipswitch/index.php
View file
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flip Toggle Switch - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
<?php include( '../../search.php' ); ?>
</div><!-- /header -->

<div data-role="content" class="jqm-content">

<h1>Flip switch <a href="http://api.jquerymobile.com/flipswitch/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>

<p class="jqm-intro">Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
</p>

<h2>Basic checkbox switch</h2>

<div data-demo-html="true">
<form>
<label for="flip-checkbox">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox"/>
</form>
</div><!-- /demo-html -->

<h2>Basic select switch</h2>

<div data-demo-html="true">
<form>
<label for="flip-select">Flip toggle switch select:</label>
<select id="flip-select" name="flip-select" data-role="flipswitch">
<option>On</option>
<option>Off</option>
</select>
</form>
</div><!-- /demo-html -->

<h2>Theme</h2>
<div data-demo-html="true">
<form>
<label for="flip-2">Flip toggle switch:</label>
<select name="flip-2" id="flip-2" data-role="flipswitch" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div><!-- /demo-html -->

<h2>Mini</h2>

<div data-demo-html="true">
<form>
<label for="flip-3">Flip toggle switch:</label>
<select name="flip-3" id="flip-3" data-role="flipswitch" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div><!-- /demo-html -->

<h2>Disabled</h2>

<div data-demo-html="true">
<form>
<label for="flip-4">Flip toggle switch:</label>
<select name="flip-4" id="flip-4" data-role="flipswitch" disabled="disabled">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div><!-- /demo-html -->

<h2>Label hidden</h2>

<div data-demo-html="true">
<form>
<label for="flip-5" class="ui-hidden-accessible">Flip toggle switch:</label>
<select name="flip-5" id="flip-5" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div><!-- /demo-html -->

<h2>Fieldcontain</h2>

<div data-demo-html="true">
<form>
<div data-role="fieldcontain">
<label for="flip-6">Flip toggle switch:</label>
<select name="flip-6" id="flip-6" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</form>
</div><!-- /demo-html -->

<h2>Fieldcontain, mini</h2>

<div data-demo-html="true">
<form>
<div data-role="fieldcontain">
<label for="flip-7">Flip toggle switch:</label>
<select name="flip-7" id="flip-7" data-role="flipswitch" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</form>
</div><!-- /demo-html -->

<h2>Fieldcontain, hidden label</h2>

<div data-demo-html="true">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="flip-8">Flip toggle switch:</label>
<select name="flip-8" id="flip-8" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</form>
</div><!-- /demo-html -->

<h2>Fieldcontain, hidden label, mini</h2>

<div data-demo-html="true">
<form>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="flip-9">Flip toggle switch:</label>
<select name="flip-9" id="flip-9" data-role="flipswitch" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</form>
</div><!-- /demo-html -->

<h2>Grid</h2>

<div data-demo-html="true">
<form>
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="flip-10">Flip toggle switch:</label>
<select name="flip-10" id="flip-10" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div><!-- /ui-block -->
<div class="ui-block-b">
<label for="flip-11">Flip toggle switch:</label>
<select name="flip-11" id="flip-11" data-role="flipswitch" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div><!-- /ui-block -->
</div><!-- /ui-grid -->
</form>
</div><!-- /demo-html -->

</div><!-- /content -->

<div data-role="footer" class="jqm-footer">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /footer -->

<?php include( '../../global-nav.php' ); ?>

</div><!-- /page -->
</body>
</html>
17 changes: 6 additions & 11 deletions demos/widgets/sliders/switch.php
View file
Expand Up @@ -38,28 +38,23 @@
<p class="jqm-intro">Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
</p>

<h2>Basic checkbox switch</h2>
<div data-demo-html="true">
<form>
<label for="flip-1">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="flip-1" id="flip-1"/>
</form>
</div><!-- /demo-html -->
<h2>Basic select switch</h2>
<h2>Basic</h2>
<div data-demo-html="true">
<form>
<label for="flip-select">Flip toggle switch select:</label>
<select id="flip-select" name="flip-select" data-role="flipswitch">
<label for="flip-1">Flip toggle switch:</label>
<select id="flip-1" name="flip-1" data-role="slider">
<option>On</option>
<option>Off</option>
</select>
</form>
</div><!-- /demo-html -->

<h2>Theme</h2>

<div data-demo-html="true">
<form>
<label for="flip-2">Flip toggle switch:</label>
<select name="flip-2" id="flip-2" data-role="slider" data-track-theme="a" data-theme="a">
<select name="flip-2" id="flip-2" data-role="slider" data-track-theme="b" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
Expand Down

0 comments on commit d0e94b4

Please sign in to comment.