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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
Script的加载方法小结
Jan 12 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 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
杏林同学录(三)
2006/10/09 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
php遍历数组的方法分享
2012/03/22 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Python 实现进度条的六种方式
2021/01/06 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
美国存储和组织商店:The Container Store
2017/08/16 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
学习新党章思想汇报
2014/01/09 职场文书
地球一小时活动总结
2015/02/27 职场文书
护士实习自荐信
2015/03/06 职场文书