Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
scottjehl 2010-10-11 14:41:33 -04:00
commit ba65a41abc
49 changed files with 589 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
css/jquery.mobile.theme.css
View file

@ -14,7 +14,7 @@
.ui-bar-a .ui-link-inherit { color: #fff; }
.ui-bar-a .ui-link { color: #7cc4e7; font-weight: bold; }
.ui-body-a { border: 1px solid #2A2A2A; background: #333; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal; background-image: -moz-linear-gradient(top, #666666, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333333),color-stop(1, #(top, #666666, #333333))); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#333333)')"; }
.ui-body-a { border: 1px solid #2A2A2A; background: #333; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal; background-image: -moz-linear-gradient(top, #666666, #222222); -webkit-gradient(linear,left top,left bottom,color-stop(0, #666666),color-stop(1, #222222)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#222222)')"; }
.ui-body-a, .ui-body-a input, .ui-body-a select, .ui-body-a textarea, .ui-body-a button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-a .ui-link-inherit { color: #fff; }
.ui-body-a .ui-link { color: #2489CE; font-weight: bold; }
@ -25,16 +25,16 @@
.ui-bar-b .ui-link-inherit { color: #fff; }
.ui-bar-b .ui-link { color: #7cc4e7; font-weight: bold; }
.ui-body-b { border: 1px solid #C6C6C6; background: #e6e7e8; color: #333333; text-shadow: 0 1px 0 #fff; font-weight: normal; background-image: -moz-linear-gradient(top, #d4d5d5, #c6c7c8); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #d4d5d5),color-stop(1, #c6c7c8)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d4d5d5', EndColorStr='#c6c7c8')"; }
.ui-body-b { border: 1px solid #C6C6C6; background: #e6e7e8; color: #333333; text-shadow: 0 1px 0 #fff; font-weight: normal; background-image: -moz-linear-gradient(top, #eeeeee, #c6c7c8); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #c6c7c8)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d4d5d5', EndColorStr='#c6c7c8')"; }
.ui-body-b, .ui-body-b input, .ui-body-b select, .ui-body-b textarea, .ui-body-b button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-b .ui-link-inherit { color: #333333; }
.ui-body-b .ui-link { color: #2489CE; font-weight: bold; }
.ui-bar-c { border: 1px solid #B3B3B3; background: #dfe0e1; color: #3E3E3E; font-weight: bold; text-shadow: 0 1px 1px #fff; background-image: -moz-linear-gradient(top, #f2f2f2, #e9eaeb); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f2f2f2),color-stop(1, #e9eaeb)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#e9eaeb')"; }
.ui-bar-c { border: 1px solid #B3B3B3; background: #f0f0f0; color: #3E3E3E; font-weight: bold; text-shadow: 0 1px 1px #fff; background-image: -moz-linear-gradient(top, #f0f0f0, #e9eaeb); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0f0f0),color-stop(1, #e9eaeb)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#e9eaeb')"; }
.ui-bar-c, .ui-bar-c input, .ui-bar-c select, .ui-bar-c textarea, .ui-bar-c button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-c { border: 1px solid #B3B3B3; background: #fff; color: #333333; text-shadow: 0 1px 0 #fff; }
.ui-body-c { border: 1px solid #B3B3B3; color: #333333; text-shadow: 0 1px 0 #fff; background: #f0f0f0; background-image: -moz-linear-gradient(top, #fff, #f0f0f0); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #f0f0f0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', EndColorStr='#f0f0f0')"; }
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-c .ui-link-inherit { color: #333333; }
.ui-body-c .ui-link { color: #2489CE; font-weight: bold; }
@ -45,6 +45,11 @@
.ui-bar-d .ui-link-inherit { color: #333; }
.ui-bar-d .ui-link { color: #2489CE; font-weight: bold; }
.ui-body-d { border: 1px solid #F7C942; color: #333333; text-shadow: 0 1px 0 #fff; background: #faeb9e; background-image: -moz-linear-gradient(top, #fff, #faeb9e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #faeb9e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', EndColorStr='#faeb9e')"; }
.ui-body-d, .ui-body-d input, .ui-body-d select, .ui-body-d textarea, .ui-body-d button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-d .ui-link-inherit { color: #333333; }
.ui-body-d .ui-link { color: #2489CE; font-weight: bold; }
/* interaction states */

38
docs/buttons/api-buttons.html Executable file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Button API</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<h2>Dependencies</h2>
<p>To be documented</p>
<h2>Options</h2>
<p>To be documented</p>
<h2>Methods</h2>
<p>To be documented</p>
<h2>Known Issues</h2>
<p>To be documented</p>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

53
docs/buttons/buttons-grouped.html Executable file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
<script type="text/javascript" src="docs/docs.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Grouped buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<p><strong>Vertical</strong> grouped buttons (default)</p>
<div data-role="controlgroup" data-type="vertical" >
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
<p><strong>Horizontal</strong> grouped buttons</p>
<div data-role="controlgroup" data-type="horizontal" >
<a href="index.html" data-role="button" data-icon="arrow-u">Move up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Move down</a>
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
</div>
<p><strong>Horizontal</strong> grouped buttons, icon only</p>
<div data-role="controlgroup" data-type="horizontal" >
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Move up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Move down</a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Remove</a>
</div>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

52
docs/buttons/buttons-icons.html Executable file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
<script type="text/javascript" src="docs/docs.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Button icons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<h2>Icon position options</h2>
<p><strong>No icon</strong></p>
<a href="index.html" data-role="button">My button</a>
<p><strong>Left icon</strong> (default) - data-iconpos="left"</p>
<a href="index.html" data-role="button" data-icon="delete">My button</a>
<p><strong>Right icon</strong> - data-iconpos="right"</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">My button</a>
<p><strong>Icon only</strong> - data-iconpos="notext"</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">My button</a>
<h2>Icon glyphs</h2>
<p><strong>Left arrow</strong> - data-icon="arrow-u"</p>
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
<p><strong>Right arrow</strong> - data-icon="arrow-d"</p>
<a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
<p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
<a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
<p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
<a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
<p><strong>Delete</strong> - data-icon="delete"</p>
<a href="index.html" data-role="button" data-icon="delete">My button</a>
<p><strong>Plus</strong> - data-icon="plus"</p>
<a href="index.html" data-role="button" data-icon="plus">My button</a>
<p><strong>Minus</strong> - data-icon="minus"</p>
<a href="index.html" data-role="button" data-icon="minus">My button</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

43
docs/buttons/buttons-inline.html Executable file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
<script type="text/javascript" src="docs/docs.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Inline buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<p><strong>Inline</strong> buttons (default)</p>
<div data-inline="true" >
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>
<p><strong>Inline toolbar</strong> buttons</p>
<div data-role="footer" data-position="inline">
<div data-inline="true">
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Move</a>
</div>
</div>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

58
docs/buttons/buttons-themes.html Executable file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
<script type="text/javascript" src="docs/docs.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Theming buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<p><strong>"a" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="a">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Theme d</a>
</div>
<p><strong>"b" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="b">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Theme d</a>
</div>
<p><strong>"c" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="c">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Theme d</a>
</div>
<p><strong>"d" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="d">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Theme d</a>
</div>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

44
docs/buttons/buttons-types.html Executable file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Lists</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
<script type="text/javascript" src="docs/docs.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Button markup options</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<p><strong>Link</strong> based button</p>
<a href="index.html" data-role="button">Link element</a>
<p><strong>Button</strong> based button</p>
<button>Button element</button>
<p><strong>Input type="button"</strong> based button</p>
<input type="button" value="Input type=button" />
<p><strong>Input type="submit"</strong> based button</p>
<input type="submit" value="Input type=submit" />
<p><strong>Input type="reset"</strong> based button</p>
<input type="reset" value="Input type=reset" />
<p><strong>Input type="image"</strong> based button</p>
<input type="image" value="Input type=image" />
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

134
docs/buttons/docs-buttons.html Executable file
View file

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Lists</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<h2>Button basics</h2>
<p>in jQuery Mobile, buttons that are used for navigation are coded as links and those that submit forms are coded as <code>button</code> elements. </p>
<h2>Buttons in page content</h2>
<p>In the main content block of a page (<code>data-role="content"</code>), any link that you want to look like a button needs the <code>data-role="button"</code> added to the link to tell the framework to style the link as a button.</p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt;
</code></pre>
<p>Creates this button:</p>
<a href="index.html" data-role="button">Link button</a>
<p>A <code>button</code> element or an <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> will all be automatically transformed into a custom styled button, no need to add the <code>data-role="button"</code> attribute. We found it was impossible to consistently style link and native form buttons consistently across platforms so the framework actually generates a new link-based button for each form button button and hides the original. When a click event fires on a the link button, it triggers a click on the original form button.</p>
<pre><code>
&lt;button&gt;Button submit&lt;/button&gt;
</pre></code>
<p>Creates this button:</p>
<button>Button submit</button>
<h2>Icon options</h2>
<p>Icons can be added to buttons by adding a <code>data-icon</code> attribute on the anchor to specify the icon to display. There a core set of <a href="buttons-icons.html">standard icons</a> included in the framework. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-r&quot;&gt;Link button&lt;/a&gt;
</pre></code>
<p>Creates this button:</p>
<a href="index.html" data-role="button" data-icon="arrow-r">Link button</a>
<p>By default, icons in buttons are added to the left of the text, but the <code>data-iconpos</code> attribute specifies the icon position: <code>left</code> or <code>right</code> of the text. To create an icon-only button, set the <code>data-iconpos</code> to <code>notext</code> and the button plugin will hide the text and add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our <code>data-</code> attributes on the link.</p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-r&quot; data-iconpos=&quot;right&quot;&gt;Link button&lt;/a&gt;
</pre></code>
<p>Creates this button:</p>
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Link button</a>
<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code>data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
<h2>Inline buttons</h2>
<p>If you have multiple buttons that should sit side-by-side on the same line instead of stacked like the default buttons, wrap the buttons in a container that has a <code>data-inline="true"</code> attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
&lt;div data-inline=&quot;true&quot;&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Cancel&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Save&lt;/a&gt;
&lt;/div&gt;
<h2>Grouping</h2>
<p>It's possible to group a set of buttons together to form a single block of buttons that look contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code>data-role="controlgroup"</code> attribute and the framework will create a vertical button group. This removes all margins and drop shadows between the buttons and only rounds the top and bottom buttons to get the effect that they are group together. </p>
<pre><code>
&lt;div data-role=&quot;controlgroup&quot;&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Yes&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;No&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Maybe&lt;/a&gt;
&lt;/div&gt;
</pre></code>
<p>Creates this button group:</p>
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
<p>By default, grouped buttons are presented as a vertical list. By adding the <code>data-type="horizontal"</code> attribute</p> to the control group container, you can swap this to a horizontal style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. Be aware that these will wrap to multiple lines if the button number of text length is to wide for the screen.
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
<h2>Theming</h2>
<p>jQuery Mobile has a rich <a href="../themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
<div data-role="content" data-theme="a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
<p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code>data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Theme a&lt;/a&gt;
</pre></code>
<p>Here are 4 buttons with icons that have a different swatch letter assigned via the <code>data-theme</code> attribute.</p>
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Theme d</a>
<h2>Buttons in bars</h2>
<p>When buttons are placed inside header or footer bars, they are styled a bit differently than in the body. To save space, buttons in bars are styled with a smaller text size, less padding and only enough width to fit the text and icons inside. The <a href="../toolbars/docs-bars.html">toolbar documentation</a> has full details on the styling options of button in bars.</p>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

45
docs/buttons/index.html Executable file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ">
<p>Buttons are one of the core widgets in jQuery Mobile and are used within a wide range of other plugins.</p>
</div><!-- /ui-body wrapper -->
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Documentation</li>
<li><a href="docs-buttons.html">Button basics</a></li>
<li><a href="api-buttons.html">API documentation</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Button examples</li>
<li><a href="buttons-types.html">Button markup</a></li>
<li><a href="buttons-icons.html">Button icons</a></li>
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Styles & theming</li>
<li><a href="buttons-themes.html">Applying themes</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

8
docs/index.html
View file

@ -19,11 +19,11 @@
<li><a href="page.html">Anatomy of a page</a></li>
<li><a href="links.html">Links & page transitions</a></li>
<li><a href="toolbars/index.html">Header, footer & nav bars</a></li>
<li><a href="toolbars.html">Content formatting</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="forms.html">Form elements</a></li>
<li><a href="content/index.html">Content formatting</a></li>
<li><a href="buttons/index.html">Buttons</a></li>
<li><a href="forms/index.html">Form elements</a></li>
<li><a href="lists/index.html">List views</a></li>
<li><a href="dialogs.html">Dialogs</a></li>
<li><a href="dialogs/indexs.html">Dialogs</a></li>
<li><a href="animations.html">Animations</a></li>
<li><a href="events.html">Events</a></li>
</ul>

BIN
docs/lists/images/asterisk_orange.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 760 B

BIN
docs/lists/images/book.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 593 B

BIN
docs/lists/images/cross.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 655 B

BIN
docs/lists/images/email_delete.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 756 B

BIN
docs/lists/images/flag_blue.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 671 B

BIN
docs/lists/images/folder.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 537 B

BIN
docs/lists/images/folder_heart.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 741 B

BIN
docs/lists/images/icon_box.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 555 B

BIN
docs/lists/images/icon_email_go.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 754 B

BIN
docs/lists/images/icon_tag.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 586 B

BIN
docs/lists/images/icon_vcard.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 533 B

BIN
docs/lists/images/star.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 670 B

37
docs/themes.html
View file

@ -17,14 +17,14 @@
<div class="ui-body ui-body-c">
<h2>Theming overview</h2>
<h2 id="overview">Theming overview</h2>
<p>The jQuery Mobile theme framework contains multiple color "swatches" for bars, content blocks and buttons. The key to the theme system used in jQuery UI is separation of color and texture (theme) from structural styles that define things like padding and dimensions. This allows the theme colors and textures to be defined once in the stylesheet then re-used throughout the interface as configurable color swatches that can be mixed and matched. We also take advantage of CSS3 properties to add rounded corners, box and text shadow and gradients to make the theme styles very lightweight and reduce server requests.</p>
<p>Themes include at least 3 swatches for bars, content blocks and buttons. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations. Themes may have additional swatches but these are used for accents colors or specific situations within an app or site.</p>
<h3>Bars</h3>
<h3 id="bars">Bars</h3>
<p>The default theme contains 4 color swatches for bars to use in header, footer and tool bars. The swatches are designated by letters (a, b, c, etc.) and are organized into a visual hierarchy where "a" is the highest level of visual priority, "b" is secondary, "c" is the baseline, and "d" is for accents. Each swatch defines the border color, text color, gradient, text-shadow, font family and link color. Our default theme looks like this:</p>
<div class="swatch-preview">
@ -38,7 +38,7 @@
<h3>Content Blocks</h3>
<h3 id="blocks">Content Blocks</h3>
<p>The default theme contains 3 color swatches for use in content blocks. These are designed to coordinate with the header color swatches in the default theme. Just as with bars, you can add as many content block swatches you want by extending the theme stylesheet. If a theme isn't specified on a content block, the framework will default to "c", just like the header.</p>
<div class="swatch-preview">
@ -48,7 +48,7 @@
</div><!-- end swatch-bars -->
<h3>Lists</h3>
<h3 id="lists">Lists</h3>
<p>There are 2 supported list view styles. The system defaults to the "a" swatch (silver in default theme) and it can be switched to "b" via the <code>data-theme</code> attribute.</p>
<ul data-role="listview" data-inset="true" data-theme="e">
<li><a href="index.html">List item A</a></li>
@ -62,7 +62,7 @@
<li><a href="index.html">List item A</a></li>
</ul>
<h3>Active state</h3>
<h3 id="active">Active state</h3>
<p>The jQuery Mobile framework uses a single theme swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the theme of the widget. We apply this in navigation and form controls to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it is not currently a theme swatch that can be overridden via the markup. It is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
@ -73,7 +73,7 @@
<label for="radio-choice-b">Off</label>
</fieldset>
<h3>Buttons</h3>
<h3 id="buttons">Buttons</h3>
<p>A set of 4 button colors are also included in the default theme. Each button has styles for normal, hover/focus and pressed states. Each button is intentionally styled to match the color of a bar so they feel tightly integrated. </p>
<div class="swatch-preview">
@ -83,8 +83,8 @@
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Button D</a>
</div><!-- end swatch-bars -->
<h3>Context-aware button theming</h3>
<p>When a link is placed in a header or footer bar, it is automatically transformed into a compact-sized button. It is also assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent theme, sort of like a chameleon. To illustrate this idea, below, the same exact button code is in each of the 4 bars and is automatically setting their color swatch to match on the parent bar swatch.</p>
<h3 id="context">Context-aware button theming</h3>
<p>A button is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent theme, like a chameleon. To illustrate this idea, below, the same exact button code is in each of the 4 bars and is automatically setting their color swatch to match on the parent bar swatch.</p>
<div class="swatch-preview">
<div data-role="header" data-theme="a"><h1>Bar A</h1><a href="index.html" data-icon="arrow-l">Button A</a></div>
@ -93,7 +93,9 @@
<div data-role="header" data-theme="d"><h1>Bar D</h1><a href="index.html" data-icon="arrow-l">Button D</a></div>
</div><!-- end swatch-bars -->
<p>This makes it really easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. To add visual emphasis of certain buttons in a toolbar, the theme swatch color for a button can be set by adding a <code>data-theme="a"</code> to the anchor to make it stand out visually from it's parent. If the theme is set on a button in the markup, the framework won't override the theme swatch color when the parent theme is changed because you made a conscious decision to set the color.</p>
<p>This makes it really easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container too. </p>
<p>To add visual emphasis of certain buttons in a toolbar, the theme swatch color for a button can be set by adding a <code>data-theme="a"</code> to the anchor to make it stand out visually from it's parent. If the theme is set on a button in the markup, the framework won't override the theme swatch color when the parent theme is changed because you made a conscious decision to set the color.</p>
<div class="swatch-bars">
<div data-role="header" data-theme="a" data-nobackbtn="true">
@ -131,21 +133,8 @@
</div><!-- end swatch-bars -->
<h3>Icons</h3>
<p></p>
<div class="swatch-preview">
<div data-role="header" data-theme="b" data-nobackbtn="true">
<div>
<a href="index.html" data-icon="arrow-l" data-iconpos="right">left</a>
<a href="index.html" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="index.html" data-icon="arrow-u" data-iconpos="right">up</a>
<a href="index.html" data-icon="arrow-d" data-iconpos="right">down</a>
<a href="index.html" data-icon="plus" data-iconpos="right">plus</a>
<a href="index.html" data-icon="minus" data-iconpos="right">minus</a>
<a href="index.html" data-icon="delete" data-iconpos="right">delete</a>
</div>
</div>
</div><!-- end swatch-bars -->
<h3 id="icons">Icons</h3>
<p>There a core set of <a href="buttons/buttons-icons.html">standard icons</a> included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>
<h3>Extensible themes</h3>

BIN
docs/toolbars/images/album-af.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/toolbars/images/album-ag.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.8 KiB

BIN
docs/toolbars/images/album-bb.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
docs/toolbars/images/album-bk.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.5 KiB

BIN
docs/toolbars/images/album-hc.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/toolbars/images/album-k.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4 KiB

BIN
docs/toolbars/images/album-mg.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.8 KiB

BIN
docs/toolbars/images/album-ok.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/toolbars/images/album-p.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.1 KiB

BIN
docs/toolbars/images/album-rh.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.1 KiB

BIN
docs/toolbars/images/album-ws.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.4 KiB

BIN
docs/toolbars/images/album-xx.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
docs/toolbars/images/asterisk_orange.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 760 B

BIN
docs/toolbars/images/book.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 593 B

BIN
docs/toolbars/images/cross.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 655 B

BIN
docs/toolbars/images/email_delete.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 756 B

BIN
docs/toolbars/images/flag_blue.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 671 B

BIN
docs/toolbars/images/folder.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 537 B

BIN
docs/toolbars/images/folder_heart.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 741 B

BIN
docs/toolbars/images/icon_box.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 555 B

BIN
docs/toolbars/images/icon_email_go.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 754 B

BIN
docs/toolbars/images/icon_tag.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 586 B

BIN
docs/toolbars/images/icon_vcard.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 533 B

BIN
docs/toolbars/images/star.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 670 B

62
experiments/converter/application.js
View file

@ -10,74 +10,78 @@ $(function() {
};
function list() {
var ul = $("#conversions").empty().page( "destroy" ),
ulEdit = $("#edit-conversions").empty().page( "destroy" );
$.each(all, function(index, conversion) {
var ul = $( "#conversions" ).empty()
.filter( ":mobile-page" ).page( "destroy" ),
ulEdit = $( "#edit-conversions" ).empty()
.filter( ":mobile-page" ).page( "destroy" );
$.each( all, function( index, conversion ) {
// if last update was less then a minute ago, don't update
if (conversion.type == "currency" && !conversion.rate || conversion.updated && conversion.updated + 60000 < +new Date) {
if ( conversion.type === "currency" && !conversion.rate || conversion.updated && conversion.updated + 60000 < +new Date) {
var self = conversion;
var url = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D" + conversion.from + conversion.to + "%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&diagnostics=true&callback=?";
$.getJSON(url, function(result) {
self.rate = parseFloat(result.query.results.row.rate);
$.getJSON( url, function( result ) {
console.log( "results", result );
self.rate = parseFloat( result.query.results.row.rate );
// TODO trigger a custom event instead of keyup?
$("#term").keyup();
$( "#term" ).keyup();
self.updated = +new Date;
conversions.store();
});
}
$("#conversion-field").tmpl(conversion, {
$( "#conversion-field" ).tmpl( conversion, {
symbols: symbols
}).appendTo(ul);
$("#conversion-edit-field").tmpl(conversion, {
}).appendTo( ul );
$( "#conversion-edit-field" ).tmpl( conversion, {
symbols: symbols
}).appendTo(ulEdit);
}).appendTo( ulEdit );
});
ul.page();
// TODO trigger a custom event instead of keyup?
$("#term").keyup();
$( "#term" ).keyup();
}
var all = conversions.all();
$("#term").keyup(function() {
$( "#term" ).keyup(function() {
var value = this.value;
$.each(all, function(index, conversion) {
$("#" + conversion.from + conversion.to).val( conversion.rate
? Math.ceil(value * conversion.rate * 100) / 100
$.each( all, function( index, conversion ) {
$( "#" + conversion.from + conversion.to ).val( conversion.rate
? Math.ceil( value * conversion.rate * 100 ) / 100
: "Rate not available, yet."
);
});
}).focus();
list();
$("form").submit(function() {
$("#term").blur();
$( "form" ).submit(function() {
$( "#term" ).blur();
return false;
});
$("#add").click(function() {
$( "#add" ).click(function() {
all.push({
type: "currency",
from: $("#currency-options-from").val(),
to: $("#currency-options-to").val()
from: $( "#currency-options-from" ).val(),
to: $( "#currency-options-to" ).val()
});
conversions.store();
list();
return false;
});
$("#clear").click(function() {
$( "#clear" ).click(function() {
conversions.clear();
list();
return false;
});
$("#restore").click(function() {
$( "#restore" ).click(function() {
conversions.restore();
list();
return false;
});
$("#edit-conversions").click(function(event) {
var target = $(event.target).closest(".deletebutton");
if (target.length) {
conversions.remove(target.prev("label").attr("for"));
$( "#edit-conversions" ).click(function( event ) {
var target = $( event.target ).closest( ".deletebutton" );
if ( target.length ) {
conversions.remove( target.prev( "label" ).attr( "for" ) );
list();
}
return false;
})
});
});
});

123
experiments/converter/storage.js
View file

@ -1,65 +1,68 @@
(function() {
var defaults = [
{
type: "currency",
from: "USD",
to: "EUR"
}
// TODO add back in as defaults once its possible to add other conversions, not just currencies
/*,
{
type: "distance",
from: "Miles",
to: "Kilometer",
rate: 1.609344
},
{
type: "distance",
from: "inch",
to: "centimeter",
rate: 2.54
}*/
];
// TODO fallback to whatever else when localStorage isn't available
function get() {
return JSON.parse(localStorage.getItem("conversions"));
var defaults = [
{
type: "currency",
from: "USD",
to: "EUR"
}
function set(value) {
window.console && console.log && console.log("storing conversion: "+ JSON.stringify(value))
localStorage.setItem("conversions", JSON.stringify(value));
// TODO add back in as defaults once its possible to add other conversions, not just currencies
/*,
{
type: "distance",
from: "Miles",
to: "Kilometer",
rate: 1.609344
},
{
type: "distance",
from: "inch",
to: "centimeter",
rate: 2.54
}*/
];
// TODO fallback to whatever else when localStorage isn't available
function get() {
return JSON.parse( localStorage.getItem( "conversions" ) );
}
function set( value ) {
if ( window.console && console.log ) {
console.log( "storing conversion: "+ JSON.stringify( value ) );
}
var conversions = get("conversions");
if (!conversions) {
conversions = $.extend([], defaults);
set(conversions);
localStorage.setItem( "conversions", JSON.stringify( value ) );
}
var conversions = get( "conversions" );
if ( !conversions ) {
conversions = defaults.slice();
set( conversions );
}
window.conversions = {
store: function() {
set( conversions );
},
all: function() {
return conversions;
},
clear: function() {
conversions.length = 0;
this.store();
},
restore: function() {
conversions.length = 0;
$.extend( conversions, defaults );
this.store();
},
remove: function( tofrom ) {
$.each( conversions, function( index, conversion ) {
if ( ( conversion.from + conversion.to ) === tofrom ) {
conversions.splice( index, 1 );
return false;
}
});
this.store();
}
window.conversions = {
store: function() {
set(conversions);
},
all: function() {
return conversions;
},
clear: function() {
conversions.length = 0;
this.store();
},
restore: function() {
conversions.length = 0;
$.extend(conversions, defaults);
this.store();
},
remove: function(tofrom) {
$.each(conversions, function(index, conversion) {
if ((conversion.from + conversion.to) == tofrom) {
conversions.splice(index, 1);
return false;
}
});
this.store();
}
};
};
})();