westcoast / jquery-mobile-subpage-widget Goto Github PK
View Code? Open in Web Editor NEWThis project forked from toddthomson/jquery-mobile-subpage-widget
This project forked from toddthomson/jquery-mobile-subpage-widget
Description A jQuery Mobile widget that allows subpages to be added to pages. This is useful when a mobile view needs to be structured as a number of partial views with page transitions between them. This gives a HTML5 mobile app more of a native feel. For views of this type the added benefit is that only 1 AJAX request is needed. Usage Add a stack of child div's with data-role="subpage" to a parent div with data-role="page". Notes Subpage div's are automatically detached from the parent page div and inserted into the DOM when the parent page is loaded. When the parent page is hidden, the child subpage div's are removed from the DOM. The functionality provided by this widget is a workaround for the jQuery Mobile loadPage() function which only loads the first page in an AJAX response. Demo Please visit the http://www.integra-international.net website ( you will need use an actual mobile device or modify your browser's user-agent string [ safari is a good choice for this ] ) to launch the new Integra Mobile web app which utilizes the subpage widget. After the web app launches, press the info button on RHS of the header bar. Next select the "Integra Mobile" list item. The 'Integra Mobile' page contains a subpage which is accessible through the 'About' list item. Code Please note that I define a subpages section ( I use Microsoft MVC Razor views *.cshtml ). This section get inserted at the start of the page div via a .cshtml master view. ------------------------ @{ ViewBag.Title = "Integra - About"; ViewBag.PageTheme = "b"; ViewBag.PageId = "mui-id-1001"; } @section SubPages { @* mobile-about subpage.. *@ <div data-role="subpage" id="mid-mobile-about" data-theme="b"> <div data-role="header" data-position="fixed"> <h1>Integra Mobile</h1> <a data-rel="back" href="#/home/about" data-icon="arrow-l" data-direction="reverse" class="alt ui-btn-left">Back</a> </div> <div data-role="content"> <h2 class="mui-field-title">General</h2> <div class="mui-field-inset ui-corner-all ui-shadow"> <p> Welcome to the new Integra Mobile web app. Use this web app to locate Integra member firms and contacts, view mergers and acquisitions with our Deal Board or generally learn everything about Integra. We hope you enjoy using this web app and would like to hear from you with your feedback. </p> </div> <h2 class="mui-field-title">Contact</h2> <div class="mui-field-inset ui-corner-all ui-shadow"> <p> If you have any questions or concerns about the Integra Mobile web app we'd love to hear from you. Please send an email message to <a href="mailto:[email protected]?subject=Integra Mobile">Achilles Software</a> </p> </div> <h2 class="mui-field-title">Copyright</h2> <div class="mui-field-inset ui-corner-all ui-shadow"> <p> Copyright 2011 Achilles Software. All Rights Reserved. </p> </div> </div> </div> } @* Body.. *@ <div data-role="header" data-position="fixed"> <h1>Integra Mobile</h1> <a data-rel="back" href="#info-page" data-icon="arrow-l" data-direction="reverse" class="ui-btn-left">Back</a> </div> <div data-role="content"> <script> $('#mui-id-1001').live('pageinit', function (event) { if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) { var addToHomeConfig = { touchIcon: true }; var pageElement = $('#mui-id-1001'); addToHomeShow(pageElement); } }); </script> <ul data-role="listview" data-inset="true" data-theme="c"> <li class="ui-li-static"> <span class="mui-li-field">Version</span> <span class="mui-li-string">1.0.rc</span> </li> <li> <a href="#@Url.Content( "~/home/about" )&ui-page=mid-mobile-about">About</a> </li> </ul> </div>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.