JQuery выкарыстоўвае барбекю HTML5 падзеі hashchange каб просты, але магутны bookmarkable # хэш гісторыі. Акрамя таго, JQuery барбекю дае поўны. Deparam () метад, а таксама як хэш-дзяржаўнага кіравання, а таксама фрагмент/запыту разабраць радок і аб'яднаць метады ўтыліты.
Гэты убудова і JQuery urlInternal плягін замяняе URL Утыліты плагіна.
Заўвага: Калі вы карыстаецеся JQuery 1.3.2 або больш ранняй версіі і неабходнасць барбекю аб'яднаць радок запыту або фрагмент Params якія змяшчаюць [], вы хочаце ўключыць JQuery 1,4 .param метаду ў кодзе.
Акрамя таго, мой артыкул падрыхтоўкі барбекю: арыгінальны рэцэпт дае гісторыя JQuery барбекю разам з некаторымі плягін аўтарская кіруючыя прынцыпы, калі вы зацікаўленыя.
Хоць гэты кароткі агляд дасць вам шырокімі мазкамі, для спецыфікі вы павінны глядзець на асноўных прыкладах ніжэй, чытаць дакументацыю, і праверыць поўны прыкладаў, пералічаных вышэй.
a[href], img[src], form[action], і г.д.) у некалькі элементаў, зліцця любы URL плюс радок запыту або фрагмент Params ў аб'ект, Params радкі або другой URL ( у тым ліку бягучае месцазнаходжанне дакумента)-ў новы URL, якая затым ўстанаўліваецца ў гэты атрыбут. Выкарыстоўвалі Ці вы JQuery барбекю ў праект, сайт, артыкула ці падручніка? Дазвольце мне ведаць, і я буду згадваць яго тут!
Уявіце сабе тры сцэнарыя. Цяпер уявіце, што зоркі сцерці...
У першым выпадку, у вас ёсць адзін віджэт на старонцы. Можа быць, старонка віджэт, што заўгодна. У любым выпадку, гэта настолькі проста, што кожны гісторыі плягін можа гэта зрабіць (у тым ліку JQuery барбекю):
<Widget> Yo, хэш, абнаўлення стану з гэтага радка.
<Hash> Няма задачы, чувак, зроблена. Вядома, ваша дзяржава прымае на сябе ўвесь хэш, але тое, што ты разумееш, што ты адзіны віджэт на старонцы!
<Widget> Але я так самотны.
<Hash> Няўдачы, малыш. Там толькі нумар у гэты хэш для аднаго дзяржавы.
У наступны сцэнар, у вас ёсць некалькі віджэтаў на старонцы. І, на жаль, таму што гісторыя распрацоўшчык плагіна не забяспечвае лёгкі спосаб кіраваць некалькімі, асобныя, асобных дзяржаў адначасова, віджэты павінны быць некалькі вядома аб існаванні адзін аднаго, так што яны не выпадкова сцерці адзін аднаго дзяржавы ў хэш :
<Widget> Yo, хэш.. Мне трэба, каб абнавіць параметры стану. Whatcha атрымалі там?
<Hash> Радковае прадстаўленне вашага дзяржавы, а таксама, магчыма, некаторыя іншыя, я не ўпэўнены. Якая розніца. Тут я ісці!
<Widget> Нічога сабе, што ўпэўнены, утрымлівае шмат матэрыялу, я не клапачуся аб.. Але праца ў працу, ці не так?
<Widget> Так, перш за ўсё дазвольце мне зразумець, дзе мае параметры. Добра, права.. Пачакайце! Я думаю, некаторыя іншыя параметры віджэту ў тут! Ок. Давайце паглядзім, дадайце туды, праводзіць адзін.. вялікая, што, здаецца, працуе цяпер.
<Widget> Ну, хэш, вось новае стан. Я ўставіў сваю параметры там побач з усімі іншымі параметрамі, якія былі там. Ці, можа быць, я гэтага не зрабіў. Я не ведаю, гэта, верагодна, працуе.
<Widget2> Ты кажаш мне, я павінен рабіць усё, што занадта? 404 хлопцаў, я сышоў.
У гэтым апошнім сцэнарыі, у той час Ёсць некалькі віджэтаў на той жа старонцы, кожны з іх можа атрымліваць і ўсталёўваць уласнае дзяржава вельмі лёгка, таму што гісторыя плягін можа deparameterize любы фрагмент аснове Params радок у яго складовыя часткі лёгка, то зліццё замены Params у, і абнаўленне:
<Widget> Yo, хэш, абнавіць параметры стану.
<Hash> Няма задачы, чувак, зроблена. І вы нават не павінны ведаць пра параметры, што і іншыя віджэты, я проста аб'яднаць іх там для вас.
<Widget> Там іншая віджэт?
<Widget2> А? Хтосьці сказаў маё імя?
У выпадку, калі Вы яшчэ не здагадаліся, JQuery барбекю дапаможа вам зрабіць усё гэта лёгкі шлях.
У наступных прыкладах, jQuery.deparam выкарыстоўваецца для десериализации Params радкоў, створаных з дапамогай убудаваных у jQuery.param метад. Ад'езд прыклад старонкі jQuery.deparam і дакументацыі для атрымання дадатковай інфармацыі.
// Serializing a params string using the built-in jQuery.param method.
// myStr is set to "a=1&b=2&c=true&d=hello+world"
var myStr = $.param({ a:1, b:2, c:true, d:"hello world" });
// Deserialize the params string into an object.
// myObj is set to { a:"1", b:"2", c:"true", d:"hello world" }
var myObj = $.deparam( myStr );
// Deserialize the params string into an object, coercing values.
// myObj is set to { a:1, b:2, c:true, d:"hello world" }
var myObj = $.deparam( myStr, true );
// Deserialize jQuery 1.4-style params strings.
// myObj is set to { a:[1,2], b:{ c:[3], d:4 } }
var myObj = $.deparam( "a[]=1&a[]=2&b[c][]=3&b[d]=4", true );
jQuery.deparam.querystring і jQuery.deparam.fragment метады могуць быць выкарыстаны для аналізу Params радкоў з любога URL, у тым ліку бягучы дакумент. Поўная інфармацыя выкарыстанне наяўных у дакументацыі.
// Deserialize current document query string into an object.
var myObj = $.deparam.querystring();
// Deserialize current document fragment into an object.
var myObj = $.deparam.fragment();
// Parse URL, deserializing query string into an object.
// myObj is set to { a:"1", b:"2", c:"hello" }
var myObj = $.deparam.querystring( "/foo.php?a=1&b=2&c=hello#test" );
// Parse URL, deserializing fragment into an object.
// myObj is set to { a:"3", b:"4", c:"world" }
var myObj = $.deparam.fragment( "/foo.php?test#a=3&b=4&c=world" );
jQuery.param.querystring і jQuery.param.fragment метады могуць быць выкарыстаны для звароту нармаванай радкі запыту або фрагмент з бягучага дакумента або паказаным URL-адрасе. Поўная інфармацыя выкарыстанне наяўных у дакументацыі.
// Return the document query string (similar to location.search, but with // any leading ? stripped out). var qs = $.param.querystring(); // Return the document fragment (similar to location.hash, but with any // leading # stripped out. The result is *not* urldecoded). var hash = $.param.fragment(); // Parse URL, returning the query string, stripping out the leading ?. // qs is set to "a=1&b=2&c=3" var qs = $.param.querystring( "/index.php?a=1&b=2&c=3#hello-world" ); // Parse URL, returning the fragment, stripping out the leading #. // hash is set to "hello-world" var hash = $.param.fragment( "/index.php?a=1&b=2&c=3#hello-world" );
jQuery.param.querystring і jQuery.param.fragment метады могуць быць таксама выкарыстаны для зліцця Params радок або аб'ект у існуючы URL. Поўная інфармацыя аб выкарыстанні і аб'яднаць варыянты даступныя ў дакументацыі.
var url = "http://example.com/file.php?a=1&b=2#c=3&d=4",
paramsStr = "a=5&c=6",
paramsObj = { a:7, c:8 };
// Build URL, merging params_str into url query string.
// newUrl is set to "http://example.com/file.php?a=5&b=2&c=6#c=3&d=4"
var newUrl = $.param.querystring( url, paramsStr );
// Build URL, merging params_obj into url query string.
// newUrl is set to "http://example.com/file.php?a=7&b=2&c=8#c=3&d=4"
var newUrl = $.param.querystring( url, paramsObj );
// Build URL, merging params_str into url fragment.
// newUrl is set to "http://example.com/file.php?a=1&b=2#a=5&c=6&d=4"
var newUrl = $.param.fragment( url, paramsStr );
// Build URL, merging params_obj into url fragment.
// newUrl is set to "http://example.com/file.php?a=1&b=2#a=7&c=8&d=4"
var newUrl = $.param.fragment( url, paramsObj );
// Build URL, overwriting url fragment with new fragment string.
// newUrl is set to "index.php#/path/to/file.php"
var newUrl = $.param.fragment( "index.php", "/path/to/file.php", 2 );
jQuery.fn.querystring і jQuery.fn.fragment метады выкарыстоўваюцца для зліцця Params радок або аб'ект у існуючы URL, у адпаведных выбраныя элементы "URL атрыбут" (г.зн. a[href], img[src], form[action], і г.д.). Поўная інфармацыя аб выкарыстанні і аб'яднаць варыянты, а таксама пералік элементаў "па змаўчанні ўсе" URL атрыбуты "можна ў дакументацыі.
// Merge a=1 and b=2 into the `href` attribute's URL's query string,
// for every `a` element.
$("a").querystring({ a:1, b:2 });
// Completely replace the `href` attribute's URL's query string with
// "a=1&b=2", for every `a` element.
$("a").querystring( "a=1&b=2", 2 );
// Completely replace the `href` attribute's URL's fragment with
// "new-fragment", for every `a` element.
$("a").fragment( "new-fragment", 2 );
// Merge the current document's query string params into every
// `a[href]` and `form[action]` attribute, but don't
// propagate the "foo" parameter.
var qsObj = $.deparam.querystring();
delete qsObj.foo;
$("a, form").querystring( qsObj );
JQuery выкарыстоўвае барбекю hashchange падзеі плягін для стварэння нармаваныя, крос-браузерные window.onhashchange падзей, які дазваляе вельмі магутны, але просты ў выкарыстанні location.hash стан/гісторыі і закладак. Ад'езд асноўны hashchange, перадавыя hashchange і JQuery UI іншыя гісторыі і закладак прыклады, а таксама дакументацыі для атрымання дадатковай інфармацыі.
// Be sure to bind to the "hashchange" event on document.ready, not
// before, or else it may fail in IE6/7. This limitation may be
// removed in a future revision.
$(function(){
// Override the default behavior of all `a` elements so that, when
// clicked, their `href` value is pushed onto the history hash
// instead of being navigated to directly.
$("a").click(function(){
var href = $(this).attr( "href" );
// Push this URL "state" onto the history hash.
$.bbq.pushState({ url: href });
// Prevent the default click behavior.
return false;
});
// Bind a callback that executes when document.location.hash changes.
$(window).bind( "hashchange", function(e) {
// In jQuery 1.4, use e.getState( "url" );
var url = $.bbq.getState( "url" );
// In this example, whenever the event is triggered, iterate over
// all `a` elements, setting the class to "current" if the
// href matches (and removing it otherwise).
$("a").each(function(){
var href = $(this).attr( "href" );
if ( href === url ) {
$(this).addClass( "current" );
} else {
$(this).removeClass( "current" );
}
});
// You probably want to actually do something useful here..
});
// Since the event is only triggered when the hash changes, we need
// to trigger the event now, to handle the hash the page may have
// loaded with.
$(window).trigger( "hashchange" );
});
Калі ў вас ёсць якія-то не-памылка звязаных водгукі і прапановы, калі ласка, дайце мне ведаць, ніжэй у каментарах, і калі ў вас ёсць нейкія паведамленні пра памылку, калі ласка, паведаміце пра іх у трэкера пытанні, дзякуй!
Я хачу падзякаваць Пола ірландскіх і Іегуда Кац за дапамогу іх перапрацоўкі JQuery барбекю API, а таксама Brandon Aaron для тлумачэння часткі jQuery.event.special API для мяне і далі мне прыклад кода, на якім я заснаваны hashchange падзеі плягін. Я таксама хачу падзякаваць усіх, у # JQuery канал IRC на irc.freenode.net для ўсіх іх прапаноў і энтузіязм!
Popular Links