jquery-syntax动态语法着色示例代码
更新时间：2014年05月14日 17:31:28 作者：
语法着色大家对它都不陌生吧，下面为大家介绍的是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文件
复制代码 代码如下:
<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文件
相关文章
做前端开发的朋友对于ajax异步更新一定印象深刻，本文主要介绍了关于ajax异步请求的那点事，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
其实这个也不算是 resizable 的BUG,但从官网下载下来的确实存在问题2010-10-10
这篇文章主要为大家详细介绍了JQuery实现电梯导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了3种Jquery限制文本框只能输入数字字母的方法,简单又实用，需要的朋友可以参考下2014-12-12
jquery $(this).attr $(this).val方法使用介绍
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法，本文整理了一些相关的示例，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了jquery带动画效果幻灯片特效，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了Jquery实现图片预加载与延时加载的方法,分别介绍了原生javascript与jQuery插件实现图片的预加载及延迟加载的方法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jquery根据name属性查找的小例子，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了jQuery的one()方法用法,实例分析了one()方法的功能、定义及为匹配元素的特定事件绑定一个一次性的事件处理方法使用技巧,需要的朋友可以参考下2015-01-01
本篇文章给大家总结了关于jQuery代码优化方法，如果你这方面有需求，跟着小编一起学习下吧。2018-01-01
最新评论