2月
13
2006

どのようにSmartyの：Javascriptのデバッグテンプレート

UPDATE：ダウンロードパッケージはここから入手可能です： http://ideamesh.com/file/11/Smarty-Debug-with-Collapsible-Variables.html

ここで変更したコードが動作して行く準備ができて、である...

ここでは、nanotree javascriptをダウンロードできるリンクは...
http://nanotree.sourceforge.net/~~V

適切にjavascriptとイメージが正しくロー​​ドすることができるというのが私の変数{$ Site.framework_pub}を置き換えます。

また、注意してください、私は、ユーザー定義されたデバッグのvarsを処理するセクションに追加しました...私のデバッグの構造は、 '_user_debug'と '_user_debug_key'という名前が付けられ

このスレッドではこの外観を実装する方法の詳細は：
http://www.smarty.net/forums/viewtopic.php?p=31241＃31241

あなたが興味を持っていない場合、それ以外の場合はテンプレートからそのセクションを削除しても安全です。 また、私はテンプレートのvarセクションをラップするために使用されるの{if}ステートメントを削除することができます。

あなたと遊びたいと思うかもしれないもう一つは、デバッグ用の値として出力されますどのように多くの文字です。 これを見て、最大文字の出力を変更する2番目の番号を変更します。@ debug_print_var：0:1000

私は右のセルに<H3>上の空間を取得しています、なぜPSは誰を​​把握することはできますか？

この情報がお役に立てば幸い、私はそれを好む知っている 笑顔

PSは、 すべてのJavaScriptはあなただけの"var mynanopath ="行を変更し、それがあなたの公共nanopathディレクトリを指してを確認する必要が正しく動作して取得する。 あなたがダウンしてnanotreeパッケージからできhttp://sourceforge.net/projects/nanotree/

ここで更新されたコードです。

コード：
{*
SmartyのカスタムDHTMLのデバッグテンプレート
@作者Hielke Hoeveの
ideameshドットcom>での@ authorオーウェンコール<owenc
@ 2006年2月13日のSmarty 2.6.12以降
@パッケージのSmarty
@ファイル名debug.tpl
*}

{assign_debug_info}

<SCRIPT language=javascript>
VAR mynanopath = "{$ Site.javascript_path} \ / nanotree \ /";

IF（self.name == "）{ldelim}
VARタイトル= 'コンソール';
{rdelim}
他に{ldelim}
VARタイトル= 'Console_' + self.name。
{rdelim}
_smarty_console =のwindow.open（ ""、title.value、 "幅= 800、高さ= 600、サイズ変更、スクロールバー=はい"）;
_smarty_console.document.write（ "します。<html> <head> <title> SmartyのデバッグConsole_" + self.name + "<\ / TITLE>の\ n"）;
_smarty_console.document.write（ "<STYLE>ます\ n"）;
_smarty_console.document.write（ "H3 {ldelim}パディング：5pxの5PX 5PX 5PX;マージン：のでしましのでしました。背景色：＃CCCCCC; {rdelim}を\ n"）;
_smarty_console.document.write（ "＃debugtreetable {ldelim}幅：100％; {rdelim}を\ n"）;
_smarty_console.document.write（ "＃debugtreetable TD {ldelim}ボーダー：薄い固体黒、{rdelim}を\ n"）;
_smarty_console.document.write（ "＃debugtreetextdiv DIV {ldelim}パディング左：10pxの、{rdelim}を\ n"）;
_smarty_console.document.write（ "<\ /スタイル>の\ n"）;
_smarty_console.document.write（ "<script language=\"Javascript\" src=\"" + mynanopath + "nanotree.js\"> <\ / SCRIPT>の\ n"）;
_smarty_console.document.write（ "<script type=\"text\/javascript\" language=\"JavaScript\">ます\ n"）;
_smarty_console.document.write（ "< - に\ n"）;
_smarty_console.document.write（ "showRootNode = TRUE;に\ n"）;
_smarty_console.document.write（ "sortNodes = 0;に\ n"）;
_smarty_console.document.write（ "ドラッグ可能= FALSE;の\ n"）;
_smarty_console.document.write（ "showAllNodesOnStartup = TRUE;に\ n"）;

_smarty_console.document.write（ "\ / ** \ n"）を。
_smarty_console.document.write（ "*ツリーを初期化するために必要なの\ n"）;
_smarty_console.document.write（ "*とshowtreeで（IMAGEPATH）を呼び出す;実際にツリーを表示するために\ n"）;
_smarty_console.document.write（ "*あるいは、これはページの下部にスクリプトブロックで行うことができます\ n"）;
_smarty_console.document.write（ "*このメソッドはややクリーナーですが\ nです。"）;
_smarty_console.document.write（ "* \ / \ N"）;
_smarty_console.document.write（ "init関数（）{ldelim}に\ n"）;
_smarty_console.document.write（ "コンテナ=のdocument.getElementById（ 'debugtreediv'）;に\ n"）;
_smarty_console.document.write（ "showtreeで（ '" + mynanopath + "'）;に\ n"）;
_smarty_console.document.write（ "{rdelim}を\ n"）;

