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 相关文章推荐
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
详解webpack 多入口配置
Jun 16 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
代码整洁之道(重构)
Oct 25 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP多文件上传类实例
2015/03/07 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
计算机工程学院个人求职信
2013/10/05 职场文书
法学毕业生自我鉴定
2013/11/08 职场文书
给交警的表扬信
2014/01/12 职场文书
保护环境建议书300字
2014/05/13 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js