Permalink
Browse files

Demos: Added the custom select demo page.

  • Loading branch information...
jaspermdegroot committed Apr 24, 2013
1 parent 40da6d9 commit 5afefdd1eb60cf703b9530673237fd095cf2bf61
Showing with 32 additions and 24 deletions.
  1. +3 −1 demos/nav-widgets.php
  2. +29 −23 demos/widgets/selects/custom-selects.php
View
@@ -46,7 +46,9 @@
<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a href="widgets/radiobuttons/">Radio buttons</a></li>
<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
<li data-section="Widgets" data-filtertext="selectmenus native optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
<li data-section="Widgets" data-filtertext="selectmenus custom multiple optgroup disabled forms"><a href="widgets/selects/custom-selects.php">Select, custom</a></li>
<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a href="widgets/sliders/" data-ajax="false">Slider, single</a></li>
@@ -3,37 +3,43 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom select - 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">
<title>Custom selects - 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>
<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>Custom select</h1>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<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">
<div data-role="content" class="jqm-content">
<form>
<h1>Custom select menu <a href="http://api.jquerymobile.com/select/" 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">The custom select uses a popup with a listview to display the menu. For long lists a dialog will be used.
</p>
<h2>Examples</h2>
<div data-demo-html="true">
<div data-role="fieldcontain">
<label for="select-custom-1">Basic:</label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
<label for="select-custom-1">Basic:</label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
</div><!--/demo-html -->
@@ -370,15 +376,15 @@
</fieldset>
</div><!--/demo-html -->
</form>
</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>

0 comments on commit 5afefdd

Please sign in to comment.