_smarty_console.document.write（ "\ / ** \ n"）を。
_smarty_console.document.write（ "ノードをユーザーがクリックすると*と呼ばれるに\ n"）;
_smarty_console.document.write（ "* @パラメータのTreeNodeクリックされたTreeNodeオブジェクトの\ n"）;
_smarty_console.document.write（ "* \ / \ N"）;
_smarty_console.document.write（ "関数standardClick（TreeNodeを）{ldelim}に\ n"）;
_smarty_console.document.write（ "VARとmyText =のdocument.getElementById（ 'debugtreetextdiv'）;に\ n"）;
_smarty_console.document.write（ "VAR PARAM = treeNode.getParam（）;に\ n"）;
_smarty_console.document.write（ "mytext.innerHTML =（パラメータ=="）treeNode.getName（）？ '<H3>' + treeNode.getName（）+ '<\ / H3> <DIV>' +パラメータ+ ' <\ / DIV> ';の\ n "）;
_smarty_console.document.write（ "{rdelim}を\ n"）;

_smarty_console.document.write（ "関数nodeEdited（TreeNodeを）{ldelim}に\ n"）;
_smarty_console.document.write（ "{rdelim}を\ n"）;

_smarty_console.document.write（ "VAR closedGif = '" + mynanopath + "画像\ / folder_closed.gif';に\ n"）;
_smarty_console.document.write（ "VAR openGif = '" + mynanopath + "画像\ / folder_open.gif';に\ n"）;
_smarty_console.document.write（ "VAR pageIcon = '" + mynanopath + "画像\ / page16×16.gif';に\ n"）;
_smarty_console.document.write（ "VAR userIcon = '" + mynanopath + "画像\ / user_16×16.gif';に\ n"）;
_smarty_console.document.write（ "VAR helpIcon = '" + mynanopath + "画像\ / help_16×16.gif';に\ n"）;

{*ベースノード*を作成します。}
{割り当てるVAR =カウンタ値= 0}
_smarty_console.document.write（ "ルートノード=新しいTreeNode（{$カウンタ}、 'Smartyのデバッグ"、helpIcon、'これはデバッグのツリーです。これは、Smartyデバッグコンソールの古典的なバージョンに置き換えます。 '）;に\ n "）;
{$カウンタ+ +}

{*テンプレートの作成ノードは、*が含まれています}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 'テンプレート·コンフィギュレーションファイルを（秒単位でロード時間）が含まれ：'、pageIcon、 '"）;
_smarty_console.document.write（ "<table width=\"100%\">"）;
{セクション名=テンプレートのループ= $ _debug_tpls}
_smarty_console.document.write（以下、 "<tr bgcolor={if %templates.index%はeven}#eeeeee{else}#fafafa{/if}> <td colspan=2>の<tt> {セクション名です。=インデントループ= $ _debug_tpls [テンプレート]。深さ} &&& {/ section}の<フォントの色= {もし$ _debug_tpls [テンプレート]。型eq "テンプレート"}ブラウン{ELSEIF $ _debug_tpls [テンプレート]。型eq かどうかの判断（$ _debug_tpls [テンプレート] exec_time。）} <font size=-1> <I>（{$ _debug_tpls [テンプレート] exec_time | string_format： "％.5 f"を}）{％templates.index％EQ 0の場合} （合計）{/ if}は、<\ \ / i>を<\ \ / FONT> {/ if}は、<\ \ / tt>を<\ \ / TD> <\ \ / TR> "）;
する{sectionelse}
_smarty_console.document.write（ "<tr bgcolor=#eeeeee> <td colspan=2>の<tt> <I>ないテンプレートは、<\ \ / i>を<\ \ / tt>を<\ \ / TD> <\ \が含まれていません/ TR> "）;
{/ section}の
_smarty_console.document.write（ "<\ \ / TABLE>"）;
_smarty_console.document.write（ "'）;に\ n"）;

_smarty_console.document.write（ "rootNode.addChild（ノード{$カウンタ}）;の\ n"）;
{$カウンタ+ +}

{*ユーザのデバッグ変数のノードを作成します*}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 'ユーザのデバッグ変数：'、新しいArray（closedGif、openGif））;の\ n"）;
_smarty_console.document.write（ "rootNode.addChild（ノード{$カウンタ}）;の\ n"）;
_smarty_console.document.write（ "VAR =親ノード{$カウンタ};に\ n"）;
{$カウンタ+ +}

