Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Querystrings containing "http" in the middle will load synchronously #276

Closed
wants to merge 50 commits into from

10 participants

@JeffreyWay

So, when working on a mobile project, I accidentally forgot to urlencode one of the values in the querystring. So the local url ended up being something like: somePage.php?bla=bla&path=http://...

The problem is that jQuery Mobile seems to test if "http" exists at all in the url. If it does, it's considered an external link, and loads synchronously.

Granted, this was an error on my part. Technically, 'http://' shouldn't exist in the querystring. But, assuming others make the same mistakes, and forget to url encode, the framework should compensate. Ensuring that the value "http://" occurs at the beginning of the string fixes it: ^https?

Very quick video example, if it helps: http://screenr.com/YkD

@ehynds

How forward compatible do you think this will be as triggerHandler is on the 1.5 roadmap for deprecation? http://docs.jquery.com/JQuery_1.5_Roadmap

good call. not using it anymore. :)

scottjehl and others added some commits
scottjehl added support for grouped collapsibles that make accordions. Parent e…
…lement just needs a data-role of collapsible-set. Fixes #87, Fixes #178
25c2ce5
scottjehl typo 6f5ce29
scottjehl Removed the ajaxClick function and moved its logic into the live clic…
…k event handler, where it is now refactored and simplified. Thx to Jeffrey Way for ideas that went into this refactor.

Also, clicks that are triggered on anchors will now be able to make a new http request, which improves listview behavior when clicking LIs that resolve to external urls.

Included in commit is a new demo/test page with various link types to make sure they behave as expected.

Fixes #272, Fixes #264
e736cae
scottjehl whitespace 0dcb2f2
scottjehl made default breakpoints non-overrideable and exposed function $.mobi…
…le.addResolutionBreakpoints (accepts number or array of numbers) which can be used to add widths to be used in min/max media classes on HTML element.
d7d43db
scottjehl made sure empty min/max breakpoint classes aren't added 13db788
scottjehl fixed typo in where the blank space was added. a601db1
scottjehl added px suffix to all media-min/max classes. Updated CSS usage to ma…
…tch.
4d3020d
scottjehl duplicate id 3699643
scottjehl add/remove active class on clicked link. f12872c
scottjehl removed a console.log a382295
scottjehl fixed path to google compiler in Makefile a71c7a9
scottjehl fixed up the demo so it works with our current events anyway d8c574d
@beausmith beausmith Add missing commas in button styles. 722a45e
@beausmith beausmith Removing un-necessary specificity from .ui-checkbox and .ui-radio sty…
…ling.
14fbb9a
@karanbhangui karanbhangui fixed aside elements being displayed multiple times per list item f78d110
@adimitrov adimitrov this keyword gets overwritten by jQuery.each 1858844
@JeffreyWay

Hmm - would it be better to use the delegate method, so that we're not attaching a listener to every single anchor on the page? I wonder if it'd make any noticeable difference..

Live uses event delegation. So, only one event binding to document.

Oh, haha. I'd swear I read "bind," instead of "live." Disregard.

@JeffreyWay

