1 / 7

jqTouch

jqTouch. StylePad Mobile Project. Documentation and Demo. http://www.jqtouch.com/ http://code.google.com/p/jqtouch/ Demo: http://www.jqtouch.com/preview/demos/main/# home. jqTouch. jqtouch.js Theme file with 3 default style Apple Default JQT Black Apple (new). Set Up.

sherry
Download Presentation

jqTouch

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jqTouch StylePad Mobile Project

  2. Documentation and Demo • http://www.jqtouch.com/ • http://code.google.com/p/jqtouch/ • Demo: http://www.jqtouch.com/preview/demos/main/#home

  3. jqTouch • jqtouch.js • Theme file with 3 default style • Apple • Default • JQT • Black Apple (new)

  4. Set Up • varjQT = new $.jQTouch({ • icon: '<:$ctx:>/images/iphone/stylepad.png', • icon4: '<:$ctx:>/images/iphone/stylepad4.png', • addGlossToIcon: true, • startupScreen: '<:$ctx:>/images/iphone/stylepad_startup.png', • statusBar: 'black', • preloadImages: [ • '<:$ctx:>/script/themes/apple/img/activeButton.png', • '<:$ctx:>/script/themes/apple/img/back_button.png', • '<:$ctx:>/script/themes/apple/img/back_button_clicked.png', • '<:$ctx:>/script/themes/apple/img/blueButton.png', • '<:$ctx:>/script/themes/apple/img/button.png', • '<:$ctx:>/script/themes/apple/img/button_clicked.png', • '<:$ctx:>/script/themes/apple/img/grayButton.png', • '<:$ctx:>/script/themes/apple/img/greenButton.png', • '<:$ctx:>/script/themes/apple/img/redButton.png', • '<:$ctx:>/script/themes/apple/img/whiteButton.png', • '<:$ctx:>/script/themes/apple/img/loading.gif' • ] • }); Link setup option: http://code.google.com/p/jqtouch/wiki/InitOptions Link theme: http://code.google.com/p/jqtouch/wiki/ThemingStyling Link callback: http://code.google.com/p/jqtouch/wiki/CallbackEvents

  5. Page and Content Structure Content Title Bar • A sceen is a <div> in html page with id to reference (320px x 460px) • Every sceen must have title bar and tabbar • Tag <a> use to link the screen with animation • Page contents many screen • Common css class: • Jqt : screen • Toolbar: will be the titlebar (45px) • Button: with addition class to display button • Tabbar: will be the tabbar (49px) • Content (366px): • Image slider horizontal and vertical will use jquery tools from http://flowplayer.org/tools/demos/index.html http://192.168.1.42/stylepadmobile/home

  6. Simple Screen Code • <div id=“home" class="current"> • <div class="toolbar"> • <h1>toolbar title</h1> • <a class="buttonslideup" id="infoButton" href="#about">About</a> • </div> • <div>Content</div> • <div class="tabbar"> • <ul class="list"> • <li class="tabitem"> • <a class="link" href="#home"> • <div class="icon"><imgsrc=""/></div> • <div class="text">Home</div> • </a> • </li> • </ul> • </div> • </div>

  7. Loading new page and screen • 2 way loading new page • 1 add new page • <li class=“forward” <a target”_webapp” href=“../page/”>Page</a> </li> • No animation. • 2 insert page to current • External page will be insert directly into the current html • External page can only contents screen without header or footer • Reload the page will replace the current exist <div> • Animation is predefine, using CSS to apply, default animation is slide left, other animation: slideup, dissolve, fade, flip, pop, swap, cube.

More Related