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

Commit 5afefdd

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: Added the custom select demo page.
1 parent 40da6d9 commit 5afefdd

File tree

2 files changed

+32
-24
lines changed

2 files changed

+32
-24
lines changed

‎demos/nav-widgets.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@
4646

4747
<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a href="widgets/radiobuttons/">Radio buttons</a></li>
4848

49-
<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
49+
<li data-section="Widgets" data-filtertext="selectmenus native optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
50+
51+
<li data-section="Widgets" data-filtertext="selectmenus custom multiple optgroup disabled forms"><a href="widgets/selects/custom-selects.php">Select, custom</a></li>
5052

5153
<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a href="widgets/sliders/" data-ajax="false">Slider, single</a></li>
5254

‎demos/widgets/selects/custom-selects.php‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,43 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Custom select - jQuery Mobile Demos</title>
7-
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8-
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
9-
<link rel="shortcut icon" href="../../favicon.ico">
6+
<title>Custom selects - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
9+
<link rel="shortcut icon" href="../../favicon.ico">
1010
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
11-
<script src="../../../js/jquery.js"></script>
12-
<script src="../../_assets/js/"></script>
13-
<script src="../../../js/"></script>
11+
<script src="../../../js/jquery.js"></script>
12+
<script src="../../_assets/js/"></script>
13+
<script src="../../../js/"></script>
1414
</head>
1515
<body>
1616
<div data-role="page" class="jqm-demos" data-quicklinks="true">
1717

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

24-
<div data-role="content" class="jqm-content">
25+
<div data-role="content" class="jqm-content">
2526

26-
<form>
27+
<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>
28+
29+
<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.
30+
</p>
31+
32+
<h2>Examples</h2>
2733

2834
<div data-demo-html="true">
2935
<div data-role="fieldcontain">
30-
<label for="select-custom-1">Basic:</label>
31-
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
32-
<option value="1">The 1st Option</option>
33-
<option value="2">The 2nd Option</option>
34-
<option value="3">The 3rd Option</option>
35-
<option value="4">The 4th Option</option>
36-
</select>
36+
<label for="select-custom-1">Basic:</label>
37+
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
38+
<option value="1">The 1st Option</option>
39+
<option value="2">The 2nd Option</option>
40+
<option value="3">The 3rd Option</option>
41+
<option value="4">The 4th Option</option>
42+
</select>
3743
</div>
3844
</div><!--/demo-html -->
3945

@@ -370,15 +376,15 @@
370376
</fieldset>
371377
</div><!--/demo-html -->
372378

373-
</form>
374-
375379
</div><!-- /content -->
376380

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

386+
<?php include( '../../global-nav.php' ); ?>
387+
382388
</div><!-- /page -->
383389
</body>
384390
</html>

0 commit comments

Comments
 (0)