The second OR part of the regex will match a hash that's anywhere in the href. The caret should be in front. So:
/^\w+:|^#/.test( href )
Or:
/^(\w+:|#)/.test( href )

If you don't need that group anyway, use a non-capturing group:

/^(:?\w+:|#)/.test( href )
@JeffreyWay

Is nullLink being used anywhere else in this script? If so, is there a need to create the variable? Maybe not...
//for links created purely for interaction - ignore
(href === '#') && return false;

@JeffreyWay

Can we still use the 'cached' version of $(this)?

changeHashOnSuccess = !$this.is(unHashedSelectors);

@JeffreyWay

Saves a few characters.
if ( href.indexOf('/') && href.indexOf('#') !== 0 ) { ...

So, this covers '/somepage.html' and '#somepage.html'. But what about:
some page
Does this need to receive the base url as well?

unless I'm misunderstanding your question, it's those two types that don't get the relative base, while any others do. Some somepage.html would be covered, ya.

Hey Scott - So odd; I've deleted that comment three times now. Deleted it a few moments after originally posting it last night. Trying it again! UPDATE - must be a Github bug. Every time I delete the thread, and refresh the page, it shows back up again.

ok - no prob. Changes are in. I'm working on one more - #foo shouldn't go straight to hash change, in case of errors.

@scottjehl

thx guys - these updates are rolled in now. http://github.com/jquery/jquery-mobile/commits/master

scottjehl and others added some commits
scottjehl made sure local # urls go through the regular page nav path, and only…
… update the hash on success
096467e
scottjehl moved active class removal code into function - now called after ajax…
… error as well as successful page change
4c2a959
scottjehl moved line where # is removed to prevent base url prefixing on local …
…anchor links
77b1c3a
scottjehl converted customButton plugin to widget factory (note: this is just t…
…he plugin for native button elements, not to be confused with the buttonMarkup plugin).

renamed method to "button" and updated page.js to match
e202a72
scottjehl added check to make sure active link isn't in the new activepage (suc…
…h as when it's appended to the new page for persistence), before removing class
c8d29fb
scottjehl rewrote navbar with widget factory c242604
scottjehl rewrote checkboxradio to use widget factory. renamed method checkboxr…
…adio and updated page plugin to match
7d03d09
@JeffreyWay JeffreyWay Small improvement to keep from querying the DOM more than once for th…
…e data-role=pages elements.
a585dde
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 22, 2010
  1. @jeresig
  2. @jeresig
  3. @jeresig

    Fix typos.

    jeresig authored
  4. should have been minwidth prefixes, and now adding all that apply, ra…

    scottjehl authored
    …ther than just the greatest.
  5. added - to prefix

    scottjehl authored
  6. set max-width breakpoint classes as well.

    scottjehl authored
  7. @hochi

    fixed is() selector

    hochi authored Scott Jehl committed
  8. used indexOf instead of match.

    scottjehl authored
  9. e vs event. Fixed.

    scottjehl authored
  10. used click in place of tap

    scottjehl authored
  11. click instead of tap

    scottjehl authored
  12. fixed icon positioning.

    scottjehl authored
Commits on Oct 23, 2010
  1. Used triggerHandler instead of trigger to allow collapsibles to be em…

    scottjehl authored
    …bedded. Fixes #255
  2. fixed css references in markup

    scottjehl authored
  3. added support for grouped collapsibles that make accordions. Parent e…

    scottjehl authored
    …lement just needs a data-role of collapsible-set. Fixes #87, Fixes #178
  4. typo

    scottjehl authored
  5. Removed the ajaxClick function and moved its logic into the live clic…

    scottjehl authored
    …k event handler, where it is now refactored and simplified. Thx to Jeffrey Way for ideas that went into this refactor.
    
    Also, clicks that are triggered on anchors will now be able to make a new http request, which improves listview behavior when clicking LIs that resolve to external urls.
    
    Included in commit is a new demo/test page with various link types to make sure they behave as expected.
    
    Fixes #272, Fixes #264
Commits on Oct 24, 2010
  1. whitespace

    scottjehl authored
  2. made default breakpoints non-overrideable and exposed function $.mobi…

    scottjehl authored
    …le.addResolutionBreakpoints (accepts number or array of numbers) which can be used to add widths to be used in min/max media classes on HTML element.
Commits on Oct 25, 2010
  1. fixed typo in where the blank space was added.

    scottjehl authored
  2. duplicate id

    scottjehl authored
  3. add/remove active class on clicked link.

    scottjehl authored
  4. removed a console.log

    scottjehl authored
  5. fixed path to google compiler in Makefile

    scottjehl authored
Commits on Oct 26, 2010
  1. @beausmith

    Add missing commas in button styles.

    beausmith authored Scott Jehl committed
  2. @beausmith

    Removing un-necessary specificity from .ui-checkbox and .ui-radio sty…

    beausmith authored Scott Jehl committed
    …ling.
  3. @karanbhangui

    fixed aside elements being displayed multiple times per list item

    karanbhangui authored Scott Jehl committed
  4. @adimitrov

    this keyword gets overwritten by jQuery.each

    adimitrov authored Scott Jehl committed
Commits on Oct 27, 2010
  1. commented-out the call to _numberItems, as it doesn't yet exist in th…

    scottjehl authored
    …e listview rewrite
  2. @littke

    Fixed broken <code> element.

    littke authored Scott Jehl committed
  3. simplified attr get/check

    scottjehl authored
  4. removed nullLink var

    scottjehl authored
  5. used cached version of $this

    scottjehl authored
  6. removed a few chars from condition. Thx @jeffreyway for suggestions o…

    scottjehl authored
    …n the last few commits.
  7. made sure local # urls go through the regular page nav path, and only…

    scottjehl authored
    … update the hash on success
  8. moved active class removal code into function - now called after ajax…

    scottjehl authored
    … error as well as successful page change
  9. moved line where # is removed to prevent base url prefixing on local …

    scottjehl authored
    …anchor links
Commits on Oct 28, 2010
  1. converted customButton plugin to widget factory (note: this is just t…

    scottjehl authored
    …he plugin for native button elements, not to be confused with the buttonMarkup plugin).
    
    renamed method to "button" and updated page.js to match
  2. added check to make sure active link isn't in the new activepage (suc…

    scottjehl authored
    …h as when it's appended to the new page for persistence), before removing class
  3. rewrote navbar with widget factory

    scottjehl authored
  4. rewrote checkboxradio to use widget factory. renamed method checkboxr…

    scottjehl authored
    …adio and updated page plugin to match
  5. @JeffreyWay

    Small improvement to keep from querying the DOM more than once for th…

    JeffreyWay authored
    …e data-role=pages elements.
This page is out of date. Refresh to see the latest.
Showing with 536 additions and 365 deletions.
  1. +1 −1  Makefile
  2. +1 −1  docs/content/api-content.html
  3. +26 −2 docs/content/content-collapsible.html
  4. +1 −1  docs/content/content-grids.html
  5. +1 −1  docs/content/content-html.html
  6. +1 −1  docs/content/content-themes.html
  7. +1 −1  docs/content/index.html
  8. +2 −3 docs/forms/forms-all.html
  9. +1 −1  docs/pages/dialog-alt.html
  10. +1 −1  docs/pages/dialog-buttons.html
  11. +1 −1  docs/pages/dialog-success.html
  12. +40 −0 docs/pages/docs-link-scenarios.html
  13. +3 −3 docs/pages/transition-success.html
  14. +7 −9 experiments/photos/_photo2.html
  15. +7 −9 experiments/photos/_photo3.html
  16. +7 −9 experiments/photos/_photo4.html
  17. +7 −9 experiments/photos/_photo5.html
  18. +7 −8 experiments/photos/_photo6.html
  19. +6 −8 experiments/photos/{_photo1.html → index.html}
  20. +2 −1  experiments/photos/photos.css
  21. +20 −22 experiments/photos/photos.js
  22. +1 −1  experiments/ui-datepicker/jquery.ui.datepicker.css
  23. +74 −22 js/jquery.mobile.collapsible.js
  24. +29 −16 js/jquery.mobile.forms.button.js
  25. +75 −71 js/jquery.mobile.forms.checkboxradio.js
  26. +0 −1  js/jquery.mobile.forms.select.js
  27. +2 −2 js/jquery.mobile.forms.textinput.js
  28. +85 −57 js/jquery.mobile.js
  29. +1 −1  js/jquery.mobile.listview.filter.js
  30. +67 −34 js/jquery.mobile.listview.js
  31. +30 −34 js/jquery.mobile.navbar.js
  32. +2 −2 js/jquery.mobile.page.js
  33. +5 −5 js/jquery.mobile.support.js
  34. +2 −2 themes/default/jquery.mobile.button.css
  35. +5 −2 themes/default/jquery.mobile.collapsible.css
  36. +6 −8 themes/default/jquery.mobile.controlgroup.css
  37. +1 −1  themes/default/jquery.mobile.forms.checkboxradio.css
  38. +2 −4 themes/default/jquery.mobile.forms.select.css
  39. +2 −4 themes/default/jquery.mobile.forms.slider.css
  40. +4 −6 themes/default/jquery.mobile.forms.textinput.css
View
2  Makefile
@@ -66,7 +66,7 @@ mobile:
min: mobile
@@head -8 js/jquery.mobile.js > ${MIN}
- @@java -jar ../jquery/build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
+ @@java -jar build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
@@cat ${MIN}.tmp >> ${MIN}
@@rm -f ${MIN}.tmp
View
2  docs/content/api-content.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Docs - Content formatting</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
View
28 docs/content/content-collapsible.html
@@ -2,9 +2,8 @@
<html>
<head>
<title>jQuery Mobile Docs - Content formatting</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
- <script type="text/javascript" src="../docs/docs.js"></script>
</head>
@@ -102,8 +101,33 @@
</ul>
</div><!-- /section 4 -->
+ <h2>Nested Collapsibles</h2>
+ <div data-role="collapsible">
+ <h3>I'm a header</h3>
+ <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
+ <div data-role="collapsible">
+ <h3>I'm a nested collapsible header</h3>
+ <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
+ </div>
+ </div>
+ <h2>Collapsible sets</h2>
+ <p>By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:</p>
+ <div data-role="collapsible-set">
+ <div data-role="collapsible">
+ <h3>I'm a header in a set of collapsibles</h3>
+ <p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-role="collapsible" data-state="collapsed">
+ <h3>I'm a header in a set of collapsibles</h3>
+ <p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-role="collapsible" data-state="collapsed">
+ <h3>I'm a header in a set of collapsibles</h3>
+ <p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
</div><!-- /content -->
View
2  docs/content/content-grids.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Docs - Content formatting</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<script type="text/javascript" src="../docs/docs.js"></script>
View
2  docs/content/content-html.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Docs - Content formatting</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<script type="text/javascript" src="../docs/docs.js"></script>
View
2  docs/content/content-themes.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Docs - Content formatting</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<script type="text/javascript" src="../docs/docs.js"></script>
</head>
View
2  docs/content/index.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Docs - Content formatting</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<script type="text/javascript" src="../docs/docs.js"></script>
</head>
View
5 docs/forms/forms-all.html
@@ -4,7 +4,6 @@
<title>jQuery Mobile Docs - Forms</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
- <script type="text/javascript" src="../docs/docs.js"></script>
</head>
<body>
@@ -30,8 +29,8 @@
</div>
<div data-role="fieldcontain">
- <label for="name">Password:</label>
- <input type="password" name="name" id="name" value="" />
+ <label for="password">Password:</label>
+ <input type="password" name="password" id="password" value="" />
</div>
<div data-role="fieldcontain">
View
2  docs/pages/dialog-alt.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
View
2  docs/pages/dialog-buttons.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
View
2  docs/pages/dialog-success.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
View
40 docs/pages/docs-link-scenarios.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>jQuery Mobile Docs - Pages</title>
+ <link rel="stylesheet" href="../../themes/default" />
+ <script type="text/javascript" src="../../js/all"></script>
+</head>
+<body>
+
+<div data-role="page">
+
+ <div data-role="header">
+ <h1>Linking pages</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <p>jQuery Mobile is designed to work with simple page linking conventions. The following list demonstrates how different types of links will be handled, either remotely or through an Ajax Request.</p>
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+ <li data-role="list-divider">Examples of links that work within a single-page (if the page exists)</li>
+ <li><a href="docs/pages/index.html">[href="docs/pages/index.html"]</a></li>
+ <li><a href="/docs/toolbars/index.html">[href="/docs/toolbars/index.html"]</a></li>
+ <li><a href="#somelocalID">[href="#somelocalID"]</a></li>
+ <li>Note: an full URL to the same-domain will also work</li>
+ <li data-role="list-divider">Examples of links that trigger a refresh</li>
+ <li><a href="docs/pages/index.html" rel="external">[rel="external"]</a></li>
+ <li><a href="docs/pages/index.html" target="_blank">[target="_blank"]</a></li>
+ <li><a href="mailto:john@doe.com">[href="mailto:john@doe.com"]</a></li>
+ <li><a href="tel:543-434-3454">[href="tel:543-434-3454"]</a></li>
+ <li><a href="http://google.com">[href="http://google.com"]</a></li>
+ <li data-role="list-divider">Links that return false</li>
+ <li><a href="#">[href="#"]</a></li>
+ </ul>
+
+ </div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>
View
6 docs/pages/transition-success.html
@@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/all" />
+ <link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
@@ -14,7 +14,7 @@
</div><!-- /header -->
<div data-role="content">
- <p>That was an animated page transition effect that we added with a <class>code> data-transition</code> attribute on the link.</p>
+ <p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
<p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
<p>What do you think?</p>
<a href="docs-transitions.html" data-role="button" data-theme="b">I like it</a>
@@ -23,4 +23,4 @@
</body>
-</html>
+</html>
View
16 experiments/photos/_photo2.html
@@ -4,29 +4,27 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
+ <link rel="stylesheet" href="photos.css" />
+ <script type="text/javascript" src="photos.js"></script>
</head>
<body>
-<div data-role="page" data-fullscreen="true">
- <link rel="stylesheet" href="photos.css" />
- <script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header" id="">
<h1>A canoe</h1>
</div>
- <div data-role="content" class="photoview">
+ <div data-role="content" >
- <a href="_photo3.html">
- <img src="images/photo-canoe.jpeg" alt="photo-canoe" />
- </a>
+ <img src="images/photo-canoe.jpeg" alt="photo-canoe" />
</div>
<div class="ui-footer ui-bar-a">
- <a href="_photo1.html">Prev</a>
- <a href="_photo3.html">Next</a>
+ <a href="index.html" class="prev">Prev</a>
+ <a href="_photo3.html" class="next">Next</a>
</div>
View
16 experiments/photos/_photo3.html
@@ -4,29 +4,27 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
+ <link rel="stylesheet" href="photos.css" />
+ <script type="text/javascript" src="photos.js"></script>
</head>
<body>
-<div data-role="page" data-fullscreen="true">
- <link rel="stylesheet" href="photos.css" />
- <script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header" id="photoview">
<h1>A dock</h1>
</div>
- <div data-role="content" class="photoview">
+ <div data-role="content" >
- <a href="_photo4.html">
- <img src="images/photo-dock.jpeg" alt="photo-dock" />
- </a>
+ <img src="images/photo-dock.jpeg" alt="photo-dock" />
</div>
<div class="ui-footer ui-bar-a">
- <a href="_photo2.html">Prev</a>
- <a href="_photo4.html">Next</a>
+ <a href="_photo2.html" class="prev">Prev</a>
+ <a href="_photo4.html" class="next">Next</a>
</div>
View
16 experiments/photos/_photo4.html
@@ -4,29 +4,27 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
+ <link rel="stylesheet" href="photos.css" />
+ <script type="text/javascript" src="photos.js"></script>
</head>
<body>
-<div data-role="page" data-fullscreen="true">
- <link rel="stylesheet" href="photos.css" />
- <script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header">
<h1>A kayak</h1>
</div>
- <div data-role="content" class="photoview">
+ <div data-role="content" >
- <a href="_photo5.html">
- <img src="images/photo-kayak.jpeg" alt="photo-kayak" />
- </a>
+ <img src="images/photo-kayak.jpeg" alt="photo-kayak" />
</div>
<div class="ui-footer ui-bar-a">
- <a href="_photo3.html">Prev</a>
- <a href="_photo5.html">Next</a>
+ <a href="_photo3.html" class="prev">Prev</a>
+ <a href="_photo5.html" class="next">Next</a>
</div>
View
16 experiments/photos/_photo5.html
@@ -4,28 +4,26 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
+ <link rel="stylesheet" href="photos.css" />
+ <script type="text/javascript" src="photos.js"></script>
</head>
<body>
-<div data-role="page" data-fullscreen="true">
- <link rel="stylesheet" href="photos.css" />
- <script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header">
<h1>Nathan running</h1>
</div>
- <div data-role="content" class="photoview">
+ <div data-role="content" >
- <a href="_photo6.html">
- <img src="images/photo-run.jpeg" alt="photo-run" />
- </a>
+ <img src="images/photo-run.jpeg" alt="photo-run" />
</div>
<div class="ui-footer ui-bar-a">
- <a href="_photo4.html">Prev</a>
- <a href="_photo6.html">Next</a>
+ <a href="_photo4.html" class="prev">Prev</a>
+ <a href="_photo6.html" class="next">Next</a>
</div>
View
15 experiments/photos/_photo6.html
@@ -4,27 +4,26 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
+ <link rel="stylesheet" href="photos.css" />
+ <script type="text/javascript" src="photos.js"></script>
</head>
<body>
-<div data-role="page" data-fullscreen="true">
- <link rel="stylesheet" href="photos.css" />
- <script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header">
<h1>Sandy beach</h1>
</div>
- <div data-role="content" class="photoview">
+ <div data-role="content" >
- <a href="_photo7.html">
- <img src="images/photo-sand.jpeg" alt="photo-sand" />
- </a>
+ <img src="images/photo-sand.jpeg" alt="photo-sand" />
</div>
<div class="ui-footer ui-bar-a">
- <a href="_photo5.html">Prev</a>
+ <a href="_photo5.html" class="prev">Prev</a>
+ <a href="index.html" class="next">First</a>
</div>
View
14 experiments/photos/_photo1.html → experiments/photos/index.html
@@ -4,28 +4,26 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
+ <link rel="stylesheet" href="photos.css" />
+ <script type="text/javascript" src="photos.js"></script>
</head>
<body>
-<div data-role="page" data-fullscreen="true">
- <link rel="stylesheet" href="photos.css" />
- <script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header">
<h1>A bridge</h1>
</div>
- <div data-role="content" class="photoview">
+ <div data-role="content" >
- <a href="_photo2.html">
- <img src="images/photo-bridge.jpeg" alt="photo-bridge" />
- </a>
+ <img src="images/photo-bridge.jpeg" alt="photo-bridge" />
</div>
<div data-role="footer">
- <a href="_photo2.html">Next</a>
+ <a href="_photo2.html" class="next">Next</a>
</div>
View
3  experiments/photos/photos.css
@@ -1 +1,2 @@
-#photoview img { width: 100%; }
+.photoview .ui-content { padding: 0; }
+.photoview img { width: 100%; }
View
42 experiments/photos/photos.js
@@ -1,23 +1,21 @@
-$(function(){
- $('.photoview')
- .live('swipeleft',function(){
- $(this).find('a').ajaxClick();
- })
- .live('swiperight',function(){
- $(this).next().find('a:contains(Prev)').ajaxClick();
- });
- $('.photoview a').click(function(){
- event.stopImmediatePropagation();
- })
- .tap(function(event){
- $(this).ajaxClick();
- event.stopImmediatePropagation();
- })
- .taphold(function(event){
- $.fixedToolbars.toggle();
- event.stopImmediatePropagation();
- })
-
- }
-});
+
+$('.photoview')
+ .live('pagebeforehide',function(){
+ $.fixedToolbars.hide(true);
+ })
+ .live('pageshow',function(){
+ $.fixedToolbars.show();
+ })
+ .live('swipeleft',function(){
+ $(this).find('a.next').click();
+ })
+ .live('swiperight',function(){
+ $(this).next().find('a.prev').click();
+ });
+
+$('.photoview img').live('mousedown touchstart',function(event){
+ event.preventDefault();
+})
+
+
View
2  experiments/ui-datepicker/jquery.ui.datepicker.css
@@ -23,6 +23,6 @@ div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0
.ui-datepicker td { border-width: 1px; padding: 0; text-align: center; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em 0; font-weight: bold; margin: 0; border-width: 0; text-align: center; text-decoration: none; }
-@media screen and (min-width: 480px){
+.min-width-480px {
div.hasDatepicker { width: 63%; display: inline-block; margin: 0; }
}
View
96 js/jquery.mobile.collapsible.js
@@ -19,7 +19,8 @@ $.fn.collapsible = function(options){
//define
var collapsibleContain = $(this).addClass('ui-collapsible-contain'),
collapsibleHeading = $(this).find(o.heading).eq(0),
- collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content');
+ collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content'),
+ collapsibleParent = $(this).closest('[data-role=collapsible-set]').addClass('ui-collapsible-set');
//replace collapsibleHeading if it's a legend
if(collapsibleHeading.is('legend')){
@@ -36,17 +37,12 @@ $.fn.collapsible = function(options){
.wrapInner('<a href="#" class="ui-collapsible-heading-toggle"></a>')
.find('a:eq(0)')
.buttonMarkup({
- shadow: true,
+ shadow: !!!collapsibleParent.length,
corners:false,
iconPos: 'left',
icon: 'plus',
theme: o.theme
})
- .removeClass('ui-btn-corner-all')
- .addClass('ui-corner-all')
- .find('.ui-btn-inner')
- .removeClass('ui-btn-corner-all')
- .addClass('ui-corner-all')
.find('.ui-icon')
.removeAttr('class')
.buttonMarkup({
@@ -56,29 +52,85 @@ $.fn.collapsible = function(options){
icon: 'plus',
theme: o.iconTheme
});
+
+ if( !collapsibleParent.length ){
+ collapsibleHeading
+ .find('a:eq(0)')
+ .addClass('ui-corner-all')
+ .find('.ui-btn-inner')
+ .addClass('ui-corner-all');
+ }
+ else {
+ if( collapsibleContain.data('collapsible-last') ){
+ collapsibleHeading
+ .find('a:eq(0), .ui-btn-inner')
+ .addClass('ui-corner-bottom');
+ }
+ }
+
//events
collapsibleContain
- .bind('collapse', function(){
- collapsibleHeading
- .addClass('ui-collapsible-heading-collapsed')
- .find('.ui-collapsible-heading-status').text(o.expandCueText);
-
- collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
- collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true);
+ .bind('collapse', function(event){
+ if( !event.isDefaultPrevented() ){
+ event.preventDefault();
+ collapsibleHeading
+ .addClass('ui-collapsible-heading-collapsed')
+ .find('.ui-collapsible-heading-status').text(o.expandCueText);
+
+ collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
+ collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true);
+
+ if( collapsibleContain.data('collapsible-last') ){
+ collapsibleHeading
+ .find('a:eq(0), .ui-btn-inner')
+ .addClass('ui-corner-bottom');
+ }
+ }
})
- .bind('expand', function(){
- collapsibleHeading
- .removeClass('ui-collapsible-heading-collapsed')
- .find('.ui-collapsible-heading-status').text(o.collapseCueText);
-
- collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
- collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false);
-
+ .bind('expand', function(event){
+ if( !event.isDefaultPrevented() ){
+ event.preventDefault();
+ collapsibleHeading
+ .removeClass('ui-collapsible-heading-collapsed')
+ .find('.ui-collapsible-heading-status').text(o.collapseCueText);
+
+ collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
+ collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false);
+
+ if( collapsibleContain.data('collapsible-last') ){
+ collapsibleHeading
+ .find('a:eq(0), .ui-btn-inner')
+ .removeClass('ui-corner-bottom');
+ }
+
+ }
})
.trigger(o.collapsed ? 'collapse' : 'expand');
+
+ //close others in a set
+ if( collapsibleParent.length && !collapsibleParent.data("collapsiblebound") ){
+ collapsibleParent
+ .data("collapsiblebound", true)
+ .bind("expand", function( event ){
+ $(this).find( ".ui-collapsible-contain" )
+ .not( $(event.target).closest( ".ui-collapsible-contain" ) )
+ .not( "> .ui-collapsible-contain .ui-collapsible-contain" )
+ .trigger( "collapse" );
+ })
+ var set = collapsibleParent.find('[data-role=collapsible]')
+
+ set.first()
+ .find('a:eq(0)')
+ .addClass('ui-corner-top')
+ .find('.ui-btn-inner')
+ .addClass('ui-corner-top');
+
+ set.last().data('collapsible-last', true)
+ }
+
collapsibleHeading.click(function(){
if( collapsibleHeading.is('.ui-collapsible-heading-collapsed') ){
collapsibleContain.trigger('expand');
View
45 js/jquery.mobile.forms.button.js
@@ -4,23 +4,36 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
-(function($){
-$.fn.customButton = function(){
- return $(this).each(function(){
- var button = $(this).addClass('ui-btn-hidden').attr('tabindex','-1');
+(function ( $ ) {
+$.widget( "mobile.button", $.mobile.widget, {
+ options: {},
+ _create: function(){
+ var $el = this.element;
+ $el
+ .addClass('ui-btn-hidden')
+ .attr('tabindex','-1');
+
//add ARIA role
- $('<a href="#" role="button">'+ (button.text() || button.val()) +'</a>')
- .buttonMarkup({
- theme: button.data('theme'),
- icon: button.data('icon'),
- iconpos: button.data('iconpos'),
- inline: button.data('inline')
- })
+ $( "<a>", {
+ "href": "#",
+ "role": "button",
+ "aria-label": $el.attr( "type" )
+ } )
+ .text( $el.text() || $el.val() )
+ .insertBefore( $el )
.click(function(){
- button.click();
+ $el.click();
return false;
})
- .insertBefore(button);
- });
-};
-})(jQuery);
+ .buttonMarkup({
+ theme: $el.data("theme"),
+ icon: $el.data("icon"),
+ iconpos: $el.data("iconpos"),
+ inline: $el.data("inline"),
+ corners: $el.data("corners"),
+ shadow: $el.data("shadow"),
+ iconshadow: $el.data("icon-shadow")
+ });
+ }
+});
+})( jQuery );
View
146 js/jquery.mobile.forms.checkboxradio.js
@@ -4,82 +4,86 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
-(function(jQuery){
+(function ( $ ) {
+$.widget( "mobile.checkboxradio", $.mobile.widget, {
+ options: {
+ theme: undefined,
+ icon: undefined
+ },
+ _create: function(){
+ var input = this.element,
+ label = jQuery("label[for='" + input.attr( "id" ) + "']"),
+ inputtype = input.attr( "type" ),
+ checkedicon = "ui-icon-" + inputtype + "-on",
+ uncheckedicon = "ui-icon-" + inputtype + "-off";
-jQuery.fn.customCheckboxRadio = function( options ) {
- return this.each(function() {
- var input = jQuery( this ),
- type = input.attr( "type" );
-
- if ( type === "checkbox" || type === "radio" ) {
- var o = jQuery.extend({
- theme: input.data( "theme" ),
- icon: input.data( "icon" ) || !input.parents( "[data-type='horizontal']" ).length,
- checkedicon: "ui-icon-" + type + "-on",
- uncheckedicon: "ui-icon-" + type + "-off"
- }, options );
-
- // get the associated label using the input's id
- var label = jQuery("label[for='" + input.attr( "id" ) + "']")
- .buttonMarkup({
- iconpos: o.icon ? "left" : "",
- theme: o.theme,
- icon: o.icon ? o.uncheckedicon : null,
- shadow: false
- });
+ if ( inputtype != "checkbox" && inputtype != "radio" ) { return; }
- var icon = label.find( ".ui-icon" );
-
- // wrap the input + label in a div
- input
- .add( label )
- .wrapAll( "<div class='ui-" + type +"'></div>" );
-
- // necessary for browsers that don't support the :hover pseudo class on labels
- label.bind({
- mousedown: function() {
- label.data( "state", input.attr( "checked" ) );
- },
- click: function() {
- setTimeout(function() {
- if ( input.attr( "checked" ) === label.data( "state" ) ) {
- input.trigger( "click" );
- }
- }, 1);
- }
+ label
+ .buttonMarkup({
+ iconpos: this.options.icon,
+ theme: this.options.theme,
+ icon: this.options.icon ? uncheckedicon : ( this.element.parents( "[data-type='horizontal']" ).length ? undefined : uncheckedicon ),
+ shadow: false
});
-
- //bind custom event, trigger it, bind click,focus,blur events
- input
- .bind({
- updateState: function() {
- if ( this.checked ) {
- label.addClass( "ui-btn-active" );
- icon.addClass( o.checkedicon );
- icon.removeClass( o.uncheckedicon );
+
+ // wrap the input + label in a div
+ input
+ .add( label )
+ .wrapAll( "<div class='ui-" + inputtype +"'></div>" );
+
+ label.bind({
+ mousedown: function() {
+ label.data( "state", input.attr( "checked" ) );
+ },
+ click: function() {
+ setTimeout(function() {
+ if ( input.attr( "checked" ) === label.data( "state" ) ) {
+ input.trigger( "click" );
+ }
+ }, 1);
+ }
+ });
+
+ //bind custom event, trigger it, bind click,focus,blur events
+ input
+ .bind({
- } else {
- label.removeClass( "ui-btn-active" );
- icon.removeClass( o.checkedicon );
- icon.addClass( o.uncheckedicon );
- }
- },
+ click: function() {
+ jQuery( "input[name='" + input.attr( "name" ) + "']" ).checkboxradio( "refresh" );
+ },
- click: function() {
- jQuery( "input[name='" + input.attr( "name" ) + "']" ).trigger( "updateState" );
- },
+ focus: function() {
+ label.addClass( "ui-focus" );
+ },
- focus: function() {
- label.addClass( "ui-focus" );
- },
+ blur: function() {
+ label.removeClass( "ui-focus" );
+ }
+ });
+
+ this.refresh();
+
+ },
+
+ refresh: function( ){
+ var input = this.element,
+ label = jQuery("label[for='" + input.attr( "id" ) + "']"),
+ inputtype = input.attr( "type" ),
+ icon = label.find( ".ui-icon" ),
+ checkedicon = "ui-icon-" + inputtype + "-on",
+ uncheckedicon = "ui-icon-" + inputtype + "-off";
+
+ if ( input[0].checked ) {
+ label.addClass( "ui-btn-active" );
+ icon.addClass( checkedicon );
+ icon.removeClass( uncheckedicon );
- blur: function() {
- label.removeClass( "ui-focus" );
- }
- })
- .trigger( "updateState" );
+ } else {
+ label.removeClass( "ui-btn-active" );
+ icon.removeClass( checkedicon );
+ icon.addClass( uncheckedicon );
}
- });
-};
-
-})(jQuery);
+ }
+});
+})( jQuery );
View
1  js/jquery.mobile.forms.select.js
@@ -28,7 +28,6 @@ $.fn.customSelect = function(options){
button = $( "<a>", {
"href": "#",
"role": "button",
- "title": "select menu",
"id": buttonId,
"aria-haspopup": "true",
"aria-owns": menuId
View
4 js/jquery.mobile.forms.textinput.js
@@ -24,14 +24,14 @@ jQuery.fn.customTextInput = function(options){
if(o.search){
focusedEl = input.wrap('<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-body-c ui-btn-shadow ui-icon-search"></div>').parent();
var clearbtn = $('<a href="#" class="ui-input-clear" title="clear text">clear text</a>')
- .buttonMarkup({icon: 'delete', iconpos: 'notext', corners:true, shadow:true})
.click(function(){
input.val('').focus();
input.trigger('change');
clearbtn.addClass('ui-input-clear-hidden');
return false;
})
- .appendTo(focusedEl);
+ .appendTo(focusedEl)
+ .buttonMarkup({icon: 'delete', iconpos: 'notext', corners:true, shadow:true});
function toggleClear(){
if(input.val() == ''){
View
142 js/jquery.mobile.js
@@ -46,6 +46,8 @@
$pageContainer,
startPageId = 'ui-page-start',
activePageClass = 'ui-page-active',
+ activeBtnClass = 'ui-btn-active',
+ activeClickedLink = null,
pageTransition,
forceBack,
transitions = 'slide slideup slidedown pop flip fade',
@@ -59,7 +61,8 @@
nextPageRole = null,
hashListener = true,
unHashedSelectors = '[data-rel=dialog]',
- baseUrl = location.protocol + '//' + location.host + location.pathname;
+ baseUrl = location.protocol + '//' + location.host + location.pathname,
+ resolutionBreakpoints = [320,480,768,1024];
// TODO: don't expose (temporary during code reorg)
$.mobile.urlStack = urlStack;
@@ -104,47 +107,43 @@
$('#ui-base').attr('href', baseUrl);
}
-
- // send a link through hash tracking
- jQuery.fn.ajaxClick = function() {
- var href = jQuery( this ).attr( "href" );
- pageTransition = jQuery( this ).data( "transition" ) || "slide";
- forceBack = jQuery( this ).data( "back" ) || undefined;
- nextPageRole = jQuery( this ).attr( "data-rel" );
-
- //find new base for url building
- var newBaseURL = getBaseURL();
-
- //if href is absolute but local, or a local ID, no base needed
- if( /^\//.test(href) || (/https?:\/\//.test(href) && !!(href).match(location.hostname)) || /^#/.test(href) ){
- newBaseURL = '';
+ //click routing - direct to HTTP or Ajax, accordingly
+ jQuery( "a" ).live( "click", function(event) {
+ var $this = $(this),
+ //get href, remove same-domain protocol and host
+ href = $this.attr( "href" ).replace( location.protocol + "//" + location.host, ""),
+ //if it still starts with a protocol, it's external, or could be :mailto, etc
+ external = /^(:?\w+:)/.test( href ) || $this.is( "[target],[rel=external]" );
+
+ if( href === '#' ){
+ //for links created purely for interaction - ignore
+ return false;
}
- // set href to relative path using baseURL and
- if( !/https?:\/\//.test(href) ){
- href = newBaseURL + href;
- }
-
- //if it's a non-local-anchor and Ajax is not supported, or if it's an external link, go to page without ajax
- if ( ( /^[^#]/.test(href) && !jQuery.support.ajax ) || ( /https?:\/\//.test(href) && !!!href.match(location.hostname) ) ) {
- location = href
+ activeClickedLink = $this.closest( ".ui-btn" ).addClass( activeBtnClass );
+
+ if( external ){
+ //deliberately redirect, in case click was triggered
+ location.href = href;
}
- else{
- if( $(this).is(unHashedSelectors) ){
- changePage(href, pageTransition, undefined);
- }
- else{
- changePage(href, pageTransition, undefined, true);
+ else {
+ //use ajax
+ var pageTransition = $this.data( "transition" ) || "slide",
+ forceBack = $this.data( "back" ) || undefined,
+ changeHashOnSuccess = !$this.is(unHashedSelectors);
+
+ nextPageRole = $this.attr( "data-rel" );
+
+ //if it's a relative href, prefix href with base url
+ if( href.indexOf('/') && href.indexOf('#') !== 0 ){
+ href = getBaseURL() + href;
}
+ href.replace(/^#/,'');
+
+ changePage(href, pageTransition, forceBack, changeHashOnSuccess);
}
- return this;
- };
-
- // ajaxify all navigable links
- jQuery( "a:not([href='#']):not([target]):not([rel='external']):not([href^='mailto:'])" ).live( "click", function(event) {
- jQuery( this ).ajaxClick();
- return false;
+ event.preventDefault();
});
// turn on/off page loading message.
@@ -190,6 +189,14 @@
return wrapper;
}
+ //remove active classes after page transition or error
+ function removeActiveLinkClass(){
+ if(activeClickedLink && !activeClickedLink.closest( '.ui-page-active' ).length ){
+ activeClickedLink.removeClass( activeBtnClass );
+ }
+ activeClickedLink = null;
+ }
+
//for getting or creating a new page
function changePage( to, transition, back, changeHash){
@@ -199,7 +206,7 @@
from = toIsArray ? to[0] : $.activePage,
to = toIsArray ? to[1] : to,
url = fileUrl = $.type(to) === "string" ? to.replace( /^#/, "" ) : null,
- back = (back !== undefined) ? back : (forceBack || ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url )),
+ back = (back !== undefined) ? back : ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url ),
transition = (transition !== undefined) ? transition : ( pageTransition || "slide" );
//unset pageTransition, forceBack
@@ -240,6 +247,7 @@
hashListener = true;
}, 500);
}
+ removeActiveLinkClass();
}
if(transition){
@@ -311,10 +319,8 @@
if( !$.support.dynamicBaseTag ){
var baseUrl = getBaseURL(fileUrl);
to.find('[src],[href]').each(function(){
- var thisHref = $(this).attr('href'),
- thisSrc = $(this).attr('src'),
- thisAttr = thisHref ? 'href' : 'src',
- thisUrl = thisHref || thisSrc;
+ var thisAttr = $(this).is('[href]') ? 'href' : 'src',
+ thisUrl = $(this).attr(thisAttr);
//if full path exists and is same, chop it - helps IE out
thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
@@ -339,7 +345,7 @@
},
error: function() {
pageLoading( true );
-
+ removeActiveLinkClass();
jQuery("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>Error Loading Page</h1></div>")
.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
.appendTo( $pageContainer )
@@ -400,26 +406,48 @@
});
//add breakpoint classes for faux media-q support
- function resolutionBreakpoints(){
+ function detectResolutionBreakpoints(){
var currWidth = $window.width(),
- classPrefix = "maxwidth-",
- breakPoint;
+ minPrefix = "min-width-",
+ maxPrefix = "max-width-",
+ minBreakpoints = [],
+ maxBreakpoints = [],
+ unit = "px",
+ breakpointClasses;
- $html.removeClass( classPrefix + $.mobile.resolutionBreakpoints.join(" " + classPrefix) );
- $.each($.mobile.resolutionBreakpoints,function( i ){
- if( currWidth >= $.mobile.resolutionBreakpoints[ i ] ){
- breakPoint = $.mobile.resolutionBreakpoints[ i ];
+ $html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
+ maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit );
+
+ $.each(resolutionBreakpoints,function( i ){
+ if( currWidth >= resolutionBreakpoints[ i ] ){
+ minBreakpoints.push( minPrefix + resolutionBreakpoints[ i ] + unit );
+ }
+ if( currWidth <= resolutionBreakpoints[ i ] ){
+ maxBreakpoints.push( maxPrefix + resolutionBreakpoints[ i ] + unit );
}
});
- $html.addClass(classPrefix+breakPoint);
+ if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); }
+ if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); }
+
+ $html.addClass( breakpointClasses );
};
- //common breakpoints, overrideable, changeable
- $.mobile.resolutionBreakpoints = [320,480,768,1024];
- $window.bind( "orientationchange resize", resolutionBreakpoints);
- resolutionBreakpoints();
+ //add breakpoints now and on oc/resize events
+ $window.bind( "orientationchange resize", detectResolutionBreakpoints);
+ detectResolutionBreakpoints();
+ //common breakpoints, overrideable, changeable
+ $.mobile.addResolutionBreakpoints = function( newbps ){
+ if( $.type( newbps ) === "array" ){
+ resolutionBreakpoints = resolutionBreakpoints.concat( newbps );
+ }
+ else {
+ resolutionBreakpoints.push( newbps );
+ }
+ detectResolutionBreakpoints();
+ }
+
//insert mobile meta - these will need to be configurable somehow.
var headPrepends =
$head.prepend(
@@ -450,9 +478,9 @@
//dom-ready
jQuery(function(){
-
+ var $pages = jQuery("[data-role='page']");
//set up active page
- $startPage = $.activePage = jQuery("[data-role='page']").first();
+ $startPage = $.activePage = $pages.first();
//set page container
$pageContainer = $startPage.parent();
@@ -467,7 +495,7 @@
}
//initialize all pages present
- jQuery("[data-role='page']").page();
+ $pages.page();
//trigger a new hashchange, hash or not
$window.trigger( "hashchange", { manuallyTriggered: true } );
View
2  js/jquery.mobile.listview.filter.js
@@ -24,7 +24,7 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() {
}).hide();
}
- listview._numberItems();
+ //listview._numberItems();
})
.appendTo( wrapper )
.customTextInput();
View
101 js/jquery.mobile.listview.js
@@ -4,9 +4,9 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
-(function( $ ) {
+(function( jQuery ) {
-$.widget( "mobile.listview", $.mobile.widget, {
+jQuery.widget( "mobile.listview", jQuery.mobile.widget, {
options: {
theme: "c",
countTheme: "c",
@@ -18,71 +18,101 @@ $.widget( "mobile.listview", $.mobile.widget, {
},
_create: function() {
+ var $list = this.element,
+ o = this.options;
+
// create listview markup
- this.element
+ $list
.addClass( "ui-listview" )
.attr( "role", "listbox" )
- if ( this.options.inset ) {
- this.element.addClass( "ui-listview-inset ui-corner-all ui-shadow" );
+ if ( o.inset ) {
+ $list.addClass( "ui-listview-inset ui-corner-all ui-shadow" );
}
- this.element.delegate(".ui-li", "focusin", function() {
- jQuery(this).attr( "tabindex", "0" );
+ $list.delegate( ".ui-li", "focusin", function() {
+ jQuery( this ).attr( "tabindex", "0" );
});
- this._itemApply( this.element, this.element );
+ this._itemApply( $list, $list );
this.refresh( true );
//keyboard events for menu items
- this.element.keydown(function(event){
- //switch logic based on which key was pressed
- switch(event.keyCode){
- //up or left arrow keys
+ $list.keydown(function( e ) {
+ var target = jQuery( e.target ),
+ li = target.closest( "li" );
+
+ // switch logic based on which key was pressed
+ switch ( e.keyCode ) {
+ // up or left arrow keys
case 38:
- //if there's a previous option, focus it
- if( $(event.target).closest('li').prev().length ){
- $(event.target).blur().attr("tabindex","-1").closest('li').prev().find('a').eq(0).focus();
+ var prev = li.prev();
+
+ // if there's a previous option, focus it
+ if ( prev.length ) {
+ target
+ .blur()
+ .attr( "tabindex", "-1" );
+
+ prev.find( "a" ).first().focus();
}
- //prevent native scroll
+
return false;
break;
- //down or right arrow keys
+
+ // down or right arrow keys
case 40:
+ var next = li.next();
- //if there's a next option, focus it
- if( $(event.target).closest('li').next().length ){
- $(event.target).blur().attr("tabindex","-1").closest('li').next().find('a').eq(0).focus();
+ // if there's a next option, focus it
+ if ( next.length ) {
+ target
+ .blur()
+ .attr( "tabindex", "-1" );
+
+ next.find( "a" ).first().focus();
}
- //prevent native scroll
+
return false;
break;
+
case 39:
- if( $(event.target).closest('li').find('a.ui-li-link-alt').length ){
- $(event.target).blur().closest('li').find('a.ui-li-link-alt').eq(0).focus();
+ var a = li.find( "a.ui-li-link-alt" );
+
+ if ( a.length ) {
+ target.blur();
+ a.first().focus();
}
+
return false;
break;
+
case 37:
- if( $(event.target).closest('li').find('a.ui-link-inherit').length ){
- $(event.target).blur().closest('li').find('a.ui-link-inherit').eq(0).focus();
+ var a = li.find( "a.ui-link-inherit" );
+
+ if ( a.length ) {
+ target.blur();
+ a.first().focus();
}
+
return false;
break;
- //if enter or space is pressed, trigger click
+
+ // if enter or space is pressed, trigger click
case 13:
case 32:
- $(event.target).trigger('click'); //should trigger select
+ target.trigger( "click" );
+
return false;
break;
}
});
- //tapping the whole LI triggers ajaxClick on the first link
- this.element.delegate( "li:has(a)", "tap", function(event) {
- if( !$(event.target).closest('a').length ){
- $( this ).find( "a:first" ).trigger('click');
+ // tapping the whole LI triggers click on the first link
+ $list.delegate( "li", "click", function(event) {
+ if ( !jQuery( event.target ).closest( "a" ).length ) {
+ jQuery( this ).find( "a" ).first().trigger( "click" );
return false;
}
});
@@ -99,13 +129,15 @@ $.widget( "mobile.listview", $.mobile.widget, {
item.find( "img" ).addClass( "ui-li-thumb" ).each(function() {
jQuery( this ).closest( "li" )
- .addClass( jQuery(this).is( "ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
+ .addClass( jQuery(this).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
});
var aside = item.find( ".ui-li-aside" );
if ( aside.length ) {
- aside.prependTo( aside.parent() ); //shift aside to front for css float
+ aside.each(function(i, el) {
+ $(el).prependTo( $(el).parent() ); //shift aside to front for css float
+ });
}
if ( jQuery.support.cssPseudoElement || !jQuery.nodeName( item[0], "ol" ) ) {
@@ -118,6 +150,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
var o = this.options,
$list = this.element,
+ self = this,
dividertheme = $list.data( "dividertheme" ) || o.dividerTheme,
li = $list.children( "li" ),
counter = jQuery.support.cssPseudoElement || !jQuery.nodeName( $list[0], "ol" ) ? 0 : 1;
@@ -234,7 +267,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
item.addClass( itemClass );
if ( !create ) {
- this._itemApply( $list, item );
+ self._itemApply( $list, item );
}
});
},
View
64 js/jquery.mobile.navbar.js
@@ -4,40 +4,36 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
-(function($){
-$.fn.navbar = function(settings){
- return $(this).each(function(){
-
- var o = $.extend({
- iconpos: $(this).data('iconpos') || 'top',
- transition: $(this).data('transition') || 'slideup'
- },settings);
-
- //wrap it with footer classes
- var $navbar = $(this).addClass('ui-navbar'),
- numTabs = $navbar.find('li').length,
- moreIcon = $navbar.find('a[data-icon]').length ? 'arrow-r' : null;
-
- if( moreIcon == null ){
- o.iconpos = null;
- $navbar.add( $navbar.children(0) ).addClass('ui-navbar-noicons');
- }
-
- $navbar
- //add ARIA role
- .attr("role","navigation")
- .find('ul')
- .grid({grid: numTabs > 2 ? 'b' : 'a'});
+(function ( $ ) {
+$.widget( "mobile.navbar", $.mobile.widget, {
+ options: {
+ iconpos: 'top'
+ },
+ _create: function(){
+ var $navbar = this.element,
+ $navbtns = $navbar.find("a"),
+ iconpos = $navbtns.filter('icon').length ? this.options.iconpos : undefined;
$navbar
- .find('ul a')
- .buttonMarkup({corners: false, shadow:false, iconpos: o.iconpos})
- .bind('tap',function(){
- //NOTE: we'll need to find a way to highlight an active tab at load as well
- $navbar.find('.ui-btn-active').removeClass('ui-btn-active');
- $(this).addClass('ui-btn-active');
+ .addClass('ui-navbar')
+ .attr("role","navigation")
+ .find("ul")
+ .grid({grid: $navbtns.length > 2 ? "b" : "a"});
+
+ if( !iconpos ){
+ $navbar.addClass("ui-navbar-noicons");
+ }
+
+ $navbtns
+ .buttonMarkup({
+ corners: false,
+ shadow: false,
+ iconpos: iconpos
});
-
- });
-};
-})(jQuery);
+
+ $navbar.delegate("a", "click",function(event){
+ $navbtns.removeClass("ui-btn-active");
+ });
+ }
+});
+})( jQuery );
View
4 js/jquery.mobile.page.js
@@ -127,12 +127,12 @@ jQuery.widget( "mobile.page", jQuery.mobile.widget, {
// enchance form controls
this.element
.find( "[type='radio'], [type='checkbox']" )
- .customCheckboxRadio();
+ .checkboxradio();
this.element
.find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
.not( ".ui-nojs" )
- .customButton();
+ .button();
this.element
.find( "input, textarea" )
View
10 js/jquery.mobile.support.js
@@ -46,13 +46,12 @@ function propExists( prop ){
function baseTagTest(){
var fauxBase = location.protocol + '//' + location.host + location.pathname + "ui-dir/",
base = $("<base>", {"href": fauxBase}).appendTo("head"),
- link = $( "<a href='testurl'></a>" ).prependTo( fakeBody );
- $.support.dynamicBaseTag = !!link[0].href.match(fauxBase);
+ link = $( "<a href='testurl'></a>" ).prependTo( fakeBody ),
+ rebase = link[0].href;
base.remove();
+ return rebase.indexOf(fauxBase) === 0;
};
-baseTagTest();
-
$.extend( $.support, {
orientation: "orientation" in window,
touch: "ontouchend" in document,
@@ -61,7 +60,8 @@ $.extend( $.support, {
mediaquery: $.media('only all'),
cssPseudoElement: !!propExists('content'),
boxShadow: !!propExists('boxShadow') && !bb,
- scrollTop: ("pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[0]) && !webos
+ scrollTop: ("pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[0]) && !webos,
+ dynamicBaseTag: baseTagTest()
});
fakeBody.remove();
View
4 themes/default/jquery.mobile.button.css
@@ -19,10 +19,10 @@
.ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27px; }
.ui-btn-icon-right .ui-btn-inner { padding-right: 33px; }
.ui-header .ui-btn-icon-right .ui-btn-inner,
-.ui-footer .ui-btn-icon-right .ui-btn-inner
+.ui-footer .ui-btn-icon-right .ui-btn-inner,
.ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27px; }
.ui-btn-icon-top .ui-btn-inner { padding-top: 33px; }
-.ui-header .ui-btn-icon-top .ui-btn-inner
+.ui-header .ui-btn-icon-top .ui-btn-inner,
.ui-footer .ui-btn-icon-top .ui-btn-inner,
.ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27px; }
.ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33px; }
View
7 themes/default/jquery.mobile.collapsible.css
@@ -9,7 +9,10 @@
.ui-collapsible-heading a .ui-btn-inner { padding-left: 40px; }
.ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 0; }
-.ui-collapsible-heading a span.ui-btn .ui-icon { left: 2px; }
+.ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
.ui-collapsible-heading-status { position:absolute; left:-99999px; }
.ui-collapsible-content { display: block; padding: 10px 0 10px 8px; }