お客さんの要望により、Javascript でツリーを表示を開発する。
いろいろなツリー表示のライブラリがあるが、自分が一番気に入っているのは、Yahoo User Interface 2 の Tree View だ。
YUI2 は開発停止しているものの、API が使いやすくて素晴らしいライブラリだと思う。
で、1つだけ問題が。
赤いところをクリックすると、アドレスバーのハッシュが消えてしまうのだ。
理由は、赤いところのタグがこうなっているから。
<a href="#" class="ygtvspacer"> </a>
この問題を回避するには、次のようにHTMLNode を継承すると良い。
var NewHtmlNode = function(oData, oParent, expanded, hasIcon) { if (oData) { this.init(oData, oParent, expanded); this.initContent(oData, hasIcon); } }; //YUI2.9.0 YAHOO.lang.extend(NewHtmlNode, YAHOO.widget.HTMLNode, { getNodeHtml:function(){ var sb = []; sb[sb.length] = '<table id="ygtvtableel' + this.index + '" border="0" cellpadding="0" cellspacing="0" class="ygtvtable ygtvdepth' + this.depth; sb[sb.length] = ' ygtv-' + (this.expanded?'expanded':'collapsed'); if (this.enableHighlight) { sb[sb.length] = ' ygtv-highlight' + this.highlightState; } if (this.className) { sb[sb.length] = ' ' + this.className; } sb[sb.length] = '"><tr class="ygtvrow">'; for (var i=0;i<this.depth;++i) { sb[sb.length] = '<td class="ygtvcell ' + this.getDepthStyle(i) + '"><div class="ygtvspacer"></div></td>'; } if (this.hasIcon) { sb[sb.length] = '<td id="' + this.getToggleElId(); sb[sb.length] = '" class="ygtvcell '; sb[sb.length] = this.getStyle() ; //修正ここから // sb[sb.length] = '"><a href="#" class="ygtvspacer"> </a></td>'; sb[sb.length] = '"><a class="ygtvspacer"> </a></td>'; //修正ここまで } sb[sb.length] = '<td id="' + this.contentElId; sb[sb.length] = '" class="ygtvcell '; sb[sb.length] = this.contentStyle + ' ygtvcontent" '; sb[sb.length] = (this.nowrap) ? ' nowrap="nowrap" ' : ''; sb[sb.length] = ' >'; sb[sb.length] = this.getContentHtml(); sb[sb.length] = '</td></tr></table>'; return sb.join(""); }});
私が現在手がけているシステムは、jQuery History と連携させているのでハッシュが無くなると非常に困る。
もはや時代遅れと思うが、もしかしたら誰かの役に立つかもしれないので、記載しておきます。
0 件のコメント:
コメントを投稿