二月
13
2006

Smarty的如何:使用Javascript调试模板

更新:一个下载包可以在这里找到: http://ideamesh.com/file/11/Smarty-Debug-with-Collapsible-Variables.html

下面是修改后的代码,工作和准备去..

在这里你可以下载nanotree的JavaScript的链接...
http://nanotree.sourceforge.net/

更换我的变量{$ Site.framework_pub}适当地使JavaScript和图像可以被正确加载。

同时请注意,我在一个部分来处理用户定义的调试添加瓦尔...我调试结构被命名为'_user_debug'和'_user_debug_key“

有关如何实现这个看看这个线程的详细信息:
http://www.smarty.net/forums/viewtopic.php?p=31241#31241

否则,如果你不感兴趣,它是安全的,从模板中删除该部分。 您也可以删除{如果}语句我用来包裹模板变种部分。

你可能想一起玩的另一件事是多少字符输出作为调试的值。 看起来,这和修改第二个数字改变最多字符输出:@ debug_print_var:0:1000

PS谁能弄清楚为什么我收到的右侧单元格中的<H3>上面的空间?

希望这会有所帮助,我知道我喜欢它 微笑

PS 要获取所有的javascript正确,您只需要修改该行“变种mynanopath =”,并确保它指向您的公共nanopath目录工作。 你可以下来了nanotree包从http://sourceforge.net/projects/nanotree/

下面是更新后的代码

代码:
{*
Smarty的自定义DHTML调试模板
@作者Hielke Hoeve酒店
@作家欧文·科尔<owenc在ideamesh点com>
@自02/13/2006的Smarty 2.6.12
@包小聪明
@文件名文件debug.tpl
*}

{assign_debug_info}

<SCRIPT language=javascript>
变种mynanopath =“{$ Site.javascript_path} \ / nanotree \ /”;

如果(self.name ==“){ldelim}
变种标题='控制台';
{rdelim}
其他{ldelim}
变种标题='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;保证金:0PX 0PX 0PX 0PX;背景颜色:#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(“<\ / STYLE> \ 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(“dragable = 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”);
(“* @参数的TreeNode已被点击TreeNode对象\ N”的)_smarty_console.document.write;
_smarty_console.document.write(“* \ / \ N”);
_smarty_console.document.write(“功能standardClick(树节点){ldelim} \ N”的);
_smarty_console.document.write(“变种mytext就=的document.getElementById('debugtreetextdiv'); \ n”);
_smarty_console.document.write(“无功参数= 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(树节点){ldelim} \ N”的);
_smarty_console.document.write(“{rdelim} \ N”的);

_smarty_console.document.write(“变种closedGif ='”+ mynanopath +“图像\ / folder_closed.gif'; \ n”);
_smarty_console.document.write(“变种openGif ='”+ mynanopath +“图像\ / folder_open.gif'; \ n”);
_smarty_console.document.write(“变种pageIcon ='”+ mynanopath +“图像\ / 16页×16.gif'; \ n”);
_smarty_console.document.write(“变种userIcon ='”+ mynanopath +“图像\ / user_16×16.gif'; \ n”);
_smarty_console.document.write(“变种helpIcon ='”+ mynanopath +“图像\ / help_16×16.gif'; \ n”);

{*创建基本节点*}
{指定VAR =计数器值= 0;}
_smarty_console.document.write(“rootNode中=新的TreeNode({$计数器},'Smarty的调试',helpIcon,”这是调试树它取代了传统版本的Smarty的调试控制台中。'); \ n“);
{$计数器+ +}

{*模板创建节点包括*}
_smarty_console.document.write(“变种节点{$计数器} =新的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 [范本]。深入} && {/节} <字体颜色= {如果$ _debug_tpls [模板]类型情商“模板”} {棕色elseif的$ _debug_tpls [范本]。型方程 “insert”}black{else}green{/if}>{$_debug_tpls[templates].filename|escape:html|escape:javascript}<\\/font>{if 使用isset($ _debug_tpls [模板] exec_time)} <font size=-1>键<I>({$ _debug_tpls [模板] exec_time | string_format:“%.5 F”}){如果%templates.index%EQ 0} (总){/如果} <\ \ / I> <\ \ / FONT> {/如果} <\ \ / TT> <\ \ / TD> <\ \ / TR>“);
调用{
_smarty_console.document.write(“<tr bgcolor=#eeeeee> <td colspan=2>的<tt> <I>没有模板包含<\ \ / I> <\ \ / TT> <\ \ / TD> <\ \ / TR>“);
{/部分}
_smarty_console.document.write(“<\ \ /表>”);
_smarty_console.document.write(“”); \ n“);

_smarty_console.document.write(“rootNode.addChild(节点{$计数器}); \ n”);
{$计数器+ +}

{*创建节点为用户调试变量*}
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器},'用户调试变量:',新的Array(closedGif,openGif)); \ n”);
_smarty_console.document.write(“rootNode.addChild(节点{$计数器}); \ n”);
_smarty_console.document.write(“无功父节点= {$计数器}; \ n”);
{$计数器+ +}