{*ユーザのデバッグ変数の子ノードを作成します*}
{セクション名= varsのループ= $ _user_debug}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 '{ldelim} $ {$ _user_debug_key [VARS]} {rdelim}'、pageIcon、 '{$ _user_debug [VARS] | @ debug_print_var：0:1000 |エスケープ：ジャバスクリプト|エスケープ：ジャバスクリプト} '）;に\ n "）;
_smarty_console.document.write（ "parent.addChild（ノード{$カウンタ}）;の\ n"）;
{$カウンタ+ +}
する{sectionelse}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 'が割り当てられていませんユーザデバッグ情報'、HelpIcon）に\ n"）;
_smarty_console.document.write（ "parent.addChild（ノード{$カウンタ}）;の\ n"）;
{$カウンタ+ +}
{/ section}の

{*テンプレート変数*のノードを作成します。}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 '割り当てられたテンプレート変数：'、新しいArray（closedGif、openGif））;の\ n"）;
_smarty_console.document.write（ "rootNode.addChild（ノード{$カウンタ}）;の\ n"）;
_smarty_console.document.write（ "VAR =親ノード{$カウンタ};に\ n"）;
{$カウンタ+ +}

{*テンプレート変数に子ノードを作成します*}
{セクション名= varsのループ= $ _debug_keys}
{IF $ _debug_keys [varsは]！= '_user_debug' && $ _debug_keys [VARS]！= '_user_debug_key'}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{カウンタ$}、 '{ldelim} $ {$ _debug_keys [VARS]} {rdelim}'、pageIcon、 '{$ _debug_vals [VARS] | @ debug_print_var：0:1000 |エスケープ：ジャバスクリプト|エスケープ：ジャバスクリプト} '）;に\ n "）;
_smarty_console.document.write（ "parent.addChild（ノード{$カウンタ}）;の\ n"）;
{$カウンタ+ +}
{/ if}は
する{sectionelse}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 'が割り当てられていませんテンプレート変数'、HelpIcon）に\ n"）;
_smarty_console.document.write（ "parent.addChild（ノード{$カウンタ}）;の\ n"）;
{$カウンタ+ +}
{/ section}の

{* Smartyの設定ファイルの変数のノードを作成します*}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 'configファイルの変数（外側のテンプレートのスコープ）が割り当て：'、新しいアレイ（closedGif、openGif））;の\ n"）;
_smarty_console.document.write（ "rootNode.addChild（ノード{$カウンタ}）;の\ n"）;
_smarty_console.document.write（ "VAR =親ノード{$カウンタ};に\ n"）;
{$カウンタ+ +}

{* Smartyの設定ファイルの変数のために子ノードを作成します*}
{セクション名= config_varsループ= $ _debug_config_keys}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 '{ldelim} $ {$ _debug_config_keys [config_vars]} {rdelim}'、pageIcon、 '{$ _debug_config_vals [config_vars] | @ debug_print_var：0:1000 |エスケープ：ジャバスクリプト|エスケープ：ジャバスクリプト} '）;に\ n "）;
_smarty_console.document.write（ "parent.addChild（ノード{$カウンタ}）;の\ n"）;
{$カウンタ+ +}
する{sectionelse}
_smarty_console.document.write（ "VARノード{$カウンタ} =新しいTreeNode（{$カウンタ}、 'が割り当てられていません設定変数"、HelpIcon）に\ n "）;
_smarty_console.document.write（ "parent.addChild（ノード{$カウンタ}）;の\ n"）;
{$カウンタ+ +}
{/ section}の

_smarty_console.document.write（ "\ / \ / - >の\ n"）;
_smarty_console.document.write（ "<\ / SCRIPT>の\ nを\ n"）;
_smarty_console.document.write（ "<\ / head>の<body onload=\"init()\">ます\ n"）;
_smarty_console.document.write（ "<H3>のSmarty＆ユーザデバッグコンソール<\ / h3の>"）;
_smarty_console.document.write（ "右側のパネルに表示され、その内容を持っているツリー内の変数の<H4>をクリックして<\ / H4>"）;
_smarty_console.document.write（ "<table border='0' id='debugtreetable'> <TR>"）;
_smarty_console.document.write（ "<td valign='top' style='width: 250px;'> <div id='debugtreediv'>＆<\ / DIV> <\ / TD>"）;
_smarty_console.document.write（ "<td valign='top'> <div id='debugtreetextdiv'>＆<\ / TD>"）;
_smarty_console.document.write（ "<\ / TR> <\ / TABLE>"）;
_smarty_console.document.write（ "<\ / BODY> <\ / HTML>"）;
_smarty_console.document.close（）;
</ SCRIPT>

タグ： 、
に投稿されたガイド 、 プログラミングオーウェン

を介してのコメントをフォローRSSフィード | コメントを残す | トラックバックURL

あなたのコメントを残す

 
©2008 - 2012 -すべての権利予約- Ideamesh、Inc。の 22のクエリ。 1.717秒です。