Set up some INCEPTION-style fetchlink demos within fetchlink demos, which aren’t quite functional yet.

This commit is contained in:
Mat Marquis 2011-12-16 18:26:22 -05:00
parent 5d0f2abf65
commit 4491d5151c
9 changed files with 38 additions and 25 deletions

View file

@ -24,6 +24,18 @@
<div class="content-primary">
<p>Fetchlinks! Man. What <em>cant</em> they do?</p>
<div data-role="controlgroup" data-target=".target" data-fragment="[data-role='content']">
<a href="fetch-tabs.html" data-role="button">Tabs</a>
<a href="pix-2.html" data-role="button">Demo 2</a>
<a href="pix-3.html" data-role="button">Demo 3</a>
</div>
<a href="fetch-tabs.html" data-role="fetchlink" data-target=".target">Demo 1</a>
<div class="target">
</div>
</div><!--/content-primary -->
<div class="content-secondary">

View file

@ -6,7 +6,7 @@
<title>jQuery Mobile Framework - Fetch links</title>
<link rel="stylesheet" href="../../../css/themes/default/" />
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../../_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
@ -26,8 +26,8 @@
<h3>Alone at the beach</h3>
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
<a href="pix-6.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-2.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
<a href="pix-6.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-2.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>

View file

@ -23,11 +23,11 @@
<div class="pix-tray">
<h3>Flower patch</h3>
<h3>Flower patch</h3>
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
<a href="pix-1.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-3.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
<a href="pix-1.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-3.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>

View file

@ -26,8 +26,8 @@
<h3>Looking back</h3>
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
<a href="pix-2.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-4.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
<a href="pix-2.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-4.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>

View file

@ -26,8 +26,8 @@
<h3>Station</h3>
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
<a href="pix-3.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-5.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
<a href="pix-3.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-5.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>

View file

@ -26,8 +26,8 @@
<h3>Barn lines</h3>
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
<a href="pix-4.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-6.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
<a href="pix-4.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-6.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>

View file

@ -26,8 +26,8 @@
<h3>Dark car</h3>
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
<a href="pix-5.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-1.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
<a href="pix-5.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
<a href="pix-1.html" data-role="button" data-target=".pix-wrapper" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>

View file

@ -5,23 +5,25 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
initSelector: ":jqmData(target)"
},
_create: function() {
$( this.element )
var self = $( this.element ),
target = self.attr( "href" ) ? self : self.find( "a" ).not( ":jqmData(role='fetchlink')" );
target
.click(function() {
var el = $( this ),
url = el.attr( "href" ),
target = el.data( "target" ),
targetEl = target && $( target ) || el,
fragment = el.data( "fragment" ),
target = self.data( "target" ),
targetEl = target && $( target ) || self,
fragment = self.data( "fragment" ),
load = fragment || ":jqmData(role='page')",
threshold = screen.width > parseInt( el.data( "breakpoint" ) || 0 ),
methods = [ "append", "prepend", "replace", "before", "after" ],
method = "html",
url;
if ( threshold ) {
for( var ml = methods.length, i=0; i < ml; i++ ){
for( var ml = methods.length, i = 0; i < ml; i++ ){
if( el.is( "[data-include='" + methods[ i ] + "']" ) ){
method = methods[ i ];
}
@ -53,7 +55,6 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
$el.attr( attr, $.mobile.path.parseUrl( url ).directory + oPath );
});
};
normalizePath( 'img', 'src' );
@ -70,7 +71,7 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
.removeClass('ui-loading-inline')
.height('auto');
}, 300);
});
});
}
}
return false;

View file

@ -1211,7 +1211,7 @@
}
// The base URL for any given element depends on the page it resides in.
$.mobile.getClosestBaseUrl = function( ele )
function getClosestBaseUrl( ele )
{
// Find the closest page and extract out its url.
var url = $( ele ).closest( ".ui-page" ).jqmData( "url" ),