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封装的一个js分页
Nov 15 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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版 汉字转码的实现详解
2013/06/09 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python3处理文件中每个词的方法
2015/05/22 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
python3+PyQt5实现柱状图
2018/04/24 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python 批量将中文名转换为拼音
2021/02/07 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
学习雷锋演讲稿
2014/05/10 职场文书
离婚协议书范本2014
2014/10/27 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
会计求职自荐信范文
2015/03/04 职场文书
刮痧观后感
2015/06/05 职场文书
初中班干部工作总结
2015/08/10 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis