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 相关文章推荐
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
使用PHP Socket写的POP3类
2013/10/30 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
浅谈django orm 优化
2018/08/18 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
关于环保的活动方案
2014/08/25 职场文书
个性与发展自我评价
2015/03/06 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
关于观后感的作文
2015/06/18 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
详解OpenCV曝光融合
2022/04/29 Python
Golang gRPC HTTP协议转换示例
2022/06/16 Golang