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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 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
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php实现httpclient类示例
2014/04/08 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
javascript self对象使用详解
2016/10/18 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
副总经理岗位职责范本
2014/09/30 职场文书
撤诉申请怎么写
2015/05/19 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书