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上传前预览图片实例
Mar 25 Javascript
Table冻结表头示例代码
Aug 20 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 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 Cookie的一个使用注意点
2008/11/08 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php木马webshell扫描器代码
2012/01/25 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
js跑马灯代码(自写)
2013/04/17 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue+SSM实现验证码功能
2018/12/07 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Django框架模板介绍
2019/01/15 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python构造函数init实例方法解析
2020/01/19 Python
python实时监控logstash日志代码
2020/04/27 Python
python中加背景音乐如何操作
2020/07/19 Python
详解python中的异常捕获
2020/12/15 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
工艺工程师工作职责
2013/11/23 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
员工安全责任协议书
2016/03/22 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python