iPad app using JQtouch Help needed
so basically this is my 2nd attempt at creating an ipad app using jquery and jqtouch (see my other questions)
i am now wondering how i can split the readily available jqtouch theme app for iphone which uses one window - into 2 windows. so it is more suited for the ipad
so when the user accesses the page, the navigation will be on the left, and i will have a main window.
when user clicks a navigation link on the left, the div inform开发者_Python百科ation appears in the main window on the right with the transition animation only happening in the main window and the navigation remaining un changed.
what i have so far, all menu links displayed on the page, when menu link is clicked, mennu links slide to the left to reveal selected link.
i want menu links to be on left, when menu link is clicked, selected link appears in window on right with nice transistion animation.
Who can help me?????? please?
any reply will be greatly appreciated.
im not sure if links are allowed but i would like to make it look something like this:
http://en.myfreeweb.ru/designing-an-ipad-web-application-with-jqtouc
how it looks so far:
My jQtouch website @import "jqtouch.css"; @import "theme.css";
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black'
});
</script>
</head>
<body>
<div id="page1">
<div class="toolbar">
<h1>CISM Diary App</h1>
</div>
<ul class="edgetoedge">
<li><a class="pop" href="#page2">Latest News</a></li>
<li><a href="#page3">Important Uploads</a></li>
<li><a href="#page4">Personal Details</a></li>
<li><a href="#page5">Timetable</a></li>
<li><a href="#page6">Tasks</a></li>
<li><a href="#page7">Staff Lookup</a></li>
<li><a href="#page8">University Information</a></li>
</ul>
</div>
<div id="page2">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Latest News</h1>
</div>
<div class="info">
Hello this is page one huiphguipghuipbuytbouybtouokhjpoinugbougnouygnou
</div>
</div>
<div id="page3">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Important Uploads</h1>
</div>
<div class="info">
Hello this is page two
</div>
</div>
<div id="page4">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Personal Details</h1>
</div>
<div class="info">
Hello this is page three
</div>
</div>
<div id="page5">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Timetable</h1>
</div>
<div class="info">
Hello this is page th
</div>
</div>
<div id="page6">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Tasks</h1>
</div>
<div class="info">
Hello this is page three
</div>
</div>
<div id="page7">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Staff Lookup</h1>
</div>
<div class="info">
Hello this is page three
</div>
</div>
<div id="page8">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>University Information</h1>
</div>
<div class="info">
Hello this is page three
</div>
</div>
</body>
I think you should take a look at this fork of JQTouch - which has an ipad like layout prebuilt into the CSS. So it has a pane layout on left - and a main window on right. Incorporates iScroll as well for smooth scrolling inside panes.
This fork of JQTouch is easy to use if you already have used the original JQTouch. See here for the Beedesk fork and demos:
https://github.com/beedesk/jQTouch
加载中,请稍侯......
精彩评论