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前台数据获取实现代码
Mar 16 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
AngularJS实现表单验证
Jan 28 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
js实现AI五子棋人机大战
May 28 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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实时显示输出
2008/10/02 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
javascript 函数调用规则
2009/08/26 Javascript
jQuery的三种$()
2009/12/30 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
复核员上岗演讲稿
2014/01/05 职场文书
四个太阳教学反思
2014/02/01 职场文书
相亲活动方案
2014/08/26 职场文书
2015年采购工作总结
2015/04/10 职场文书
保险内勤岗位职责
2015/04/13 职场文书
药店营业员岗位职责
2015/04/14 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
立案决定书范文
2015/06/24 职场文书
金榜题名主持词
2015/07/02 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
Redis 限流器
2022/05/15 Redis
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers