From c37d5dc522c8488984e8c5a0c5d42e3fccf9bb31 Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Wed, 30 Nov 2011 18:20:08 -0500 Subject: [PATCH] =?UTF-8?q?Widgetfactory=E2=80=99d=20the=20fetchlink=20plu?= =?UTF-8?q?gin;=20continued=20tinkering.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/ajaxinclude.html | 75 --------------------------------- docs/pages/dialog.html | 3 +- js/index.php | 2 +- js/jquery.mobile.ajaxinclude.js | 47 --------------------- js/jquery.mobile.collapsible.js | 2 +- 5 files changed, 4 insertions(+), 125 deletions(-) delete mode 100644 docs/pages/ajaxinclude.html delete mode 100644 js/jquery.mobile.ajaxinclude.js diff --git a/docs/pages/ajaxinclude.html b/docs/pages/ajaxinclude.html deleted file mode 100644 index fccb1452..00000000 --- a/docs/pages/ajaxinclude.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - jQuery Mobile Framework - Dialog Example - - - - - - - - - - -
-
- -

AJAX Fetch Links

-

A standard link with a href pointing to a local anchor (#foo) or external page (foo.html) will trigger a full animated page change via the AJAX nav system with the default transition.

-
<a href="dialog.html">Link</a>
-
- -

A dialog is made by adding data-rel="dialog" to a link to display the page with an inset appearance and the default dialog transition.

-
<a href="dialog.html" data-rel="dialog">Link</a>
-
- -

A fetch link is created by adding the data-target attribute to a link. This tells the framework to not change pages and instead load the href into the target DOM element on the current page when the link is clicked. The target can be any jQuery selector (or restrict to ID only?).

- -
<a href="dialog.html" data-target=".quote">
-
- -

The target method for a link can be specified by adding the data-method attribute to a link. This specifies whether to replace, append, prepend, or insert the content before or after the target element. By default, an external href will replace the target.

- -
<a href="dialog.html" data-target=".quote" data-method="append">
-
- -

The content fragment from the loaded page can be specified. By default, the framework will load in the contents of the data-role="page" container, but it's possible to specify a what content from the page to pull into the target by adding a data-fragment attribute to the link with any jQuery selector.

- -
<a href="dialog.html" data-target=".quote" data-fragment="#content">
-
- -

A breakpoint option will automatically load the fetch link if the screen width is larger than the specified value instead of waiting for the link to be clicked. The data-breakpoint attribute on the link specifies the min-width pixel value to load the link.

- -
<a href="dialog.html" data-target=".quote" data-breakpoint="500">
-
- - -

Local Fetch Links

-

Similar to above but examples use local hrefs (#foo) and there isn't a need for a data-fragment attribute since we're already specifying that in the href.

- - -
-

“You will not apply my precept,” he said, shaking his head. “How often have I said to you that when you have eliminated the impossible, whatever remains, however improbable, must be the truth?”

-
Arthur Conan Doyle
- Sherlock Holmes: The Sign of the Four -
- - - Link - -
-

To be replaced.

-
- -
- - - -
- - - - \ No newline at end of file diff --git a/docs/pages/dialog.html b/docs/pages/dialog.html index a8dcfbf6..7de20a01 100644 --- a/docs/pages/dialog.html +++ b/docs/pages/dialog.html @@ -13,6 +13,7 @@ +
@@ -20,7 +21,7 @@
-
+

Delete page?

This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.

Sounds good diff --git a/js/index.php b/js/index.php index 7976fcfb..95177d04 100644 --- a/js/index.php +++ b/js/index.php @@ -36,7 +36,7 @@ $files = array( 'jquery.mobile.links.js', 'jquery.mobile.fixHeaderFooter.js', 'jquery.mobile.fixHeaderFooter.native.js', - 'jquery.mobile.ajaxinclude.js', + 'jquery.mobile.fetchlink.js', 'jquery.mobile.popup.js', 'jquery.mobile.init.js' ); diff --git a/js/jquery.mobile.ajaxinclude.js b/js/jquery.mobile.ajaxinclude.js deleted file mode 100644 index 74298960..00000000 --- a/js/jquery.mobile.ajaxinclude.js +++ /dev/null @@ -1,47 +0,0 @@ -( function( $, undefined ) { - $.fn.ajaxInclude = function( e ) { - return this.each(function() { - var el = $( this ), - url = el.attr( 'href' ), - target = el.data( "target" ), - targetEl = target && $( target ) || el, - load = el.data( "fragment" ), - threshold = screen.width > parseInt( el.data( "breakpoint" ) || 0 ), - methods = [ "append", "prepend", "replace", "before", "after" ], - method = "replace", - url; - - if ( threshold ) { - for( var ml = methods.length, i=0; i < ml; i++ ){ - if( el.is( "[data-include='" + methods[ i ] + "']" ) ){ - method = methods[ i ]; - } - } - - if ( method === "replace" ){ - method += "With"; - } - - if ( url && method ){ - $.get( url, function( data ) { - /* Swiped from the jQuery core; $.get() should really be replaced by .load() */ - var rscript = /)<[^<]*)*<\/script>/gi, - responseEl = $( load ? $("
").append( data.replace( rscript, "" ) ).find( load ) : data ), - eTarget = method === "replaceWith" || !method ? responseEl : el; - - $( load ).remove(); - targetEl[ method ]( responseEl ) - - eTarget.trigger( "ajaxInclude", [eTarget, data] ); - }); - } - - } - }); - }; - - $( function(){ - $("[data-include]").ajaxInclude(); - }); - -})(jQuery); \ No newline at end of file diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 71d3cdaf..41f31ec2 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -111,7 +111,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { }); //auto self-init widgets -$( document ).bind( "pagecreate create", function( e ){ +$( document ).bind( "pagecreate create", function( e ){ $( $.mobile.collapsible.prototype.options.initSelector, e.target ).collapsible(); });