Main
+-
+
- About
+
-
+
- About Us +
- About Splitview +
+ - Features
+
-
+
- Panels +
- Orientation +
- Scroll +
- Context Pages +
+ - Credits +
- Source@Github +
diff --git a/README.md b/README.md index fb4c2b50b20..85fb3238cdb 100644 --- a/README.md +++ b/README.md @@ -1,94 +1,114 @@ -jQuery Mobile Framework -======================= -[Official Site: http://jquerymobile.com](http://jquerymobile.com) -[Demos and Documentation](http://jquerymobile.com/test/) - -How to build your own jQuery Mobile CSS and JS files -==================================================== -Clone this repo and build the js and css files (you'll need Git and Make installed): - - git clone git://github.com/jquery/jquery-mobile.git - cd jquery-mobile - make - -A full version and a minified version of the jQuery Mobile JavaScript and CSS files will be created -in a folder named "compiled". There is also now a Structure only css file so you can add your own theme on top of it. - -How to build a self-contained version of the Docs/Demos -======================================================= -Once you have your own cloned repo on your computer: - - make docs - -The docs will be built and available in the compiled/demos folder. You can move this folder to your web server or -other location. It has no dependencies on anything other than a basic HTML web server. - - -Submitting bugs -=============== -If you think you've found a bug, please report it by following these instructions: - -1. Visit the [Issue tracker: https://github.com/jquery/jquery-mobile/issues](https://github.com/jquery/jquery-mobile/issues) -2. Create an issue explaining the problem and expected result - - Be sure to include any relevant information for reproducing the issue - - Include information such as: - * Browser/device (with version #) - * The version of the jQuery Mobile code you're running - * If you are running from a git version, include the date and/or hash number - - Make sure that the bug still exists at http://jquerymobile.com/test/ as it may be fixed already - - You can use the CDN hosted JS and CSS files to test in your own code by using: - * [JS](http://code.jquery.com/mobile/latest/jquery.mobile.min.js) - * [CSS](http://code.jquery.com/mobile/latest/jquery.mobile.min.css) - - Include a link to some code of the bug in action. You can use either of these services to host your code - * [jsbin](http://jsbin.com) - * [jsfiddle](http://jsfiddle.net) -3. Submit the issue. - -Recommended: [JS Bin issue template with instructions](http://jsbin.com/obowiw/edit) - -Submitting patches -================== -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 "pull request" to notify the team of updates that are ready to be reviewed for inclusion. - -Detailed instructions can be found at [jQuery Mobile Patching](https://gist.github.com/1294035) - -Running the jQuery Mobile demos & docs locally -============================================== -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). - -If you don't currently have a webserver running locally, there are a few options. - -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. - -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. - -Another alternative is XAMPP (Mac, Windows). You need to actually modify Apache's httpd.conf to point to your checkout: -[Instructions](http://www.apachefriends.org/en/xampp.html) - -You need the following Apache modules loaded: - -* Rewrite (mod\_rewrite.so) -* Expire (mod\_expires.so) -* Header (mod\_headers.so) - -Building With A Custom Theme -============================ -To use a custom theme in your own build, you'll need Make installed. You can find the themes in the CSS/Themes folder. -To create a new theme: - -1. Copy the `Default` folder from CSS/Themes to a new folder in the same location. The name of the folder will be the -theme's name. For testing locally, make sure the index.php file is copied as well. -2. Edit the `jquery.mobile.theme.css` file so it contains your custom fonts and colors. -3. Once you are done editing your files and saving them, open a terminal. -4. Navigate to the jQuery-Mobile folder's root. -5. Run the following command to build jQuery-Mobile (THEME is the name of the folder for your theme from step 1.): - - make THEME=YourThemeName - -6. The compiled files will be located in the "compiled" folder in the root of jQuery-Mobile. +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. + +Features +------------------------------- +1. auto-detection of 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. Basically, you need to position your pages in the following order: + + + +
+I'm first in the source order so I'm shown as the page.
+View internal page called bar
+I'm first in the source order so I'm shown as the page.
+ +Container with data-role="page" or "dialog" linked to with data-rel="dialog" on the anchor.
Page with data-role="page" linked to with data-rel="dialog" on the anchor.
| data-close-btn-text | @@ -213,10 +213,6 @@data-theme | swatch letter (a-z) |
|---|---|---|
| data-title | -string (title used when page is shown) | -
defaultDialogTransition string, default: 'pop'minScrollBack string, default: 150minScrollBack string, default: 250loadingMessage string, default: "loading"data-url (string, default: undefined) The URL to use when updating the browser location upon changePage completion.
+ dataUrl (string, default: undefined) The URL to use when updating the browser location upon changePage completion.
If not specified, the value of the data-url attribute of the page element is used.pageContainer (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page. reloadPage (boolean, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
diff --git a/docs/forms/docs-forms.html b/docs/forms/docs-forms.html
index 460b4b8a4b9..fb20da83a06 100755
--- a/docs/forms/docs-forms.html
+++ b/docs/forms/docs-forms.html
@@ -198,7 +198,7 @@ One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if select is included. If you wish to retain the native performance, look/feel of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile you can set $.mobile.nativeSelectMenu to true in a mobileinit callback as a global setting or use data-native="true" on a case by case basis.
One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if select is included. If you wish to retain the native performance, look/feel of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile you can set $.mobile.selectmenu.prototype.options.nativeMenu to true in a mobileinit callback as a global setting or use data-native-menu="true" on a case by case basis.
The data-overlay-theme attribute can be added a select element to set the color of the overlay layer that the dialog-based custom select menus and the outer border of the smaller custom menus. By default, the content block colors for swatch A will be used for the overlays.
The data-overlay-theme attribute can be added to a select element to set the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. By default, the content block colors for swatch A will be used for the overlays.
$('select').selectmenu({ nativeMenu: "false" });
+ overlayTheme stringdefault: a
+Sets the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, the content block colors for swatch A will be used for the overlays. This option is also exposed as a data attribute: ui-body-d
$('select').selectmenu({ overlayTheme: "d" });
+ shadow booleandefault: true
diff --git a/experiments/splitview/eventlog.js b/experiments/splitview/eventlog.js new file mode 100644 index 00000000000..ab0ecb99803 --- /dev/null +++ b/experiments/splitview/eventlog.js @@ -0,0 +1,26 @@ + + // $(document).bind('mobileinit',function(event){ + // console.log( event.type + 'event triggered'); + //}); + + var $pages = $("div[data-role='page']"); + + $(window).bind('orientationchange orientationchange.htmlclass', function(event){ + if (window.console) { + console.log(event.type + ' event triggered'); + } + }); + + $(window.document).bind('mobileinit', function(event){ + if (window.console) { + console.log(event.type + ' event triggered'); + } + }); + + $pages.live('pagebeforecreate pagecreate pagebeforehide pagebeforeshow pageshow pagehide',function(event){ + if (window.console) { + console.log( event.type + ' event triggered for ' + $(this).attr('id')); + } + }); + + diff --git a/experiments/splitview/images/ajax-loader.png b/experiments/splitview/images/ajax-loader.png new file mode 100644 index 00000000000..811a2cdd1b4 Binary files /dev/null and b/experiments/splitview/images/ajax-loader.png differ diff --git a/experiments/splitview/images/icon-search-black.png b/experiments/splitview/images/icon-search-black.png new file mode 100644 index 00000000000..5721120f8df Binary files /dev/null and b/experiments/splitview/images/icon-search-black.png differ diff --git a/experiments/splitview/images/icons-18-black.png b/experiments/splitview/images/icons-18-black.png new file mode 100644 index 00000000000..71268bdf70f Binary files /dev/null and b/experiments/splitview/images/icons-18-black.png differ diff --git a/experiments/splitview/images/icons-18-white.png b/experiments/splitview/images/icons-18-white.png new file mode 100644 index 00000000000..dadc6af5870 Binary files /dev/null and b/experiments/splitview/images/icons-18-white.png differ diff --git a/experiments/splitview/images/icons-36-black.png b/experiments/splitview/images/icons-36-black.png new file mode 100644 index 00000000000..8c35ae3fb03 Binary files /dev/null and b/experiments/splitview/images/icons-36-black.png differ diff --git a/experiments/splitview/images/icons-36-white.png b/experiments/splitview/images/icons-36-white.png new file mode 100644 index 00000000000..7e559b8163f Binary files /dev/null and b/experiments/splitview/images/icons-36-white.png differ diff --git a/experiments/splitview/index.html b/experiments/splitview/index.html new file mode 100644 index 00000000000..581e046b230 --- /dev/null +++ b/experiments/splitview/index.html @@ -0,0 +1,616 @@ + + + +We first started to look into jQuery Mobile when had a project that needed us to build web applications that would work great on all platforms: Desktop, Tablets(iPad), and Mobile
+ +Although jQuery Mobile was still in alpha 1 at that time, we felt that it provided the most in terms of what we needed. so we set ahead trying to see if we could help others who had the same interest as we did: get it to work well on the Desktop/iPad - as a SplitView
+ +A few months later, around alpha 3, we finally got our first splitview to work, and thanks to support from jQuery Mobile's own core team members, Splitview for jQMobile is what it is today
+ +There are still a lot of things to do, but we hope you enjoy using this plugin, and contribute back to it by reporting bugs, requesting features, and best of all, submitting your own code contributions. Thanks!
+ +NOTE: keep in mind that I added some namespacing to event handlers in jQMobile core. use the version of jQuerymobile found in the experiments/splitview/ folder of my fork.
+We're a bunch of guys who love to code. Ruby on Rails, Wordpress, Drupal, and OpenERP - we love 'em all... and we'll soon be introducing our own open-source project, based on jQueryMobile, and Ruby on Rails.
+ +So stay tuned, check back here often, or follow us on facebook or twitter! details below: + +
Twitter: asyraf9
+Facebook: asyraf9
+Website: www.cs8.my
+In order for splitview to work, we defined two more <div> tags to enclose the pages - one called 'main', the right hand panel, and 'menu' which is the left sidebar panel
+ +This provides us with a few advantages:
+ +1. It allows us to define the area new pages should be loaded in. We do this by using data-panel attributes on anchor tags. example:
+ <a href="some_other_page" data-panel="main">
+
2. It allows us to define if a panel's page transitions should be tracked in history or not.
++ This uses the data-hash attribute on the panels. It takes three options - 'true','false', and 'crumbs' with true as default. + The 'crumbs' setting changes the panel's back button into a button that points to the previous page, and disables jQMobile from tracking the panel's history +
+3. It allows us to hide and show the panel depending on screen orientation, and unobtrusively disable it when the site is viewed on mobile browsers
+ +Very simply put, SplitView dynamically lays out the pages based on your tablet's (iPad, etc) orientation, as well as your desktop's screen size. Try it out, resize your browser, or turn your iPad to see it in portrait and landscape modes!
+ +NOTE: you may have to refresh the view if you scale the browser window down to a mobile size - less than 480px - Splitview determines upon page load if it should lay the pages out in splitview mode or mobile mode (the default jQmobile implementation)
+Splitview detects if your device is touch enabled or not. it will then implement the proper scrolling mechanism for your device. This is possible thanks to the jQuery Mobile team's experimental momentum scroll implementation, which the team promptly pointed us to. Thanks! +
Sometimes when you change a page in the side panel, you want the page on the main panel to change as well (or vice versa). using the data-context attribute on a page or a panel, you can make this happen. to use this, enter a CSS selector in the data-context, e.g. data-context=".default" and set a link with attributes that satisfy that selector within the page you are navigating into. In order to see an example, hit on the Demo button down below.
+We could not have made Splitview possible without the work of the following folks:
+ +For such a wonderfully well thought piece of code that allows us to plug into it. the core that makes Splitview possible. Thank you! especially to Todd Parker, who pointed us to scrollview.js and supported us the whole way.
+ +naugtur's initial work on a splitview version of jQuery Mobile helped provide the foundation for us to begin our work on this plugin. You can find his work at: http://jquerymobiledictionary.dyndns.org/dualColumn.html Thanks!
+ +Fellowshiptech's work on slablet provided us with the foundation to produce the CSS that worked well for a double column layout. You can find their work at: https://github.com/fellowshiptech/slablet Thanks!
+ +We couldn't have done the iPad style popover without some help from the tutorial these guys provided at http://www.cagintranet.com/archive/create-an-ipad-like-dropdown-popover/ Thanks!
+Get our source at our fork of jquery-mobile at github:
+ +
https://github.com/asyraf9/jquery-mobile/
+ +codes and this sample html file are located in the /experiments/splitview folder. Splitview still needs work, so help us make it better by submitting bug reports, feature request and patches!
+ +To report bugs (and there are still a few of them!), file an issue under our fork of jquery-mobile at github. Thanks!
+ +NOTE: keep in mind that I added some namespacing to event handlers in jQMobile core. use the version of jQuerymobile found in the experiments/splitview/ folder of my fork.
+I should have loaded when you opened the demo tab. because i am default for the demo tab (using data-context)
+ + +I'm the collapsible content. By default I'm closed, but you can click the header to open me.
+I'm the collapsible set content for section B.
+I'm the collapsible set content for section B.
+I'm first in the source order so I'm shown as the page.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur, ligula quis convallis gravida, tortor odio mattis purus, a fringilla mauris velit eu nisi. Vivamus laoreet tincidunt diam, sit amet tristique purus lobortis ac. Etiam commodo placerat elit. In aliquam dapibus felis, molestie molestie purus scelerisque sit amet. Donec vitae varius arcu. Aliquam dapibus dolor magna, nec posuere felis. Nullam in suscipit massa. Duis nec nulla nec urna sollicitudin fringilla. Proin at rutrum mi. Maecenas vitae urna ante, ac gravida tortor.
+ +Vestibulum porta pretium nunc, at adipiscing tortor fringilla sit amet. Sed venenatis varius turpis, vel fringilla purus egestas in. Curabitur interdum mauris nec velit vehicula sed aliquam nulla convallis. Nulla id magna libero, sagittis fringilla metus. Suspendisse dapibus tincidunt tristique. Fusce interdum tincidunt tincidunt. Phasellus tempus fringilla augue eget tincidunt. Donec facilisis mauris ut metus eleifend eget scelerisque nulla sagittis. Ut vel elit non risus dapibus luctus. Pellentesque vel nibh tortor.
+Fusce a nisi at dolor rutrum tristique. Donec faucibus metus vitae lorem scelerisque malesuada scelerisque enim imperdiet. Aliquam in erat orci. Ut ultrices, erat eu luctus accumsan, lorem nibh cursus purus, in laoreet nisi tellus interdum sem. Nulla fringilla molestie lectus nec hendrerit. In in mollis tortor. Nunc lectus tortor, porttitor vitae viverra non, dignissim ac ligula. In tincidunt libero id turpis gravida iaculis rhoncus dolor aliquam. Vestibulum congue massa nec nibh sagittis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque quis urna arcu. Quisque feugiat ante id turpis ultrices vel imperdiet ipsum volutpat. Donec enim magna, pretium eu scelerisque ut, pretium placerat risus.
Sed sed lacinia ante. Aenean non quam in ipsum pharetra condimentum. + +Donec turpis lacus, pharetra ac viverra sit amet, lobortis eu nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor dignissim orci ut feugiat. Praesent quis auctor purus. Suspendisse non elit accumsan mi pellentesque laoreet. Nullam et sapien sed nibh dictum tempor sit amet ut velit. Vestibulum varius ultricies lorem sed ultricies. Vestibulum auctor velit vitae ante eleifend eget bibendum metus rutrum. Nulla facilisis luctus mi laoreet rutrum. Nunc accumsan urna at elit pellentesque ut venenatis lectus adipiscing. Ut et arcu urna. Aliquam eros leo, ultricies vel porta nec, tempor sit amet leo. Quisque imperdiet facilisis orci ut malesuada. Nunc eget elit mauris. Mauris sed felis lectus.
+ +Duis purus sem, condimentum eget posuere sed, vulputate non lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras risus urna, commodo quis interdum sit amet, elementum vitae lacus. Ut tempor hendrerit ante et facilisis. Vivamus elementum purus justo, ut auctor arcu. Cras varius rhoncus venenatis. Nulla dignissim velit a erat euismod pretium. In sed leo orci, et consectetur justo. Vestibulum ipsum urna, cursus in placerat in, malesuada eu odio. Nunc eget ullamcorper tortor. In commodo, turpis sed egestas egestas, dolor sem mattis nulla, eu semper lectus metus at eros. Sed cursus nisl id risus fermentum quis aliquam odio pretium. Quisque justo eros, blandit gravida tristique eget, rhoncus in magna. Integer volutpat faucibus dolor, sit amet tempor metus ornare consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc et lacus enim, sit amet consequat turpis.
+ +| t |
Below is a dump of the non-function/object properties of the $.mobile and $.support objects. These properties typically control how the jQuery Mobile framework behaves on the various devices/platforms. You can use this page to quickly assess the default support configuration calculated by both jQuery Core and jQuery Mobile.
+