これでツリーは成長し、より強く成長し、古くなり、選択したノードと各ノードの状態を個別に記憶します。
ページをリロードすることができ、ツリーはあなたが開いて選択したものすべてをまだ覚えています！
Cookieおよびjquery.cookies.jsプラグインは、状態を保存するために使用されます。 クッキーの使用は非常に簡単です。
HTMLの準備
基本条件を満たしている場合、ツリーは機能します。この形式でhtmlを配置します。
< div id ="multi-derevo" >
< h4 >< a href ="#" > </ a ></ h4 >
< ul >
< li >< span >< a href ="#1" > 1. </ a ></ span >
< ul >
< li >< span >< a href ="#11" > 1.1. </ a ></ span >
< ul >
< li >< span >< a href ="#111" > 1.1.1. </ a ></ span ></ li >
< li >< span >< a href ="#112" > 1.1.2. </ a ></ span ></ li >
< li >< span >< a href ="#113" > 1.1.3. </ a ></ span ></ li >
</ ul >
</ li >
</ ul >
</ li >
< li >< span >< a href ="#2" > 2. </ a ></ span ></ li >
</ ul >
</ div ><! -- / multi-derevo -- >
サブレベルを作成するには、ノードヘッダーの後に同じ構造のネストされたリストを挿入するだけで十分です。
原則として、投資の深さは制限されていませんが、すべての要素がすぐに読み込まれるため、トラフィックが入り込み、待ち時間が長くなるリスクがありますので、注意してください。
更新されたツリースクリプト
コードコメント内のすべての説明。
/*
(c) 2009 r3code.habrahabr.ru
: HTML .
r3code.habrahabr.ru/blog/59823
.
.
- (/).
- ,
, .
- (.current)
.
-
.
- (./.) cookies.
- cookies .
19/05/2009
*/
//=================================================================================
$( document ).ready( function () {
/* , .
'li' 'ul',
, .. 'li' 'a'
'<em class="marker"></em>'.
a:first , 1
.
*/
var root = $( '#multi-derevo' );
// , (Nested set)
$( 'li' , root).each( function (index) {
this .id = 'n' + index;
});
$( 'li:has("ul")' , root).find( 'a:first' ).prepend( '<em class="marker"></em>' );
//
var current_id = $.cookie( 'current_node' );
if (current_id) $( '#' +current_id).find( 'a:first' ).toggleClass( 'current' );
//
//-----------------------------------
$( 'li span' , root).click( function () {
//
$( 'a.current' , root).removeClass( 'current' );
var a = $( 'a:first' , this .parentNode);
a.toggleClass( 'current' );
var current_id = a.parent( 'li' ).attr( 'id' );
//alert(a.parents('li').get(0).tagName+"#"+a.parents('li').attr('id'));
setCookie( 'current_node' ,a.parents( 'li' ).attr( 'id' ) || null );
//
toggleNode( this .parentNode);
});
//postLoad(); // url
openNodes(); // cookie
})
//---------------------------------------------------------------------------------
//
function toggleNode(Node) { // node= li
prepareLast(Node);
//
var ul=$( 'ul:first' ,Node); //
if (ul.length) { //
ul.slideToggle(200); //
// /
var em=$( 'em:first' ,Node); // this = 'li span'
// em.hasClass('open')?em.removeClass('open'):em.addClass('open');
em.toggleClass( 'open' );
saveTreeState();
}
}
//
function prepareLast(Node) {
/* ,
*/
$(Node).each( function (){
if (!$( this ).next().length) {
/* <li>, <ul>,
ul > li, 'last' */
$( this ).find( 'ul:first > li' ).addClass( 'last' );
}
})
}
//
function postLoad(){
var url = window.location.toString();
var max = 0;
var a = null ;
$( '#multi-derevo li span a' ).each( function (){
//
if (url.indexOf( this .href) >= 0 && this .href.length > max){
a = this ;
max = this .href.length;
}
});
// ,
if ($(a). is ( ':hidden' ) || $(a).parents( ':hidden' ).length) {
var li = $(a).parents().filter( 'li' );
prepareLast(li);
toggleNode(li);
}
//
if (a) {
$(a).toggleClass( 'current' );
}
else { // , ( )
$( '#multi-derevo li span a:first' ).toggleClass( 'current' );
}
}
//
function GetOpenedNodes(items){ // li:has('ul')
var str = [];
$(items).each( function () {
var res = $( this ).attr( 'id' );
var state = $( 'em:first' , this ).hasClass( 'open' ) ? 1 : '' ;
if (res && state){
str.push(res);
}
});
return str.join( ',' );
}
//
function saveTreeState(){
var open_id = GetOpenedNodes($( '#multi-derevo li:has("ul")' )) || null ;
setCookie( "open_nodes" , open_id);
return false ;
}
//
function openNodes(){
//
var open_nodes = $.cookie( "open_nodes" );
if (open_nodes) {
var nodes = open_nodes.split( ',' );
if (nodes[0]){
for ( var node in nodes){
nodes[node] = '#' + nodes[node];
}
var ids = nodes.join( ',' );
$(ids).each( function () {
toggleNode($( this ));
});
}
}
return false ;
}
// Cookies 1
function setCookie(name, value){
var DAY = 24 * 60 * 60 * 1000;
var date = new Date();
date.setTime(date.getTime() + (1 * DAY)); // 1
$.cookie(name, value, {expires: date});
// alert("Cookie set: "+name+"="+value);
}
もちろん、jQueryの機能を考慮してコードをリファクタリングしたいと思います。このオプションは私が知っているように書かれています。 このコードの見た目を改善する上で有用な考えをあきらめないでください。
作業中のスクリプト
実際の例を参照してください。
例2 マーカーは左側にあるため、テキストは同じレベルの1つの垂直線に揃えられます。 変更されたCSSとスクリプト。
UPD 2009年5月19日
アンロード時にツリーの状態を保存することを拒否-Operaはサポートしていません。 ノードをクリックすると、ツリーの状態が保存されます。 例とスクリプトが更新されました。
UPD 02/24/2012
sanch3zの要求に応じて、別の設計オプションが作成されました
habrahabr.ru/blogs/webdev/59823/#comment_1641197