jquery-syntax動(dòng)態(tài)語(yǔ)法著色示例代碼
更新時(shí)間：2014年05月14日 17:31:28 作者：
語(yǔ)法著色大家對(duì)它都不陌生吧，下面為大家介紹的是jquery-syntax動(dòng)態(tài)語(yǔ)法著色的具體實(shí)現(xiàn),需要的朋友可以參考下
解壓jquery-syntax-3.1.1.zip，將public放在我們自已的目錄下，在網(wǎng)頁(yè)中引入如下3個(gè)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部分：
//配置文件的默認(rèn)類(lèi)型為xml
var fileType="xml";
//當(dāng)選中樹(shù)中的某個(gè)文件的時(shí)候
$('#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){
//因?yàn)樾枰啻握Z(yǔ)法著色，而且每次選中的文件都不一樣，
//所以每次都要?jiǎng)h除原來(lái)的pre元素，并新增pre，且syntax得根據(jù)文件名的后綴來(lái)動(dòng)態(tài)得到。
//注意：不要直接定位pre，因?yàn)槊看武秩竞髉re元素會(huì)消失，所以我這里用一個(gè)div來(lái)放pre，每次清理pre只要?jiǎng)h除div下的所有元素就行了
$("#div_configXML *").remove();
var $pre=$("<pre id='configXML' class='syntax "+fileType+"'> </pre>");
$("#div_configXML").append($pre);
$("#configXML").text(data);
$.syntax();
}
);
}
}
});
以下是效果圖：
顯示xml文件
顯示java文件
復(fù)制代碼 代碼如下:
<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部分：
復(fù)制代碼 代碼如下:
<div id="div_configXML" style="float:right;width:600px;">
</div>
js部分：
復(fù)制代碼 代碼如下:
//配置文件的默認(rèn)類(lèi)型為xml
var fileType="xml";
//當(dāng)選中樹(shù)中的某個(gè)文件的時(shí)候
$('#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){
//因?yàn)樾枰啻握Z(yǔ)法著色，而且每次選中的文件都不一樣，
//所以每次都要?jiǎng)h除原來(lái)的pre元素，并新增pre，且syntax得根據(jù)文件名的后綴來(lái)動(dòng)態(tài)得到。
//注意：不要直接定位pre，因?yàn)槊看武秩竞髉re元素會(huì)消失，所以我這里用一個(gè)div來(lái)放pre，每次清理pre只要?jiǎng)h除div下的所有元素就行了
$("#div_configXML *").remove();
var $pre=$("<pre id='configXML' class='syntax "+fileType+"'> </pre>");
$("#div_configXML").append($pre);
$("#configXML").text(data);
$.syntax();
}
);
}
}
});
以下是效果圖：
顯示xml文件
顯示java文件
相關(guān)文章
jquery調(diào)整表格行tr上下順序?qū)嵗v解
這篇文章主要為大家介紹了jquery調(diào)整表格行tr上下順序?qū)嵗?，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-01-01
在easyUI開(kāi)發(fā)中，出現(xiàn)jquery.easyui.min.js函數(shù)庫(kù)問(wèn)題的解決辦法
easyUI是jquery的一個(gè)插件，是民間的插件，easyUI使用起來(lái)很方便，里面有網(wǎng)頁(yè)制作的最重要的三大方塊：javascript代碼、html代碼和Css樣式，但是很容易出現(xiàn)jquery.easyui.min.js函數(shù)庫(kù)問(wèn)題，小編教大家如何解決問(wèn)題，需要的朋友可以參考下2015-09-09
本節(jié)主要介紹了jQuery提交多個(gè)表單的小技巧,需要的朋友可以參考下2014-07-07
jquery autocomplete自動(dòng)完成插件的的使用方法
最近剛開(kāi)始學(xué)jquery，想實(shí)現(xiàn)類(lèi)似GOOGLE搜索時(shí)自動(dòng)顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08
jquery計(jì)算鼠標(biāo)和指定元素之間距離的方法
這篇文章主要介紹了jquery計(jì)算鼠標(biāo)和指定元素之間距離的方法,涉及jQuery針對(duì)頁(yè)面位置屬性與鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06
jQuery動(dòng)態(tài)設(shè)置form表單的enctype值(實(shí)現(xiàn)代碼)
本篇文章是對(duì)在jQuery中動(dòng)態(tài)設(shè)置form表單的enctype值的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
jQuery列表拖動(dòng)排列具體實(shí)現(xiàn)
列表拖動(dòng)排列的實(shí)現(xiàn)方法有很多，下文為大家介紹下使用jQuery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)2013-11-11
這篇文章主要介紹了jQuery獲取字符串中出現(xiàn)最多的數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-02-02
Jquery通過(guò)Ajax方式來(lái)提交Form表單的具體實(shí)現(xiàn)
提交Form表單的方法有很多，在本文為大家介紹下Jquery通過(guò)Ajax方式是如何提交Form表單的2013-11-11
這篇文章主要介紹了jQuery表格排序組件-tablesorter的使用,需要的朋友可以參考下2014-05-05