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

Merge branch 'master' of https://github.com/jquery/jquery-mobile

Browse source
This commit is contained in:
jblas@adobe.com 2011-11-08 11:21:01 -08:00
commit b198f57276
12 changed files with 276 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
docs/api/data-attributes.html
View file

@ -109,12 +109,37 @@
<td>swatch letter (a-z) - Sets all collapsibles in set</td>
</tr>
</table>
<h2><a href="../pages/page-dialogs.html">Dialog</a></h2>
<p>Container with <code>data-role="page"</code> or <code>"dialog"</code> linked to with <code>data-rel="dialog"</code> on the anchor.</p>
<table>
<tr>
<th>data-close-btn-text</th>
<td>string (text for the close button, dialog only)</td>
</tr>
<tr>
<th>data-dom-cache</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-id</th>
<td>string (unique id for the page)</td>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true | false (used in conjunction with fixed toolbars)</td>
</tr>
<tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - overlay theme</td>
<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-title</th>
<td>string (title used when page is shown)</td>
</tr>
</table>
@ -280,7 +305,7 @@
</table>
<h2><a href="../pages/page-anatomy.html">Page</a></h2>
<p>Container with <code>data-role="page"</code> or <code>"dialog"</code></p>
<p>Container with <code>data-role="page"</code></p>
<table>
<tr>
<th>data-close-btn-text</th>
@ -407,7 +432,6 @@
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
<li><a href="../../docs/api/mediahelpers.html">Responsive layout</a></li>
<li data-theme="a"><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>

73
docs/forms/selects/index.html
View file

@ -583,18 +583,85 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
</div>
<h2>Styling with data attributes</h2>
<h2>Theming selects</h2>
<p>You can specify any jQuery Mobile button <code>data-</code> attribute on a select element, too. In this example, we're setting the theme, icon and inline properties:</p>
<div data-role="fieldcontain">
<label for="select-choice-11" class="select">Actions</label>
<select name="select-choice-11" id="select-choice-11" data-theme="a" data-icon="gear" data-inline="true" data-native-menu="false">
<select name="select-choice-11" id="select-choice-11" data-theme="e" data-icon="gear" data-inline="true" data-native-menu="false">
<option value="edit">Edit user</option>
<option value="delete">Delete user</option>
</select>
</div>
<p>The <code>data-overlay-theme</code> attribute can be added a select element to set the color of the overlay layer that the dialog-based custom select menus and the outer border of the smaller custom menus. By default, the content block colors for swatch A will be used for the overlays.</p>
<div data-role="fieldcontain">
<label for="select-choice-15" class="select">Size</label>
<select name="select-choice-15" id="select-choice-15" data-theme="b" data-overlay-theme="d" data-native-menu="false">
<option value="t">Tall</option>
<option value="g">Grande</option>
<option value="v">Vente</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-13" class="select">Choose state(s):</label>
<select name="select-choice-13" id="select-choice-13" data-native-menu="false" data-theme="a" data-overlay-theme="e">
<option>Choose options</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<h2>Calling the select menu plugin</h2>
<p>The select menu plugin will auto initialize on any page that contains a select menu, no need for a <code>data-role</code> attribute in the markup. However, you can directly call the select menu plugin on any selector, just like any normal jQuery plugin:</p>

37
docs/pages/dialog-overlay.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" href="../../css/themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" data-overlay-theme="e">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="d">
<h1>Custom overlay</h1>
<p>This dialog adds <code>data-overlay-theme="e"</code> to the page container to set the overlay swatch color.</p>
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a" data-inline="true">I like it</a>
</div>
<div data-role="footer" data-theme="c">
<form style="padding-top:4px;">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
<label for="checkbox-0">Don't show this message again </label>
</form>
</div>
</div>
</body>
</html>

22
docs/pages/page-dialogs.html
View file

@ -60,21 +60,29 @@
<p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p>
<h2>Styling &amp; theming</h2>
<p>Dialogs can be styled with different themes, just like any page. Here is a different dialog design:</p>
<p>Dialogs can be styled with different theme swatches, just like any page by adding <code>data-theme</code> attributes to the header, content, or footer containers. Here is an example of a different dialog design:</p>
<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>
<p>Dialogs appear float above an overlay layer. This overlay adopts the swatch A content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch e:</p>
<a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>
<p>And dialogs can be can used more like a control sheet to offer multiple buttons by removing the header:</p>
<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>
<p>For the sake of readability, dialogs have a default <code>max-width</code> of 500 pixels (plus 15px padding on each side). To override this, use the following CSS in your theme:</p>
<h2>Dialog width and margins</h2>
<p>For the sake of readability, dialogs have a default <code>max-width</code> of 500 pixels (plus 15px padding on each side). There is also a 10% top <code>margin</code> to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:</p>
<code>
.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer { <strong>max-width: 100%;</strong> }
</code>
<code><pre>
.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
<strong> max-width: 500px;
margin: 10% auto 15px auto; </strong>
}
</pre></code>

2
docs/toolbars/docs-headers.html
View file

@ -169,7 +169,7 @@
<li><a href="docs-navbar.html">Navbars</a></li>
<li><a href="bars-fixed.html">Fixed positioning</a></li>
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
<li><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
<li><a href="bars-themes.html">Theming toolbars</a></li>
</ul>

4
experiments/scrollview/scrollview.js
View file

@ -1,8 +1,8 @@
function ResizePageContentHeight(page) {
var $page = $(page),
$content = $page.children( ".ui-content" ),
hh = $page.children( ".ui-header" ).outerHeight() : 0,
fh = $page.children( ".ui-footer" ).outerHeight() : 0,
hh = $page.children( ".ui-header" ).outerHeight() || 0,
fh = $page.children( ".ui-footer" ).outerHeight() || 0,
pt = parseFloat($content.css( "padding-top" )),
pb = parseFloat($content.css( "padding-bottom" )),
wh = window.innerHeight;

2
js/jquery.mobile.forms.select.custom.js
View file

@ -24,7 +24,7 @@
"<div data-" + $.mobile.ns + "role='content'></div>"+
"</div>" ).appendTo( $.mobile.pageContainer ).page(),
listbox = $("<div>", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-overlay-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
listbox = $("<div>", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
list = $( "<ul>", {
"class": "ui-selectmenu-list",

11
tests/speed/stats/index.php
View file

@ -1,23 +1,24 @@
<?php
$db = new PDO('sqlite:./stats.db');
$db->query('CREATE TABLE IF NOT EXISTS stats (id INTEGER, agent TEXT, point TEXT, value REAL, time TIMESTAMP, PRIMARY KEY (id))');
$db->query('CREATE TABLE IF NOT EXISTS stats (id INTEGER, agent TEXT, point TEXT, value REAL, time TIMESTAMP, pathname TEXT, PRIMARY KEY (id))');
// making a sad attempt here to provide a clean REST-respecting url scheme.
// stats with a GET returns - wait for it - the stats, and a post with the
// the right params will create a new entry
if ( $_SERVER['REQUEST_METHOD'] == "GET" ) {
$json = Array();
$st = $db->prepare( 'SELECT agent, point, value, time FROM stats' );
$st = $db->prepare( 'SELECT point, avg(value) as avg_value, pathname, strftime(\'%Y-%m-%d\', time) as day FROM stats GROUP BY pathname, point, strftime(\'%Y-%m-%d\', time) ORDER BY time;' );
$st->execute();
$result = $st->fetchAll(PDO::FETCH_ASSOC);
header("Content-Type: application/json");
echo json_encode($result);
} elseif ( $_POST['datapoint'] && $_POST['value'] && $_POST['agent'] ) {
$st = $db->prepare('INSERT INTO stats (agent, point, value, time) VALUES (:agent, :data_point, :value, DATETIME(\'now\'))');
} elseif ( $_POST['datapoint'] && $_POST['value'] && $_POST['agent'] && $_POST['pathname']) {
$st = $db->prepare('INSERT INTO stats (agent, point, value, pathname, time) VALUES (:agent, :data_point, :value, :pathname, DATETIME(\'now\'))');
$st->execute(array(
':agent' => $_POST['agent'],
':data_point' => $_POST['datapoint'],
':value' => $_POST['value']
':value' => $_POST['value'],
':pathname' => $_POST['pathname']
));
echo "success";

2
tests/speed/stats/perf.js
View file

@ -9,6 +9,8 @@ window.Perf = (function($, Perf) {
report: function( data, after ) {
var self = this;
data.pathname = location.pathname;
$.post( self.reportUrl, data, after );
},

18
tests/speed/stats/visualize/index.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../../../../js/jquery.js"></script>
<script type="text/javascript" src="http://www.filamentgroup.com/examples/charting_v2/visualize.jQuery.js"></script>
<script type="text/javascript" src="visualize.js"></script>
<link rel="stylesheet" href="visualize.css" type="text/css" media="screen" />
</head>
<body>
<div id="tables">
</div>
<div id="graphs">
</div>
</body>
</html>

46
tests/speed/stats/visualize/visualize.css Normal file
View file

@ -0,0 +1,46 @@
/*plugin styles*/
.visualize { border: 1px solid #888; position: relative; background: #fafafa; }
.visualize canvas { position: absolute; }
.visualize ul,.visualize li { margin: 0; padding: 0;}
/*table title, key elements*/
.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; }
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; font-size: 1.1em; }
.visualize ul.visualize-key { list-style: none; }
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; }
.visualize ul.visualize-key .visualize-key-label { color: #000; }
/*pie labels*/
.visualize-pie .visualize-labels { list-style: none; }
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute; margin: 0; padding:0; }
.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }
/*line,bar, area labels*/
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
.visualize-labels-x li span.line, .visualize-labels-y li span.line { position: absolute; border: 0 solid #ccc; }
.visualize-labels-x li { height: 100%; }
.visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
.visualize-labels-y li { width: 100%; }
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }
body {
margin-top: 50px;
}
table {
display: none;
}
div.visualize {
float: left;
margin-left: 50px;
margin-right: 50px;
}

50
tests/speed/stats/visualize/visualize.js Normal file
View file

@ -0,0 +1,50 @@
(function($) {
$(function() {
$.get("../", function(data) {
$.each(data, function( i, avg ) {
var $table = $( "#" + avg.point + "[data-pathname='" + avg.pathname + "']");
if( !$table.length ) {
$table = $( "<table>", {
id: avg.point,
"data-pathname": avg.pathname
});
$table.append( "<caption>" + avg.point + " " + avg.pathname + "</caption>");
$table.append( "<thead><tr></tr></thead>" );
$table.append( "<tbody><tr></tr></tbody>" );
}
// TODO assume time ordering in the data set
var $heading = $table.find("thead > tr > th:contains(" + avg.day + ")");
if( !$heading.length ) {
$heading = $("<th>", {
text: avg.day,
scope: "column"
});
$table.find("thead > tr").append($heading);
}
var $rowHeading = $table.find("tbody > tr > th:contains(" + avg.point + ")" ),
$row = $table.find( "tbody > tr" );
if( !$rowHeading.length ) {
$rowHeading = $("<th>", {
text: avg.point,
scope: "row"
});
$row.append( $rowHeading );
}
$row.append( "<td>" + avg.avg_value + "</td>" );
$("#tables").append($table);
});
$("#tables table").visualize({ type: "line", width: 400, height: 400 }).appendTo("#graphs");
});
});
})(jQuery);