jQuery Mobile Splitview plugin
-------------------------------
demo at: asyraf9.github.com/jquery-mobile/
This is a plugin for jQuery Mobile that detects your device's browser width and renders pages accordingly - e.g. splitview for desktop and tablets, and standard jqm for mobile phones.
NOTE: as of jQueryMobile 1.2 RC, you will have to use the modified version of JQuerymobile provided in the /jquery-mobile folder of my repo. jquerymobile v1.2.1 will incorporate some changes that will allow this plugin to work out of the box. sorry for the inconvenience
NOTE (2): I've only recently began supporting JQM > 1.0 so do expect a lot of bugs and would appreciate if you could submit some pull requests to help me fix it.
Features
-------------------------------
1. auto-detection: automatically decides how to render for the browser you are using.
2. independent panel scrolling (still a lot more to work on here)
3. orientation and resize aware - renders the side panel in a popover fashion when in portrait mode
4. context awareness - can be programmed so that opening a page on the side panel also opens a page on the main panel
5. deep-link (and history) awareness - linking to a specific page in the main panel works, and hitting on the back and forward button on your browser also works (only for the main panel pages)
6. panel specific links - links on the side panel can affect pages in the main panel, or in the side panel itself.
Anatomy of a Splitview page
-------------------------------
the anatomy of a splitview page can be seen at the demo page above. It is very important that jquery.mobile.splitview.js is loaded before the modified version of jquery mobile, as you can see below. Basically, you need to position your pages in the following order:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.0b2.min.css" />
<link rel="stylesheet" href="../../compiled/jquery.mobile-1.0b2pre.css" />
<link rel="stylesheet" href="jquery.mobile.splitview.css" />
<link rel="stylesheet" href="jquery.mobile.scrollview.css" />
<link rel="stylesheet" href="jquery.mobile.grids.collapsible.css" />
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.mobile.splitview.js"></script>
<script type="text/javascript" src="../../compiled/jquery.mobile-1.0b2pre.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.mobile.scrollview.js"></script>
</head>
<body>
<div data-role="panel" data-id="menu">
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- other side panel pages here -->
</div>
<div data-role="panel" data-id="main">
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- other main panel pages here -->
</div>
</body>
</html>
NOTE: although with this beta2 release I've managed to minimize the amount of changes made in jqm core, there are still about 3 lines of code I needed to add. make sure you use the version provided in this fork of jqm by running 'make' in a terminal, and finding the jquerymobile js and css files in the /compiled folder created by 'make'. (also make sure to run this in the beta2 branch, or you won't get the most up to date files)
pages can also be loaded dynamically provided you specify the panel it needs to load into (as explained below). you need to preload two pages - one for each panel, to avoid an empty page on either of your panels.
Splitview Links
-------------------------------
splitview links work just like the links in jQuery Mobile. the only difference is, you can define the panel you want the page that link points to load into using the 'data-panel' attribute. for example:
<a href="some_other_page" data-panel="main">
this method also loads ajax pages.
Panel settings
-------------------------------
there are two settings for panel divs:
1. data-hash - takes the following values: true(default), false, and crumbs
this attribute tells splitview to track history for the panel or not (true and false), or to set a 'crumb' (crumbs) button at the top left portion of the header for each page.
2. data-context - takes a jQuery selector value, or a hash of the following: url, panel, refresh.
data-context tells splitview to load another page whose link can be found in the active page by the jQuery selector value, or a page which is pointed to by the hash. example:
<div data-role="panel" data-id="menu" data-hash="crumbs" data-context="a#default">
OR
<div data-role="panel" data-id="menu" data-hash="crumbs" data-context='{"url":"#bar", "panel":"main", "refresh":false}'>
NOTE: this attribute, if used on a page, overrides panel data-context attributes. example:
<div data-role="page" data-context="a#default">
that's about it! splitview does everything else for you... enjoy it, and let me know if you have any issues with it! thanks!
五款jQueryMobile官方公认的插件源码 （198个子文件） 
960_grid_24_col.acorn 44KB 960_grid_16_col.acorn 42KB 960_grid_12_col.acorn 38KB 960_grid_24_col.ai 335KB 960_grid_16_col.ai 332KB 960_grid_12_col.ai 329KB 960_logo.ai 7KB 960_grid_24_col_cs5.ait 342KB 960_grid_16_col_cs5.ait 338KB 960_grid_12_col_cs5.ait 335KB 960_GRIDS.atn 36KB 960_mockups.bmml 23KB 960_grid_16_col.cdt 30KB 960_grid_12_col.cdt 28KB 960_grid_24_col.cdt 27KB jquery.mobile.css 106KB jquery.mobile.min.css 70KB jquery.mobile.theme.css 52KB jquery.mobile.structure.css 51KB jquery.mobile.structure.min.css 45KB jquery.mobile.theme.min.css 25KB bartender.css 17KB bartender.min.css 10KB 960_rtl.css 10KB 960.css 10KB 960_24_col_rtl.css 8KB 960_24_col.css 8KB 960_16_col_rtl.css 6KB 960_16_col.css 6KB 960_rtl.css 6KB 960.css 6KB 960_24_col_rtl.css 5KB 960_24_col.css 5KB 960_12_col_rtl.css 5KB 960_12_col.css 5KB qunit.css 4KB 960_16_col_rtl.css 4KB 960_16_col.css 4KB 960_12_col_rtl.css 3KB 960_12_col.css 3KB jquery.mobile.splitview.css 3KB jquery.mobile.grids.collapsible.css 2KB reset_rtl.css 2KB reset.css 2KB jquery.mobile.pagination.css 1KB reset_rtl.css 1KB reset.css 1KB text_rtl.css 1KB text.css 1KB demo.css 760B jquery.swipeButton.css 644B jquery.swipeButton-1.2.css 583B jquery.swipeButton-1.0.1.css 472B text_rtl.css 464B text.css 463B jquery.swipeButton-1.0.css 425B demo.css 84B 960_grid_24_col.design 5KB 960_grid_16_col.design 4KB 960_grid_12_col.design 3KB 960_logo.eps 296KB
960_grid_24_col.fla 48KB 960_grid_12_col.fla 41KB 960_grid_16_col.fla 40KB
ajax-loader.gif 8KB 24_col.gif 105B 16_col.gif 101B 12_col.gif 96B .gitignore 37B .gitignore 11B .gitignore 9B 960_graffle.graffle 6KB
index.html 34KB bartender.html 23KB demo_rtl.html 9KB demo.html 9KB demo_24_col_rtl.html 7KB demo_24_col.html 7KB menu.html 4KB index.html 2KB swipe-1.1.html 2KB jquery.swipeButton.js.html 1KB index.html 911B 3.html 846B 2.html 841B 4.html 779B row-click.html 549B swiped.html 549B 960_grid_24_col.idml 26KB 960_grid_16_col.idml 26KB 960_grid_12_col.idml 26KB 960_grid_24_col.indt 892KB 960_grid_16_col.indt 868KB 960_grid_12_col.indt 860KB 960_grid_24_col.inx 74KB 960_grid_16_col.inx 69KB 960_grid_12_col.inx 65KB
3.jpg 150KB 4.jpg 117KB 2.jpg 103KB共 198 条
- 1
- 2
资源评论
