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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 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
URL Rewrite的设置方法
2007/01/02 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python实现选择排序
2017/06/04 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
numpy库reshape用法详解
2020/04/19 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
知名企业招聘广告词大全
2014/03/18 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
作风建设整改方案
2014/10/27 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS