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 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
php中的依赖注入实例详解
2019/08/14 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
django基础学习之send_mail功能
2019/08/07 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
网吧消防安全制度
2014/01/28 职场文书
小学生手册家长评语
2014/04/16 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
人事局接收函
2015/01/30 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android