独自のカスタム タブ コンテンツ スクリプトを作成しましたが、うまく機能します。欠けている唯一のものは、さまざまなセクションをブックマークできることです.
URL を何らかの方法で書き直す必要があることはわかっています。現在、preventDefault を使用してページの更新を停止していますが、これにより URL の変更も停止されます。
また、URL を手動で書き直そうとしましたが、入力された URL を検出するためになんらかの形式のフックが必要であると思われるため、何も起こりません。
前もってありがとう、ヘンリー。
編集: Javascript: http://pastebin.com/1yhzxkUi HTML: http://pastebin.com/WH1CbRZJ
ページ上のAJAX操作に合わせてURLを変更することについて話している場合、私は現在同様のことを行っています。
http://www.asual.com/jquery/address/をご覧ください
これはjQueryのプラグインであり、タブなどを変更するときにアドレスナビゲーションボタンを機能させ続けるのに役立ちます（または、履歴に影響を与えることなくURLを変更するだけで済みます）。
URLが外部（つまり、アドレスを貼り付けている人）または内部で変更されたときにフックするイベントがあります。次に、パラメータから値を取得し、それに応じて更新できます。
簡単な使用例：
// Sets the tabId
$.address.parameter("tabId", tabId);
// Sets up the event to catch the URL parameter
$.address.externalChange(function(event) {
var tabId = $.address.parameter("tabId");
if(tabId){
$("#tab" + tabId).show();
}
});
ページの履歴を保存するには、最も一般的でフル機能/サポートされている方法は、ハッシュ変更を使用することです。これは、あなたが移動すると、その変更を追跡できることyoursite/page.html#page1を意味しyoursite/page.html#page2、ハッシュを使用しているため、ブックマークと前後のボタンで取得できます。
jQuery History プロジェクトhttp://www.balupton.com/projects/jquery-historyを使用して、ハッシュの変更にバインドする優れた方法を見つけることができます 。
フル機能の AJAX 拡張もあり、Ajax リクエストを状態/ハッシュに簡単に統合して、Web サイトをフル機能の Web 2.0 アプリケーションに変換できます: http://www.balupton.com/projects/jquery-ajaxy
どちらも、何が起こっているのか、何が起こっているのかを説明するために、デモ ページで優れたドキュメントを提供しています。
jQuery History の使用例を次に示します (デモ サイトから取得)。
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
// Update the current element to indicate which state we are now on
$current.text('Our current state is: ['+state+']');
// Update the page"s title with our current state on the end
document.title = document_title + ' | ' + state;
});
// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
// Update Menu
updateMenu(state);
// Show apricots tab, hide the other tabs
$tabs.hide();
$apricots.stop(true,true).fadeIn(200);
});
jQuery Ajaxy の例 (デモ サイトから取得):
'page': {
selector: '.ajaxy-page',
matches: /^\/pages\/?/,
request: function(){
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
// Adjust Menu
$menu.children('.active').removeClass('active');
// Hide Content
$content.stop(true,true).fadeOut(400);
// Return true
return true;
},
response: function(){
// Prepare
var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
// Adjust Menu
$menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
// Show Content
var Action = this;
$content.html(data.content).fadeIn(400,function(){
Action.documentReady($content);
});
// Return true
return true;
そして、クエリ文字列のパラメータを取得したい場合は（そうyoursite/page.html#page1?a.b=1&a.c=2）、次のように使用できます。
$.History.bind(function(state){
var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}
これらのデモ リンクをチェックして、実際の動作を確認し、すべてのインストールと使用方法の詳細を確認してください。
編集:コードを確認したら、jQuery History で使用するために必要な作業はこれだけです。
変化する：
$('.tabbed_content .tabs li a').live('click',
function (e){
e.preventDefault();
switchTab($(this));
});
に：
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
switchTab(state);
});
または、他の領域にも jQuery History を使用する予定がある場合は、すべてのハッシュではなく、タブに対してのみ switchTab を呼び出すようにします。
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
if ( $('.tabbed_content > .content > li[id='+state+']').length ) switchTab(state);
});
onclick イベントを使用しなくなりました。代わりに、hashchange を検出する jQuery History にバインドします。これは理解すべき最も重要な概念です。たとえば、サイトをブックマークしてから戻ったとしても、クリックしたことはありません。代わりに、クリックを変更してハッシュ変更にバインドします。クリックしたり、ブックマークしたり、前後に移動したりすると、ハッシュ変更が常に発生します:-)
このプラグインをいつでも確認できます: jQuery BBQ (戻るボタンとクエリ) を使用して、Facebook のように #hash をブックマークに追加します。
ハッシュ リンクを使用すると、ページをリロードする代わりに、ブックマーク可能/共有可能なリンクで JavaScript コードをトリガーできます。Ben Almans jQuery hashchange イベントを使用すると、イベント ハンドラーを hashchange イベントにバインドできます。このプラグインは、これを通常サポートしていない古いブラウザーで動作します。hashchange にバインドされたイベント ハンドラーは、URL のハッシュ部分を読み取り、任意の関数を呼び出すことができます。
// register event handler
function bindHashchange() {
$(window).bind('hashchange', function(event) {
event.preventDefault();
var label = location.hash.substring(1);
handleLabel(label);
});
// trigger event so handler will be run when page is opened first time
// otherwise handler will only run when clicking on hash links
$(window).trigger('hashchange');
}
// read and handle hash part of url
function handleLabel(label) {
if ( label.length > 0 ) {
// using label from url
switchPage(label);
} else {
// use the default label, if no hash link was present
switchPage('start');
}
}
// in this case, load hidden <div>'s into a <div id="content">
function switchPage(label) {
if ( label == 'start ) {
$('div#content').html($('div#start'));
} else if ( label == 'some_other_page' ) {
// do something else
}
}
この他のイベント ハンドラーは、同じ URL 内のドット ('.') で区切られた 2 つの引数を処理できます。
function processHash() {
var str = location.hash.substring(1);
var pos = $.inArray('.', str);
var label = '';
var arg = '';
if ( pos > -1 ) {
label = str.substring(0, pos);
} else {
label = str.substring(0);
}
if ( pos > 1 ) {
arg = str.substring(pos+1);
}
if ( label.length == 0 ) {
// the default page to open of label is empty
loadContent('start');
} else {
// load page, and pass an argument
loadContent(label, arg);
}
}
正規表現を使用すると、任意の文字の組み合わせを解析できます。
var registry = {};
// split on character '.'
var args = label.split(/\./g);
for ( i in args ) {
var arg = args[i];
// split on character '='
var temp = arg.split('=');
var name = temp[0];
var value = temp[1];
// store argument in registry
registry[name] = value;
}
// registry is loaded, ready to run application that depends on arguments
これにより、URL が変換されます。
mysite/#company.page=items.color=red
次の JavaScript オブジェクトに:
オブジェクト { company=undefined, page="items", color="red"}
次に、選択した要素に対して jQuery の show() または hide() 関数を実行するだけです。
これを jQuery 以外の JavaScript に変換することはできますが、移植可能なソリューションにとって重要な Ben Alman が提供する機能を失うことになります。