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