mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-26 00:54:43 +00:00
removing these demos and plugins! :)
This commit is contained in:
scottjehl
parent
2662bb2abf
commit
a7bc486403
4 changed files with 0 additions and 830 deletions
302
_tabs.html
302
_tabs.html
|
|
@ -1,302 +0,0 @@
|
|||
<?php /*gzip page*/ ob_start("ob_gzhandler"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Framework - Tabs Example</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/all" />
|
||||
<script type="text/javascript" src="js/all"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-page">
|
||||
<div class="ui-header ui-bar-a">
|
||||
<h1>Tabs Example</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div>
|
||||
|
||||
<div class="ui-content">
|
||||
|
||||
<div data-role="tabs">
|
||||
<ul>
|
||||
<li><a href="#content-a">Content A</a></li>
|
||||
<li><a href="#content-b">Content B</a></li>
|
||||
<li><a href="#content-c">Content C</a></li>
|
||||
</ul>
|
||||
<div>
|
||||
|
||||
<div id="content-a">
|
||||
<h1>Demo description</h1>
|
||||
|
||||
<p>This page demonstrates the behavior for the tabs control. The tab navigation can either be inline with the content (for tabs within sub-sections of a page), or optionally as a global fixed footer for page-level tabs. This page demonstrates the latter. It uses the fixed toolbars behavior, which allows you to display the tabs when you need them by tapping the screen.</p>
|
||||
<p>Also, the page header is a standard fixed toolbar that can bring you back to the previous page when you toggle its visibility.</p>
|
||||
|
||||
|
||||
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<h2>Header Level 2</h2>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
|
||||
|
||||
<h3>Header Level 3</h3>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ul>
|
||||
|
||||
<pre><code>
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<h1>HTML Ipsum Presents</h1>
|
||||
|
||||
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<h2>Header Level 2</h2>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
|
||||
|
||||
<h3>Header Level 3</h3>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ul>
|
||||
|
||||
<pre><code>
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<h1>HTML Ipsum Presents</h1>
|
||||
|
||||
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
|
||||
</div><!--/content-area-a-->
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="content-b">
|
||||
<h1>Content Panel B</h1>
|
||||
|
||||
<p>This page demonstrates the behavior for the tabs control. The tab navigation can either be inline with the content (for tabs within sub-sections of a page), or optionally as a global fixed footer for page-level tabs. This page demonstrates the latter. It uses the fixed toolbars behavior, which allows you to display the tabs when you need them by tapping the screen.</p>
|
||||
|
||||
<h2>Header Level 2</h2>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
|
||||
|
||||
<h3>Header Level 3</h3>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ul>
|
||||
|
||||
<pre><code>
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<h1>HTML Ipsum Presents</h1>
|
||||
|
||||
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<h2>Header Level 2</h2>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
|
||||
|
||||
<h3>Header Level 3</h3>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ul>
|
||||
|
||||
<pre><code>
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<h1>HTML Ipsum Presents</h1>
|
||||
|
||||
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<h2>Header Level 2</h2>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
|
||||
|
||||
<h3>Header Level 3</h3>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ul>
|
||||
|
||||
<pre><code>
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</div><!--/content-area-b-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="content-c">
|
||||
<h1>Content Panel C</h1>
|
||||
|
||||
<p>This page demonstrates the behavior for the tabs control. The tab navigation can either be inline with the content (for tabs within sub-sections of a page), or optionally as a global fixed footer for page-level tabs. This page demonstrates the latter. It uses the fixed toolbars behavior, which allows you to display the tabs when you need them by tapping the screen.</p>
|
||||
|
||||
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<h2>Header Level 2</h2>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
|
||||
|
||||
<h3>Header Level 3</h3>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ul>
|
||||
|
||||
<pre><code>
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<h1>HTML Ipsum Presents</h1>
|
||||
|
||||
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<h2>Header Level 2</h2>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
|
||||
|
||||
<h3>Header Level 3</h3>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ul>
|
||||
|
||||
<pre><code>
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<h1>HTML Ipsum Presents</h1>
|
||||
|
||||
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<h2>Header Level 2</h2>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ol>
|
||||
|
||||
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
|
||||
|
||||
<h3>Header Level 3</h3>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||
</ul>
|
||||
|
||||
<pre><code>
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
79
_tree.html
79
_tree.html
|
|
@ -1,79 +0,0 @@
|
|||
<?php /*gzip page*/ ob_start("ob_gzhandler"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Framework - Tree Example</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/all" />
|
||||
<script type="text/javascript" src="js/all"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-page">
|
||||
|
||||
<div class="ui-header ui-bar-a">
|
||||
<h1>Tree Example</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-content">
|
||||
|
||||
|
||||
<ul data-role="tree">
|
||||
<li><a href="#">Tree demo Description</a>
|
||||
<div class="ui-body-c"><div class="ui-body">
|
||||
<h2>Demo description</h2>
|
||||
<p>This tree starts as an unordered list. Content can be dropped into the list items (as it is here), pulled in through Ajax (as it is in the other nodes), or linked externally to navigate to a separate page. The tree is marked up with ARIA attrs and is keyboard accessible on the desktop.</p>
|
||||
</div></div>
|
||||
</li>
|
||||
<li><a href="#">My Documents</a>
|
||||
<ul>
|
||||
<li><a href="sample-content/license.html">License</a></li>
|
||||
<li class="hijax"><a href="sample-content/terms.html">Terms & Conditions</a></li>
|
||||
<li class="hijax"><a href="sample-content/travel.html">Travel Ideas</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">My Poems</a>
|
||||
<ul>
|
||||
<li class="hijax"><a href="sample-content/lebowski.html">The Big Lebowski</a></li>
|
||||
<li class="hijax"><a href="sample-content/planetearth.html">Planet Earth</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">My Documents</a>
|
||||
<ul>
|
||||
<li class="hijax"><a href="sample-content/license.html">License</a></li>
|
||||
<li class="hijax"><a href="sample-content/terms.html">Terms & Conditions</a></li>
|
||||
<li class="hijax"><a href="sample-content/travel.html">Travel Ideas</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">My Poems</a>
|
||||
<ul>
|
||||
<li class="hijax"><a href="sample-content/lebowski.html">The Big Lebowski</a></li>
|
||||
<li class="hijax"><a href="sample-content/planetearth.html">Planet Earth</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">My Documents</a>
|
||||
<ul>
|
||||
<li class="hijax"><a href="sample-content/license.html">License</a></li>
|
||||
<li class="hijax"><a href="sample-content/terms.html">Terms & Conditions</a></li>
|
||||
<li class="hijax"><a href="sample-content/travel.html">Travel Ideas</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">My Poems</a>
|
||||
<ul>
|
||||
<li class="hijax"><a href="sample-content/lebowski.html">The Big Lebowski</a></li>
|
||||
<li class="hijax"><a href="sample-content/planetearth.html">Planet Earth</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p>Testing to make sure content flows inline after tree...</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,194 +0,0 @@
|
|||
/*
|
||||
* jQuery Mobile Framework : prototype for "tabs" plugin (based on code from Filament Group,Inc)
|
||||
* Copyright (c) jQuery Project
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
|
||||
* Note: Code is in draft form and is subject to change
|
||||
*/
|
||||
(function($){
|
||||
$.fn.tabs = function(settings){
|
||||
//configurable options
|
||||
var o = $.extend({
|
||||
trackState: true,
|
||||
alwaysScrollToTop: true,
|
||||
fixedAsFooter: false
|
||||
},settings);
|
||||
|
||||
return $(this).each(function(){
|
||||
//reference to tabs container
|
||||
var tabs = $(this);
|
||||
|
||||
//set app mode
|
||||
$(this).attr('role','application');
|
||||
|
||||
//nav is first ul
|
||||
var tabsNav = tabs.find('ul:first');
|
||||
|
||||
//body is nav's next sibling
|
||||
var tabsBody = $(tabsNav.find('a:eq(0)').attr('href')).parent();
|
||||
|
||||
var tabIDprefix = 'ui-tab-';
|
||||
|
||||
var tabIDsuffix = '-enhanced';
|
||||
|
||||
//add class to nav, tab body
|
||||
tabsNav
|
||||
.addClass('ui-tabs-nav '+(o.fixedAsFooter?'ui-bar-a':'ui-bar-c'))
|
||||
.attr('role','tablist');
|
||||
|
||||
tabsBody
|
||||
.addClass('ui-tabs-body ui-body ui-body-c');
|
||||
|
||||
//find tab panels, add class and aria
|
||||
tabsBody.find('>div').each(function(){
|
||||
$(this)
|
||||
.addClass('ui-tabs-panel')
|
||||
.attr('role','tabpanel')
|
||||
.attr('aria-hidden', true)
|
||||
.attr('aria-labelledby', tabIDprefix + $(this).attr('id'))
|
||||
.attr('id', $(this).attr('id') + tabIDsuffix);
|
||||
});
|
||||
|
||||
//set role of each tab
|
||||
tabsNav.find('li').each(function(){
|
||||
$(this)
|
||||
.attr('role','tab')
|
||||
.attr('id', tabIDprefix+$(this).find('a').attr('href').split('#')[1]);
|
||||
})
|
||||
.width(100/tabsNav.find('li').length+'%');
|
||||
|
||||
|
||||
//switch selected on click
|
||||
tabsNav
|
||||
.find('a')
|
||||
.attr('tabindex','-1')
|
||||
.buttonMarkup({corners: false, iconPos: (o.fixedAsFooter?'top':'bottom'), icon: (o.fixedAsFooter?'arrow-u':'arrow-d')});
|
||||
|
||||
//generic select tab function
|
||||
function selectTab(tab,fromHashChange){
|
||||
if(o.trackState && !fromHashChange){
|
||||
pushState("tab", tab.attr("href"));
|
||||
}
|
||||
else{
|
||||
//unselect tabs
|
||||
tabsNav.find('li.ui-tabs-selected')
|
||||
.removeClass('ui-tabs-selected')
|
||||
.find('a')
|
||||
.removeClass('ui-btn-active')
|
||||
.attr('tabindex','-1');
|
||||
//set selected tab item
|
||||
tab
|
||||
.attr('tabindex','0')
|
||||
.addClass('ui-btn-active')
|
||||
.parent()
|
||||
.addClass('ui-tabs-selected');
|
||||
//unselect panels
|
||||
tabsBody.find('div.ui-tabs-panel-selected').attr('aria-hidden',true).removeClass('ui-tabs-panel-selected');
|
||||
//select active panel
|
||||
$( tab.attr('href') + tabIDsuffix ).addClass('ui-tabs-panel-selected').attr('aria-hidden',false);
|
||||
|
||||
if(o.fixedAsFooter){
|
||||
//window.scrollTo(0,0);
|
||||
$('.ui-fixed-top,.ui-fixed-bottom').trigger('overlayIn');
|
||||
setTimeout(function(){ $('.ui-fixed-top,.ui-fixed-bottom').trigger('setTop'); },100);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
tabsNav.find('a')
|
||||
.click(function(e){
|
||||
selectTab($(this));
|
||||
$(this).focus();
|
||||
return false;
|
||||
})
|
||||
.keydown(function(event){
|
||||
var currentTab = $(this).parent();
|
||||
var ret = true;
|
||||
switch(event.keyCode){
|
||||
case 37://left
|
||||
case 38://up
|
||||
if(currentTab.prev().size() > 0){
|
||||
selectTab(currentTab.prev().find('a'));
|
||||
currentTab.prev().find('a').eq(0).focus();
|
||||
ret = false;
|
||||
}
|
||||
break;
|
||||
case 39: //right
|
||||
case 40://down
|
||||
if(currentTab.next().size() > 0){
|
||||
selectTab(currentTab.next().find('a'));
|
||||
currentTab.next().find('a').eq(0).focus();
|
||||
ret = false;
|
||||
}
|
||||
break;
|
||||
case 36: //home key
|
||||
selectTab(tabsNav.find('li:first a'));
|
||||
tabsNav.find('li:first a').eq(0).focus();
|
||||
ret = false;
|
||||
break;
|
||||
case 35://end key
|
||||
selectTab(tabsNav.find('li:last a'));
|
||||
tabsNav.find('li:last a').eq(0).focus();
|
||||
ret = false;
|
||||
break;
|
||||
}
|
||||
return ret;
|
||||
});
|
||||
|
||||
//if tabs are rotating, stop them upon user events
|
||||
tabs.bind('click keydown focus',function(){
|
||||
if(o.autoRotate){ clearInterval(tabRotator); }
|
||||
});
|
||||
|
||||
//function to select a tab from the url hash
|
||||
function selectTabFromHash(hash){
|
||||
var currHash = hash || getState("tab");
|
||||
if(!currHash){ currHash = '';}
|
||||
var hashedTab = tabsNav.find('a[href=#'+ currHash.replace('#','') +']');
|
||||
if( hashedTab.size() > 0){
|
||||
selectTab(hashedTab,true);
|
||||
}
|
||||
else {
|
||||
selectTab( tabsNav.find('a:first'),true);
|
||||
}
|
||||
//return true/false
|
||||
return !!hashedTab.size();
|
||||
}
|
||||
|
||||
$(window).bind('hashchange',function(){
|
||||
var tab = getState("tab");
|
||||
if(tab){
|
||||
selectTabFromHash(tab,true);
|
||||
}
|
||||
else{
|
||||
selectTab( tabsNav.find('a:first'),true);
|
||||
}
|
||||
});
|
||||
|
||||
//set tab from hash at page load, if no tab hash, select first tab
|
||||
selectTabFromHash(null,true);
|
||||
|
||||
if(o.fixedAsFooter){
|
||||
var footer = $('.ui-footer', $(this).parents('.ui-page'));
|
||||
if(!footer.length){
|
||||
footer = $('<div class="ui-footer ui-bar-a"></div>').appendTo($(this).parents('.ui-page'));
|
||||
}
|
||||
tabsNav.prependTo(footer);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var curState = {};
|
||||
|
||||
function pushState( name, value ) {
|
||||
curState[ name ] = value;
|
||||
window.location.hash = jQuery.param( curState );
|
||||
}
|
||||
|
||||
function getState( name ) {
|
||||
var found = (new RegExp("(?:^|&)" + name + "=(.*?)(?:&|$)")).exec( window.location.hash );
|
||||
return found ? found[1] : null;
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -1,255 +0,0 @@
|
|||
/*
|
||||
* jQuery Mobile Framework : prototype for "tree" plugin (based on code from Filament Group,Inc)
|
||||
* Copyright (c) jQuery Project
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
|
||||
* Note: Code is in draft form and is subject to change
|
||||
*/
|
||||
(function($){
|
||||
$.fn.tree = function(settings){
|
||||
|
||||
return $(this).each(function(){
|
||||
var o = $.extend({
|
||||
expanded: '',
|
||||
theme: 'e',
|
||||
backBtnText: 'Back',
|
||||
liveBackText: false,
|
||||
loadingText: 'loading...',
|
||||
ajaxCallback: function(){
|
||||
$('.ui-body a:not(.ui-btn):not(.ui-link-inherit)').addClass('ui-link');
|
||||
tree.height($(this).outerHeight());
|
||||
}
|
||||
},settings);
|
||||
|
||||
if( !$(this).parents('.tree').length ){
|
||||
|
||||
//save references
|
||||
var tree = $(this),
|
||||
treeContain = tree.wrap('<div role="application" class="ui-tree-contain"></div>').parent(),
|
||||
treeheader = $('.ui-header'),
|
||||
prevHTML = treeheader.html();
|
||||
|
||||
//add the role and default state attributes
|
||||
tree.attr({'role': 'tree'}).addClass('ui-tree');
|
||||
|
||||
|
||||
tree.find('li').each(function(){
|
||||
if($(this).contents()[0].nodeType == 3){
|
||||
$(this).wrapInner('<div></div>');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//ajax placeholders
|
||||
tree.find('li.hijax>a').after('<div class="ui-body-c"></div>');
|
||||
//add classes to panel content so it'll be excluded
|
||||
tree.find('li>:not(ul,a)').addClass('ui-tree-panel');
|
||||
//add treeitem role to all li children
|
||||
tree.find('li').not('.ui-tree-panel *').attr('role','treeitem').addClass('ui-treeitem');
|
||||
//buttons from anchors
|
||||
tree.find('li.ui-treeitem>a').addClass('ui-treeitem-link').buttonMarkup({theme: o.theme, iconPos: 'right',icon: 'arrow-r',corners: false});
|
||||
//set first node's tabindex to 0
|
||||
tree.find('li.ui-treeitem>a:eq(0)').attr('tabindex','0');
|
||||
//set all others to -1
|
||||
tree.find('li.ui-treeitem>a:gt(0)').attr('tabindex','-1');
|
||||
//add group role and tree-group-collapsed class to all ul children
|
||||
tree.find('li.ui-treeitem>a').next().attr('role','group').addClass('ui-tree-group ui-tree-group-collapsed');
|
||||
|
||||
//find tree group parents
|
||||
tree.find('li.ui-treeitem:has(.ui-tree-group)').not('.ui-tree-panel *')
|
||||
.attr('aria-expanded', 'false')
|
||||
.find('>a')
|
||||
.addClass('ui-tree-parent ui-tree-parent-collapsed');
|
||||
|
||||
//expanded at load
|
||||
tree
|
||||
.find(o.expanded).not('.ui-tree-panel *')
|
||||
.attr('aria-expanded', 'true')
|
||||
.addClass('ui-tree-expanded')
|
||||
.find('>a')
|
||||
.removeClass('ui-tree-parent-collapsed')
|
||||
.next()
|
||||
.removeClass('ui-tree-group-collapsed');
|
||||
|
||||
//for setting up the back button header
|
||||
function setNavigation(targetLi){
|
||||
treeheader.find('.ui-back').remove();
|
||||
if(targetLi.length){
|
||||
targetA = targetLi.find('>a:eq(0)');
|
||||
var backText = o.liveBackText ? (targetLi.parents('li:eq(0)').find('>a:eq(0)').text() || o.backBtnText) : o.backBtnText;
|
||||
var bbutton = $('<a href="#" class="ui-back">'+ backText +'</a>')
|
||||
.appendTo(treeheader)
|
||||
.buttonMarkup({icon:'arrow-l'})
|
||||
.click(function(){
|
||||
targetLi.trigger('collapse');
|
||||
return false;
|
||||
});
|
||||
treeheader.find('h1').text(targetA.text());
|
||||
}
|
||||
else{
|
||||
treeheader.html(prevHTML);
|
||||
}
|
||||
}
|
||||
|
||||
//quick function for seeing if an event is tree-related and if so, getting all the elements related to event target
|
||||
function targetElements(event){
|
||||
if($(event.target).parents('.ui-tree-panel').length){
|
||||
return false;
|
||||
}
|
||||
else{
|
||||
var targetLi = $(event.target).closest('li'),
|
||||
targetA = targetLi.find('>a:eq(0)'),
|
||||
targetContent = targetA.next(),
|
||||
targetParent = targetLi.closest('ul'),
|
||||
targetParentLi = targetParent.closest('li');
|
||||
|
||||
return {
|
||||
targetLi: targetLi,
|
||||
targetA: targetA,
|
||||
targetContent: targetContent,
|
||||
targetParent: targetParent,
|
||||
targetParentLi: targetParentLi
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
//bind the custom events
|
||||
tree
|
||||
//expand a tree node
|
||||
.bind('expand.tree',function(event){
|
||||
var et = targetElements(event);
|
||||
if(!et){ return; }
|
||||
var et = targetElements(event);
|
||||
|
||||
//ajax content in if necessary
|
||||
et.targetContent.filter(':empty').append('<p class="ui-tree-content-loading"><span class="ui-icon ui-icon-loading"></span><span class="ui-tree-loading-text">'+ o.loadingText +'</span></p>').load(et.targetA.attr('href'), o.ajaxCallback);
|
||||
|
||||
et.targetA.removeClass('ui-tree-parent-collapsed');
|
||||
et.targetLi.attr('aria-expanded', 'true');
|
||||
et.targetContent.removeClass('ui-tree-group-collapsed');
|
||||
et.targetParent.addClass('ui-tree-expanded');
|
||||
setNavigation(et.targetLi);
|
||||
et.targetLi.find('li>a:eq(0)').focus(); //note - this should be tighter in scope
|
||||
tree.height('');
|
||||
tree.height(et.targetContent.outerHeight());
|
||||
event.stopPropagation();
|
||||
})
|
||||
//collapse a tree node
|
||||
.bind('collapse.tree',function(event){
|
||||
var et = targetElements(event);
|
||||
if(!et){ return; }
|
||||
et.targetA.addClass('ui-tree-parent-collapsed');
|
||||
et.targetLi.attr('aria-expanded', 'false');
|
||||
setTimeout(function(){ et.targetContent.addClass('ui-tree-group-collapsed'); },300);
|
||||
et.targetParent.removeClass('ui-tree-expanded');
|
||||
setNavigation(et.targetParentLi);
|
||||
et.targetA.focus();
|
||||
tree.height('');
|
||||
tree.height(et.targetParent.outerHeight() || tree.outerHeight());
|
||||
event.stopPropagation();
|
||||
})
|
||||
.bind('toggle.tree',function(event){
|
||||
var et = targetElements(event);
|
||||
if(!et){ return; }
|
||||
et.targetLi.trigger(et.targetLi.is('[aria-expanded=false]') ? 'expand' : 'collapse');
|
||||
event.stopPropagation();
|
||||
})
|
||||
//shift focus down one item
|
||||
.bind('traverseDown.tree',function(event){
|
||||
var et = targetElements(event);
|
||||
if(!et){ return; }
|
||||
if(et.targetLi.is('[aria-expanded=true]')){
|
||||
et.targetContent.find('a').eq(0).focus();
|
||||
}
|
||||
else if(et.targetLi.next().length) {
|
||||
et.targetLi.next().find('a').eq(0).focus();
|
||||
}
|
||||
else {
|
||||
et.targetParentLi.next().find('a').eq(0).focus();
|
||||
}
|
||||
event.stopPropagation();
|
||||
})
|
||||
//shift focus up one item
|
||||
.bind('traverseUp.tree',function(event){
|
||||
var et = targetElements(event);
|
||||
if(!et){ return; }
|
||||
if(et.targetLi.prev().length){
|
||||
if( et.targetLi.prev().is('[aria-expanded=true]') ){
|
||||
et.targetLi.prev().find('li:visible:last a').eq(0).focus();
|
||||
}
|
||||
else{
|
||||
et.targetLi.prev().find('>a:eq(0)').focus();
|
||||
}
|
||||
}
|
||||
else {
|
||||
et.targetParentLi.find('>a:eq(0)').trigger('collapse');
|
||||
}
|
||||
event.stopPropagation();
|
||||
})
|
||||
//native events
|
||||
.bind('focus.tree',function(event){
|
||||
var et = targetElements(event);
|
||||
if(!et){ return; }
|
||||
//deactivate previously active tree node, if one exists
|
||||
tree.find('[tabindex=0]').blur().attr('tabindex','-1').removeClass('ui-treeitem-active');
|
||||
//assign 0 tabindex to focused item
|
||||
et.targetA.attr('tabindex','0').addClass('ui-treeitem-active');
|
||||
})
|
||||
.bind('click.tree',function(event){
|
||||
var et = targetElements(event);
|
||||
if(!et){ return; }
|
||||
//check if target is a tree node
|
||||
if( et.targetLi.is('[aria-expanded]') ){
|
||||
et.targetLi.trigger('toggle.tree');
|
||||
et.targetA.focus();
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.bind('keydown.tree',function(event){
|
||||
var et = targetElements(event);
|
||||
if(!et){ return; }
|
||||
//check for arrow keys
|
||||
if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40){
|
||||
//if key is left arrow
|
||||
if(event.keyCode == 37){
|
||||
//if list is expanded
|
||||
if(et.targetLi.is('[aria-expanded=true]')){
|
||||
et.targetLi.trigger('collapse');
|
||||
}
|
||||
//try traversing to parent
|
||||
else {
|
||||
et.targetParentLi.find('>a:eq(0)').trigger('collapse');
|
||||
}
|
||||
}
|
||||
//if key is right arrow
|
||||
if(event.keyCode == 39){
|
||||
//if list is collapsed
|
||||
if(et.targetLi.is('[aria-expanded=false]')){
|
||||
et.targetLi.trigger('expand');
|
||||
}
|
||||
//try traversing to child
|
||||
else {
|
||||
et.targetLi.find('li.ui-treeitem>a:eq(0)').focus();
|
||||
}
|
||||
}
|
||||
//if key is up arrow
|
||||
if(event.keyCode == 38){
|
||||
et.targetLi.trigger('traverseUp');
|
||||
}
|
||||
//if key is down arrow
|
||||
if(event.keyCode == 40){
|
||||
et.targetLi.trigger('traverseDown');
|
||||
}
|
||||
//return any of these keycodes false
|
||||
return false;
|
||||
}
|
||||
//check if enter or space was pressed on a tree node
|
||||
else if((event.keyCode == 13 || event.keyCode == 32) && target.is('a.ui-tree-parent')){
|
||||
et.targetLi.trigger('toggle');
|
||||
//return click event false because it's a tree node (folder)
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
Loading…
Reference in a new issue