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 相关文章推荐
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
Vue数字输入框组件的使用方法
Oct 19 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
JS实现普通轮播图特效
2020/01/01 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python实现自主查询实时天气
2018/06/22 Python
python使用zip将list转为json的方法
2018/12/31 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python贪吃蛇游戏代码
2020/04/18 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
家长写给老师的建议书
2014/03/13 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
银行稽核岗位职责
2015/04/13 职场文书
公司员工体检通知
2015/04/21 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android