jquery-syntax动态语法着色

解压jquery-syntax-3.1.1.zip,将public放在我们自已的目录下,在网页中引入如下3个js(下载地址是http://download.csdn.net/detail/liumengcheng/7344667)
<script type="text/javascript" charset="UTF-8" src="scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" charset="UTF-8" src="public/jquery.syntax.js"></script>
<script type="text/javascript" charset="UTF-8" src="public/jquery.syntax.cache.js"></script>


html部分:
 <div id="div_configXML" style="float:right;width:600px;">
 </div>

js部分:
//配置文件的默认类型为xml
var fileType="xml";
//当选中树中的某个文件的时候
$('#tree1').tree({
    onClick: function(node){
    if (node.children==null || node.children==undefined){
         var url="../hub/config/configRead?"+'ip='+ip+'&port='+port+"&file="+node.id;
         var str=node.id;
         fileType = str.substring(str.lastIndexOf(".")+1,str.length); 
          fileType=fileType.toLowerCase();
         $.get(url,{},function(data,textStatus){
 //因为需要多次语法着色,而且每次选中的文件都不一样,

//所以每次都要删除原来的pre元素,并新增pre,且syntax得根据文件名的后缀来动态得到。

//注意:不要直接定位pre,因为每次渲染后pre元素会消失,所以我这里用一个div来放pre,每次清理pre只要删除div下的所有元素就行了

         $("#div_configXML *").remove();
         var $pre=$("<pre id='configXML' class='
syntax "+ fileType +"'> </pre>");
         $("#div_configXML").append($pre);
         $("#configXML").text(data);
         $.syntax();

         }
        );
    }
}

});

以下是效果图:

显示xml文件


显示java文件


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值