Actionsheet is similar to iOS's UIActionSheet. It is a modal sheet that can be used to prompt user for choices.
It is added to this version as an extension: jqt.actionsheet.js. When loaded, it attempts to load jqt.actionsheet.css from the same directory. (If you use ASL, such as require.js, you might need to include the css explicitly.)
The actionsheet uses the same markup as a jQT page and must be a direct child of <div id="jqt"/>.
To trigger an actionsheet, use an anchor with class, action (ie, <a class="action">)
Tapping on any anchor on the sheet causes the sheet to dismiss. After the sheet is dismissed, the original jQT action will be triggered.
Here is an example sniplet:
<div id="ui">
< ... >
<ul class="rounded">
<li class="arrow"><a class="action" href="#actionsheet">Action</a></li>
</ul>
< ... >
</div>
<div id="actionsheet" class="actionsheet">
<div class="actionchoices">
<a href="#action_performed" class="whiteButton">Open in Safari</a>
<a href="#action_performed" class="whiteButton">Plan B</a>
<a href="#" class="redButton dismiss">Cancel</a>
</div>
</div>Please refers to demos/main/index.html#ui for code sample.
Menusheet is first made popular by facebook app on iOS. The menusheet hides beneath the main page and is revealed by a slide animation when activated.
Its usage is very similar to actionsheet.
It is added to this version of jQT as an extension: jqt.menusheet.js. When loaded, it attempts to load jqt.menusheet.css from the same directory. (If you use ASL, such as require.js, you might need to include the css explicitly.)
The menusheet uses the same markup as a jQT page and must be a direct child of <div id="jqt">.
To trigger an actionsheet, use an anchor with class, menu (ie, <a class="menu">)
Tapping on any anchor on the sheet will cause the sheet to dismiss. After the sheet is dismissed, the original jQT action will be triggered.
Please refers to demos/main/index.html#ui for code sample.
We have added unit tests into this release.
They can be found under test/unit/. Each test is a *.html file and can be run by simply open it with a web browser.
The tests can also be run from a command line. Under build/, exec grunt test.
When options updateHash is set to true (default), page navigation will cause the url hash(#) to be updated.
var jQT = new $.jQTouch({updateHash: false});Added init options, starter. By defaults, jQTouch is started upon $(document).ready.
For example, this option can be overridden:
-
to work with dynamically loaded body. The relevant part of the dom might not be available at
$(document).ready. -
to react upon user action
Here is some code example:
function starter(start) {
$(document).bind('ready', function() {
$('https://beedesk.fwd.wf#magic_button').bind('touchstart mousedown', function() {
start();
});
});
}
var jQT = new $.jQTouch({starter: starter}); Prior to this release, rapid taps on anchor before page transition ended might cause page navigation to break. The problem is fixed in this release.
For .scroll, overflow-y: scroll is used instead. Some old workaround on minHeight is removed. Tested on iPhone 4s, iPad 3, Nexus 7 and Safari
We converted our build system from Ant into Gruntjs, for better dependeincies mangaement, build performance and flexibility.
jQTouch repository is now connected to Travis CI.
See, jQTouch blog for details.
See, jQTouch blog for details.
See, jQTouch blog for details.