jquery-syntax动态语法着色示例代码


Posted in Javascript onMay 14, 2014

解压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文件
jquery-syntax动态语法着色示例代码 
显示java文件
jquery-syntax动态语法着色示例代码

Javascript 相关文章推荐
JS性能优化笔记搜索整理
Aug 21 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
详解vue-cli3使用
Aug 14 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 #Javascript
调整小数的格式保留小数点后两位
May 14 #Javascript
原生js的弹出层且其内的窗口居中
May 14 #Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 #Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 #Javascript
JavaScript函数获取事件源的小例子
May 14 #Javascript
javascript单引号和双引号的区别和处理
May 14 #Javascript
You might like
javascript indexOf函数使用说明
2008/07/03 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
python原始套接字编程示例分享
2014/02/21 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python3 读取Word文件方式
2020/02/13 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
创建卫生先进单位实施方案
2014/03/10 职场文书
西式结婚主持词
2014/03/14 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
好人好事新闻稿
2015/07/17 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Python IO文件管理的具体使用
2022/03/20 Python
基于Python实现nc批量转tif格式
2022/08/14 Python