|
GettingStarted
Download a copy of jQTouch from Google Code. 1. Add ScriptsjQTouch currently uses jQuery 1.3.2, which can be loaded dynamically from Google Code. In the <head> of your document, insert the following: <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>2. InitializeInitialize the function before the page onload event. To turn off a feature, simply pass a false to the corresponding option in the initialization options. $.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: [
'themes/jqt/img/chevron_white.png',
'themes/jqt/img/bg_row_select.gif',
'themes/jqt/img/back_button_clicked.png',
'themes/jqt/img/button_clicked.png'
]
});3. Extend
|
► Sign in to add a comment
Can you provide us with basic instructions? something like "How to?" I don't know where to start.
Two types of links are not working for me.
1) Linking to a mp3 file. I would hope it could play the mp3 in quicktime (in the browser). When the file is done playing, it goes back to the page <div> it was last on.
2) Linking to a telephone number. a href=tel:8015551212 doesnt work...
Do I have to study jQuery before using jQTouch?
It definitely helps.
Has anyone here tried using jQtouch with Ruby on Rails Applications? I'm having some issues and looking around to see if anyone has run into a similar situation.
I had a problem with jquery check a checkbox, and then continues to function as a "toggle". The solution was to change this way: jQuery ( '# preferences # pref_visible') 0?. checked = false;
How can you set the homescreen title automatically. I got the image using the icon ini statement but can't seem to find where to preset the text.
I made a very simple app using RoR and encountered no problems at all, it worked right away. I mainly used the demo as the starting point, just moving the inline JS to a separate init.js file. Worth emphasizing though that this was a very simple one, with mainly just my blog engine using ruby. What type of issues did you CStephens4 had?
Is there a way to detect with javascript if the app was started trough a home screen icon or by browsing to it with Mobile Safari?
window.navigator.standalone is true if started from the home screen and false if viewed in Safari.
pozon9, the Homescreen title is by default the TITLE of the page. The user can change it if the like before adding it to their home screen.
Can anybody answer me regarding why JQT doesn't work when using java on SSL?
None of the animations work when I link to a new page (which is parsed via a java controller). I have a logon page (https) and after logging on, the user is taken to a menu screen, which resembles JQT's demo home screen (with a list of links/options).
I can not include all the content in DIV's on the home page as JQT does, so they are each their own html file (Java + Velocity). And instead of "Sliding" them in, they come in as though they aren't using JQT at all. No animation what so ever. And when I try to slide back to the home page, the same problem occurs: no animation (back slide).
Please help! :)
I notice that velocity is screwing up the javascript used to init jqt. It tries to parse the $.jQTouch({ line of code, among others. I know of no way to escape the characters, since Velocity's doc doesn't cover this type of code escaping: http://velocity.apache.org/engine/releases/velocity-1.6.2/user-guide.html#escapinginvalidvtlreferences
So, until a work around is found I can not get it to work. :(
How else can jqt be init'ized?
Must the script be included (written) inline, in the head, as it is in the demo? Or can we import it as a .js file?
It can definitely be moved into a .js file. Tried it just now.
I would like to say I started reading about jQTouch today, and I love it to bits.
Now for a silly question: is there a way to test the web app on a Linux box? Preferably in a browser with debugging abilities, a la Firefox+Firebug.
Thanks.
You could use something like iPhoney (http://sourceforge.net/projects/iphonesimulator/) to view your project, or just go to your project on your localhost in Firefox and resize the screen to 320x460. Alternatively, go to your local IP on your iPhone and look at your app there.
I'll echo the earlier comment - I'd like to at least see some basic docs on building simple pages.
This is about as clear as mud. How about some step by steps!!! JQ-Jeeeeeze!
I'm having some real issues upgrading from 1beta 2 to the latest svn trunk, ive replaced all necessary files but now the font on toolbar buttons has changed to something ugly and pages don't work at all, the page just displays as one huge long regular page instead of panels.. Any Ideas?
limitedknowledge.wordpress.com has a tutorial for a very basic 'app' on it. It helped me to get my first site up. :)
@ chris.carey, if your question is not answered, yet.. To make direct phone calls available with the iPhone, add a button like this: <li class="arrow"><a href="tel:1234 567 8900" target="_blank">talk to us</a></li>
willsbithrey - had the same problem. You need to add another <div id="jqt"> to your page so it looks like <body> <div id="jqt"> <div id="somepage">..etc</div> </div> </body>
Didn't know where to put this, so i'll put it here.
My app was loading one particular page and then automatically animating back through the entire history and back to 'home' before I even had a chance to read the page that had loaded.
Just make sure that your div id's dont contain spaces.
Can anybody give an advice on how to insert AJAX gif loader in site? I.e. if you click on some link, while requested page is loading to show user some loading.gif animation
Thanks in advance!
Are there any basic instructions, tutorials, examples or howtos for jQTouch? Seems like a cool project, just not easy to get started.
Is there any way to change the number of rows of Textarea? Have tried using <textarea rows=x .. but size in fixed when within <li> tags.
I have found a basic presentation for beginners: http://media.philippbosch.de/talks/20100218-jqtouch-berlinjs/jQTouch-web.pdf
Not sure if this is the correct section for the question, I am new to jqtouch.
It maybe something really simple I'm missing, but how do I add a next button, so I can go through a step-by-step guide clicking to go to next instruction. Every button I have tried, works as a back button.
I could use a <li> </li> directing to next page, but I would rather use a button (white button from jqt theme)
Many Thanks
I got a question :
Is it possible to create an application that will be accepted to apple store with this framework?
And one more question - will it work offline, if all needed files will be included to the app?
@ i...@myb.co.il,, yes it is but you would need phoneGap to built it into a binary app.
Did anyone manage to find the workaround to returning to previous page (and not #home) after playing an MP3?
Must jqTouch apps be a single HTML file, or can they be broken up into multiple files or urls for modularity?
Seems like a good plugin, but the documentation is practically non-existent.
just check this for introduction: http://building-iphone-apps.labs.oreilly.com/ch04.html
Most apps need to be a single html file. I have a sinatra app with multiple CRUD style locations, and many "views". (using haml)
Will jQT work well with this? Currently I'm having trouble getting it to work, but I'm hoping the ability to span multiple pages using the animations and css will be available in jQT.
I do not imagine a larger web-app will be required to be a single page. (I could combine all my "views" into one page, but I need them to then respond to ajax properly/in expected manners.)
will jQTouch work with 1.4.2? has anybody tried using 1.4.2 with jQTouch? just because I use some stuff on my site that makes use of 1.4.2...
awesome kit, aggravating documentation. all i'm looking to do is to find out how to differentiate links. a tags seem to load things by ajax (fine), but i can't figure out how to load a whole new page using a normal a tag.... anyone? thanks, gw
@airyt1: relative URLs get loaded via AJAX, but I think if you specify a full "http://" path (such as http://domain.com/posts), it will load the request normally.
I have a question
does anyone know how to put Text before a UL CLASS
what i mean is this .. if i have
<ul class="individual">
Now how to do i make it so i have the txt outside the box and it is on the same line as the ul class , cuz when i put text before <li> it displays it after it not before.
Thank you
So I'm loading content via ajax. The links of the loaded content point to real site links, like /this/sites/screenshots. On success of the original loaded content, how do I "hijack" those links to make the content load in a specified div?
That's the final level of the site, so it won't need to be more complicated than that…
@airyt1 @tzeentch I'm wondering the same thing, actually. I have links with http:// in them, but those won't open in a whole page, unless I use target="blank" with it. What's weirder, is I'm pretty sure when I first started working on my mobile site, I seem to recall that it did work fine, and only stopped later (but I might just be imagining that).
I'm also curious if there's any documentation outlining all the different class markups and their effects?
@norway.richard: Try using ${esc.d} to render a dollar sign in Velocity. You can also wrap your content in #literal() to disable Velocity rendering. Otherwise put it in an external file.
Try this out in your jQuery init file/block for the forwarding issue: $('a[href^=http://]:not([target])').click(function() {
});This looks for links that start with http:// that do not have a target attribute set.
Hello we have bin waiting for beta2 and its really nice work and really usable but we have a small problem, since we can for technical reason not use ajax so we have to do a lot of things with "webapp" good that this option is existing but we encounter a small problem when we use the back button it always redirect us to xxx/#home and now we are searching for a way to use jqtouch that the back button brings us to xxx/ is there a way to do this by a parameter ?
Anyone tried it with jquery 1.4.2???
I am creating a phonegap application.In that the html page contains 3 textboxes.I am not able to assign values in textbox to varibles :( like var txtName =document.formOne.firstname.value; can anyone help me..
@airyt1 Hi there, I faced the same link problem today. By browsing through the jqtouch sources I found, that you can set the ref-attribute to "external". That done, external links work for me. Example: <a class="button" rel="external" href="logout.jsp">Logout</a>
Does initialization need to occur on the "div" tags inside of the "body" tag. Can I specify the "container" for these actions?
I found a good introduction to how to use jQTouch here:
http://building-iphone-apps.labs.oreilly.com/ch04.html
I have integrated jquery UI tabs with Jqtouch but it is not working properly. When the page loads first time, it works but it didn't work after navigate other pages. JqueryUI js and css both are properly include.
has anybody use jquery ui with jqtouch?
Please get back to me on this... Thanks in advance....
What does
var jQT = new $.jQTouch({ icon: "jqtouch.png", addGlossToIcon: false, startupScreen: "jqt_startup.png", statusBar: "black" });do?
This is not a tutorial. Try http://www.timo-ernst.net/2010/08/tutorial-a-simple-twitter-client-with-jqtouch/ for much much more detailed instructions.
I'm trying to use a link from one of my main pages to dynamically build a page using data from an XML file, but parsing that data based on the link. For example, if you clicked on the link for Product1, it would pull XML data for Product1 and put it in DIVs, Product 2 would pull product 2 only, etc. What's the best approach for doing something like this? Any help would be greatly appreciated.
i want to know all the jqtouch events
jqtouch supports action on full page rather than on specific block.......is it true??
The instruction is totally not clear, I think someone need to update it.