{*创建用户调试变量的子节点*}
{段名=瓦尔循环= $ _user_debug}
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器}”{ldelim} $ {$ _user_debug_key [瓦尔]} {rdelim}',pageIcon,'{$ _user_debug [瓦尔] | @ debug_print_var:0:1000 |越狱:JavaScript的|越狱:使用Javascript}'); \ n“);
_smarty_console.document.write(“parent.addChild(节点{$计数器}); \ n”);
{$计数器+ +}
调用{
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器},'没有用户调试信息分配',HelpIcon); \ n”);
_smarty_console.document.write(“parent.addChild(节点{$计数器}); \ n”);
{$计数器+ +}
{/部分}

{*为模板变量创建节点*}
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器},'指定模板变量:',新的Array(closedGif,openGif)); \ n”);
_smarty_console.document.write(“rootNode.addChild(节点{$计数器}); \ n”);
_smarty_console.document.write(“无功父节点= {$计数器}; \ n”);
{$计数器+ +}

{*创建模板变量子节点*}
{段名=瓦尔循环= $ _debug_keys}
{如果$ _debug_keys [瓦尔]!='_user_debug'&& $ _debug_keys [瓦尔]!='_user_debug_key'}
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器}”{ldelim} $ {$ _debug_keys [瓦尔]} {rdelim}',pageIcon,'{$ _debug_vals [瓦尔] | @ debug_print_var:0:1000 |越狱:JavaScript的|越狱:使用Javascript}'); \ n“);
_smarty_console.document.write(“parent.addChild(节点{$计数器}); \ n”);
{$计数器+ +}
{/如果}
调用{
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器},'无指定模板变量',HelpIcon); \ n”);
_smarty_console.document.write(“parent.addChild(节点{$计数器}); \ n”);
{$计数器+ +}
{/部分}

{*创建节点,Smarty的配置文件中的变量*}
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器},”指定配置文件中的变量(外模板范围):',新的Array(closedGif,openGif)); \ n“);
_smarty_console.document.write(“rootNode.addChild(节点{$计数器}); \ n”);
_smarty_console.document.write(“无功父节点= {$计数器}; \ n”);
{$计数器+ +}

{*创建Smarty的配置文件中的变量的子节点*}
{段名= config_vars循环= $ _debug_config_keys}
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器}”{ldelim} $ {$ _debug_config_keys [config_vars]} {rdelim}',pageIcon,'{$ _debug_config_vals [config_vars] | @ debug_print_var:0:1000 |越狱:JavaScript的|越狱:使用Javascript}'); \ n“);
_smarty_console.document.write(“parent.addChild(节点{$计数器}); \ n”);
{$计数器+ +}
调用{
_smarty_console.document.write(“变种节点{$计数器} =新的TreeNode({$计数器},'无指定配置变量',HelpIcon); \ n”);
_smarty_console.document.write(“parent.addChild(节点{$计数器}); \ n”);
{$计数器+ +}
{/部分}

_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>”);
(“<H4>单击树中的变量有其内容显示在右侧面板<\ / H4>”)_smarty_console.document.write;
_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> <\ /表>”);
_smarty_console.document.write(“<\ / BODY> <\ / HTML>”);
_smarty_console.document.close();
</ SCRIPT>

标签:
张贴在指南编程由欧文

通过跟随评论RSS订阅 | 发表评论 | 引用网址

留下您的评论

©2008 - 2014 -保留所有权利- Ideamesh,公司 22个查询。 0.283秒。