ツリーに関するトピックの続きで、コードを少しやり直し、jQueryを接続しました。 多くの人が同様のツリーを見たときに期待するように、ツリーは生きており、ノードは展開しています。
これで、ツリーの装飾はスクリプトによって行われます。それ自体、ネストされたノードを持つ要素のマーカーを配置します。
HTMLスクリプトの使用が簡単になりました。
UPD 2009年4月5日： スクリプトが更新されました。スクリプトのオプションがいくつかあります。
2009年9月4日更新： 続き
初期HTML
ツリーは次の形式で記述されます。
< div id ="multi-derevo" >
< h4 >< a href ="#" > </ a ></ h4 >
< ul ><! -- 1 -- >
< li >< span >< a href ="#1" > 1. </ a ></ span >
< ul ><! -- 2 -- >
< li >< span >< a href ="#11" > 1.1. </ a ></ span >
< ul ><! -- 3 -- >
< li >< span >< a href ="#111" > 1.1.1. </ a ></ span ></ li >
< li >< span >< a href ="#112" > 1.1.2. </ a ></ span ></ li >
</ ul >
</ li >
</ ul >
</ li >
<!-- 1 -->
< li >< span >< a href ="#2" > 2. </ a ></ span ></ li >
< li >< span >< a href ="#3" > 3. </ a ></ span ></ li >
< li >< span >< a href ="#4" > 4. </ a ></ span ></ li >
< li >< span >< a href ="#5" title =" " > 5. , </ a ></ span >
< ul ><! -- 2 -- >
< li >< span >< a href ="#1" > 5.1. </ a ></ span ></ li >
< li >< span >< a href ="#1" > 5.2. </ a ></ span >
< ul ><! -- 3 -- >
< li >< span >< a href ="#1111" > 5.2.1.1 </ a ></ span ></ li >
< li >< span >< a href ="#1112" > 5.2.1.2 </ a ></ span ></ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >
</ div ><! -- / multi-derevo -- >
CSSが無効になっている場合でも、ツリーは期待どおりに表示されます。 ネストされたリストとして。
前のバージョンと比較して、CSSは少し変更されています。 前のオプションは完全にここにあります 。
CSS
/* */
body {font-family: Arial, Tahoma, sans-serif; margin: 2em; font-size: 62.5%;}
p {
font-size: 1.2em;
}
a {
color: #0066cc;
text-decoration: none;
outline: none;
}
/*a:link {
color: #0066cc;
}
a:visited {color: #00cc63; }*/
a:hover {
text-decoration: underline;
}
a:active, a:focus {
color: #666;
background-color: #f4f4f4;
}
a.current {
color: black;
font-weight: bold;
background-color: #f4f4f4;
}
/*
-------------------------------- */
#multi-derevo {
width: 220px; /* */
border: solid; /* */
border-color: silver gray gray silver;
border-width: 2px;
padding: 0 0 1em 0; /* */
font-size: 1.3em;
}
span { /* */
text-decoration: none;
display: block; /* */
margin: 0 0 0 1.2em;
background-color: transparent;
border: solid silver; /* */
border-width: 0 0 1px 1px; /* : */
}
span a { /* */
display: block;
position: relative;
top: .95em; /* */
background-color: #fff; /* */
margin: 0 0 .2em .7em; /* , */
padding: 0 0.3em; /* */
}
h4 { /* */
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0 .25em;
border-bottom: 1px solid silver;
}
h4 a {
display: block;
}
ul, li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
ul li {
line-height: 1.2em;
}
ul li ul {
display: none; /* */
}
ul li ul li {
margin: 0 0 0 1.2em;
border-left: 1px solid silver; /* */
}
li.last { /* , . */
border: none;
}
.marker { /* */
border-color: transparent transparent transparent gray;
border-style: solid;
border-width: .25em 0 .25em .5em;
margin: .35em .25em 0 0;
float : left;
width: 0px;
height: 0px;
line-height: 0px;
}
.marker.open { /* */
border-color: gray transparent transparent transparent;
border-width: .5em .25em 0 .25em;
}
/* IE 6 Fixup */
* html #multi-derevo * { height: 1%;}
* html .marker { border-style: dotted dotted dotted solid; }
* html .marker.open { border-style: solid dotted dotted dotted; }
Javascript
スクリプトはjQueryを使用して記述されています。 スクリプトのすべての説明については、コードのコメントを参照してください。
多くのコメント-これは私の最初のjQueryスクリプトなので、詳細に書きました。
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type= "text/javascript" ></script>
<script>
/*<![CDATA[*/
/*
HTML .
.
.
- (/).
- ,
, .
- (.current)
.
-
.
*/
$( document ).ready( function () {
/* , .
'li' 'ul',
, .. 'li' 'a'
'<em class="marker"></em>'.
a:first , 1
.
*/
$( '#multi-derevo li:has("ul")' ).find( 'a:first' ).prepend( '<em class="marker"></em>' );
//
$( '#multi-derevo li span' ).click( function () {
//
$( 'a.current' ).removeClass( 'current' );
var a = $( 'a:first' , this .parentNode);
//
// a.hasClass('current')?a.removeClass('current'):a.addClass('current');
a.toggleClass( 'current' );
var li=$( this .parentNode);
/* ,
*/
if (!li.next().length) {
/* <li>, <ul>,
ul > li, 'last' */
li.find( 'ul:first > li' ).addClass( 'last' );
}
//
var ul=$( 'ul:first' , this .parentNode); //
if (ul.length) { //
ul.slideToggle(300); //
// /
var em=$( 'em:first' , this .parentNode); // this = 'li span'
// em.hasClass('open')?em.removeClass('open'):em.addClass('open');
em.toggleClass( 'open' );
}
});
})
/*]]>*/
</script>
jQueryの専門家によるあらゆる種類の改善と最適化を歓迎します。
おそらく、純粋なJSでこれを実行する、燃えるような憎悪のjQueryがあります-これも興味深いものです。
ArtemSの純粋なJS （FF3.0、IE6）で。
swayの別のjQueryオプション 。
例
アクションで表示します 。
FF3、IE6-8、Opera 9、Google Chromeでテスト済み。
PS Leonard 、最後のトピックのスクリプト例に感謝します。
更新情報
2009年4月5 日スクリプトを更新（hasClass、addClass、removeClassをtoggleClassに置き換え）。 例を更新しました。 ツリーの代替スクリプトの脚注が追加されています。
2009年4月9日： 続き