Skip to content

Commit c8ec0ed

Browse files
asyraf9asyraf9
committed
updated README
1 parent 6279484 commit c8ec0ed

File tree

1 file changed

+97
-39
lines changed

1 file changed

+97
-39
lines changed

‎README.md‎

Lines changed: 97 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,110 @@
1-
jQuery Mobile Framework
1+
jQuery Mobile Splitview plugin
22
=====
3-
http://jquerymobile.com
4-
5-
6-
Demos and documentation
7-
===================================
8-
http://jquerymobile.com/test/
9-
10-
11-
How to build your own jQuery Mobile CSS and JS files
3+
demo at: asyraf9.github.com/jquery-mobile/
4+
5+
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.
6+
7+
Features
8+
======================
9+
1) auto-detection of how to render for the browser you are using.
10+
2) independent panel scrolling (still a lot more to work on here)
11+
3) orientation and resize aware - renders the side panel in a popover fashion when in portrait mode
12+
4) context awareness - can be programmed so that opening a page on the side panel also opens a page on the main panel
13+
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)
14+
6) panel specific links - links on the side panel can affect pages in the main panel, or in the side panel itself.
15+
16+
Anatomy of a Splitview page
17+
===============================
18+
the anatomy of a splitview page can be seen at the demo page above. Basically, you need to position your pages in the following order:
19+
20+
<!DOCTYPE html>
21+
<html>
22+
<head>
23+
<title>Page Title</title>
24+
25+
<meta name="viewport" content="width=device-width, initial-scale=1">
26+
27+
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.0b2.min.css" />
28+
<link rel="stylesheet" href="../../compiled/jquery.mobile-1.0b2pre.css" />
29+
<link rel="stylesheet" href="jquery.mobile.splitview.css" />
30+
<link rel="stylesheet" href="jquery.mobile.scrollview.css" />
31+
<link rel="stylesheet" href="jquery.mobile.grids.collapsible.css" />
32+
<script type="text/javascript" src="jquery-1.6.2.js"></script>
33+
<script type="text/javascript" src="jquery.mobile.splitview.js"></script>
34+
<script type="text/javascript" src="../../compiled/jquery.mobile-1.0b2pre.js"></script>
35+
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
36+
<script type="text/javascript" src="jquery.mobile.scrollview.js"></script>
37+
</head>
38+
<body>
39+
<div data-role="panel" data-id="menu">
40+
<!-- Start of first page -->
41+
<div data-role="page" id="foo">
42+
43+
<div data-role="header">
44+
<h1>Foo</h1>
45+
</div><!-- /header -->
46+
47+
<div data-role="content">
48+
<p>I'm first in the source order so I'm shown as the page.</p>
49+
<p>View internal page called <a href="#bar">bar</a></p>
50+
</div><!-- /content -->
51+
52+
<div data-role="footer">
53+
<h4>Page Footer</h4>
54+
</div><!-- /footer -->
55+
</div><!-- /page -->
56+
<!-- other side panel pages here -->
57+
</div>
58+
<div data-role="panel" data-id="main">
59+
<!-- Start of second page -->
60+
<div data-role="page" id="bar">
61+
62+
<div data-role="header">
63+
<h1>Bar</h1>
64+
</div><!-- /header -->
65+
66+
<div data-role="content">
67+
<p>I'm first in the source order so I'm shown as the page.</p>
68+
<p><a href="#foo">Back to foo</a></p>
69+
</div><!-- /content -->
70+
71+
<div data-role="footer">
72+
<h4>Page Footer</h4>
73+
</div><!-- /footer -->
74+
</div><!-- /page -->
75+
<!-- other main panel pages here -->
76+
</div>
77+
</body>
78+
</html>
79+
80+
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.
81+
82+
Panel settings
1283
===================================
84+
there are two settings panel divs:
85+
1) data-hash - takes the following values: true(default), false, and crumbs
86+
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.
1387

14-
Clone this repo and build the js and css files (you'll need Git and Make installed):
15-
16-
git clone git://github.com/jquery/jquery-mobile.git
17-
cd jquery-mobile
18-
make
88+
2) data-context - takes a jQuery selector value, or a hash of the following: url, panel, refresh.
89+
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:
1990

20-
A full, complete version and a minified, complete version of the jQuery Mobile JavaScript and CSS files will be created in a folder named "compiled".
91+
<div data-role="panel" data-id="menu" data-hash="crumbs" data-context="a#default">
2192

93+
OR
94+
95+
<div data-role="panel" data-id="menu" data-hash="crumbs" data-context='{"url":"#bar", "panel":"main", "refresh":false}'>
2296

23-
Submitting bugs
24-
===================================
25-
26-
If you think you've found a bug, please visit the Issue tracker (https://github.com/jquery/jquery-mobile/issues) and create an issue explaining the problem and expected result. Be sure to include any relevant information for reproducing the issue, such as the browser/device (with version #), and the version of the jQuery Mobile code you're running. It also helps a lot to make sure that the bug still exists on jquerymobile.com/test/, as it's possible we may have fixed it already! It is also best to include code to reproduce the bug.
97+
NOTE: this attribute, if used on a page, overrides panel data-context attributes. example:
2798

99+
<div data-role="page" data-context="a#default">
28100

29-
Submitting patches
101+
Splitview Links
30102
===================================
103+
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:
31104

32-
To contribute code and bug fixes to jQuery Mobile: fork this project on Github, make changes to the code in your fork, and then send a
33-
"pull request" to notify the team of updates that are ready to be reviewed for inclusion.
34-
35-
Detailed instructions can be found at https://gist.github.com/726275
36-
37-
38-
Running the jQuery Mobile demos & docs locally
39-
===================================
40-
41-
To preview locally, you'll need to clone a local copy of this repository and point your Apache & PHP webserver at its root directory (a webserver is required, as PHP and .htaccess are used for combining development files).
42-
43-
If you don't currently have a webserver running locally, there are a few options.
44-
45-
If you have python installed (most Linux distributions) and Mac OSX, you use the built-in simple web server. Open a terminal/shell and change to the jQuery Mobile folder then type 'python -m SimpleHTTPServer', and voila you can then browse via http://localhost:8000.
105+
<a href="some_other_page" data-panel="main">
46106

47-
If you're on a Mac, you can try dropping jQuery Mobile into your sites folder and turning on Web Sharing via System Prefs. From there, you'll find a URL where you can browse folders in your sites directory from a browser.
107+
this method also loads ajax pages.
48108

49-
Another quick way to get up and running is to download and install MAMP for Mac OSX. Once installed, just open MAMP, click preferences, go to the Apache tab, and select your local jQuery Mobile folder as the root. Then you can open a browser to http://localhost:8888 to preview the code.
50109

51-
Another alternative is XAMPP, which is also available for Windows, though you need to actually modify Apache's httpd.conf to point to your checkout: http://www.apachefriends.org/en/xampp.html
52-
You need the Rewrite (mod_rewrite.so), Expire (mod_expires.so) and Header (mod_headers.so) modules loaded.
110+
that's about it! splitview does everything else for you... enjoy it, and let me know if you have any issues with it! thanks!

0 commit comments

Comments
 (0)