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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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实现分页工具类分享
2014/01/09 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
Ext 今日学习总结
2010/09/19 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python使用matplotlib画饼状图
2018/09/25 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python字符串及文本模式方法详解
2020/09/10 Python
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
金融专业应届生求职信
2013/11/02 职场文书
生产班组长岗位职责
2014/01/05 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
国庆节慰问信
2015/02/15 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
个人自荐书范文
2015/03/09 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL