|
Extensions
Extending jQTouch with extra functionality
Featured Extensions (beta)Extensions allow any developer to easily extend jQTouch with additional functionality. Including an extension is easy, simply include it in the <head> of your document, after including the base jQTouch script: <script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="extensions/jqt.location.js" type="application/x-javascript" charset="utf-8"></script>Included Extensions
Creating ExtensionsThe following shows the typical structure of a jQTouch extension: (function($) {
if ($.jQTouch)
{
$.jQTouch.addExtension(function Counter(jQTouch){
var mycount = 0;
function addOne() {
++mycount;
}
function getCount() {
return mycount;
}
return {
addOne: addOne,
getCount: getCount
}
});
}
})(jQuery);There are a few things happening here. First we wrap the overall code in an anonymous, self-executing function, so we can cleanly substitute the dollar sign ($) for the jQuery namespace. This is general good practice when working with jQuery. Specific to jQTouch, we call $.jQTouch.addExtension(), and pass it a function. The function will be run each time a new jQTouch object is created, (var jQT = new $.jQTouch()), and receives a copy of the jQTouch object as a parameter. The function can store local variables (var mycount) and can attach public functions/variables to the jQTouch object, by returning an object. For example, with the above extension, we could do this on our page: $(document).ready(function(){
var jQT = new $.jQTouch();
jQT.addOne();
jQT.addOne();
console.log(jQT.getCount()); // 2
});Obviously, this is an simple example, but with the ability to use jQuery $.fn-style plugins, run on instance initialization, and directly extend jQTouch's public functions/attributes, plugins can be quite powerful. This support is extremely new to jQTouch, so I really appreciate any feedback/questions in the comments below. |
► Sign in to add a comment
Has anyone written extensions?
There are a couple included with jQTouch, and I know of a few in development.
Here's a couple extensions that I ported for jQTouch from another code base http://cubiq.org/slideing-div-on-iphone-ipod-touch/5:
Sliding: Sliding
Scrolling: Scrolling
Scaling: Scaling
Brickysam26 your code for scrolling does not work for me. Do you have a working example anywhere or can you upload one please?
Sorry, for the confusion, my original extension didn't handle a scrolling div on the main page automatically, only on inserted pages, I have updated them to also check the main page nodes. I also have a short demo for vertical scrolling that you can look at, I will try to upload a better example of all of the extensions in the future.
Example: Example
Sliding: Sliding
Scrolling: Scrolling
Scaling: Scaling
Additionally, you have to use at least Revision: 118 of jQTouch in order for the extensions to work.
For me also scrolling example doesn't work. Using jQtouch beta 2. Do I need to use scrolling.css file? I have to download it? From Where? Or there is some other example?
I started a project for these extensions http://code.google.com/p/jqextensions/. I haven't had much time yet to document them, but I did upload an example and the previously mentioned scrolling.css (which consists of the css at the top of the extension pages). Feel free to comment or report issues there. Look in the source for the updated versions of each of these files.
Anyone have any ideas for implementing a menu bar at the bottom that is persitance and remains in position even when scrolling? I guess you could place it in a frames and have the top frame contain the actual jqtouch instances. I know a menu bar would be high on my priority list. Any thoughts?
@dylan.thurston Do you mean like AppleInsider when viewed with an iPhone or in Safari with the iPhone/iPod Touch user agent?
Hi, I have checked the scroll extension with latest revision 121 but its not working. Any help please?
Can I use extensions to change an option that was initialized from false to true? I initialize the option useFastTouch: false. Later, when I go into a specific DIV, I want to make it true. Is that possible?
Abid, Please refer to the example in the project page for the extensions that I wrote. You can find it here http://code.google.com/p/jqextensions/downloads/list
@brickysam26 I'm using the scroll extension and trying to implement the a contact list (ala cubiq.org/dropbox/abc/) but I'm stuck at getting the scrollto function to work. How can I do this (since I don't have access to the "scroller" object - like cubiq.org does)...
Thanks, Tony
I've written an extension for gestures for jQTouch. Try it here: http://bit.ly/98T1vt . Feedback is welcome.
Does anybody get Scrolling extension to work on Android devices?
I wrote an extension that allows you to have dynamic page heights. This means that you can align stuff to the bottom of the window (like a nav bar) and have it work for any browser height (iPad, Android, PC browser, etc.)
http://www.golen.net/blog/2010/05/07/jqtouch-dynamicheight-extension/
Are there any extensions for contact form building?
New iPhone-like Photo Gallery extension http://code.google.com/p/jqextensions/wiki/JQTouchPhotoGallery and updates to scrolling extension http://code.google.com/p/jqextensions/source/browse/jqt.scroll.js
Check out scroll plugin based on TouchScroll? - http://code.google.com/p/jqtscroll/
How about an extension for building a bottom toolbar? Has this been done?
I'm confused. Can you access private variables via extensions?
Code works great except for one issue, which I see on the cubiq site unsolved as well. Maybe someone here can help.
If you have a form inside of a scrollable div, changing content in a select option will prevent you from scrolling further up the div. Any ideas?
What I've already tried:
"On input blur trigger reset on vertical-scroll > div."
HI everyone I need help help here this is part of the code
$(function(){ jQT.generateGallery("gallery",[
}); I want to have it on my herebut it's not displaying anything
Somehow, the Autotitle extension is not working for me at all. Even in the demo downloaded directly from JQTouch and run without any change, I get Name? as the title.
Anyone has any ideas?
In the previous post, I meant get "Fruit Name" in square brackets, instead of the referrer title.