糖果派对官方网站_可以赌钱的糖果游戏_手机版
提供 39种样式高亮语法的JQuery插件

提供 39种样式高亮语法的JQuery插件

作者:Web前端    来源:未知    发布时间:2019-12-24 21:28    浏览量:

bb电子糖果派对 1

挥洒博客,难免要贴出代码。不过间接贴出代码,则不美观。于是,应运而生现身了超多代码美化的插件。此中比较显赫的是Syntax Highlighting插件。

动态加载js和css的jquery plugin,jqueryplugin

叁个归纳的动态加载js和css的jquery代码,用于在扭转页面时经过js函数加载一些共通的js和css文件。 

Java代码  bb电子糖果派对 2

  1. //how to use the function below:  
  2. //$.include('file/ajaxa.js');$.include('file/ajaxa.css');  
  3. //or $.includePath  = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the same directory)  
  4. $.extend({  
  5.     includePath: '',  
  6.     include: function(file)  
  7.     {  
  8.         var files = typeof file == "string" ? [file] : file;  
  9.         for (var i = 0; i < files.length; i++)  
  10.         {  
  11.             var name = files[i].replace(/^s|s$/g, "");  
  12.             var att = name.split('.');  
  13.             var ext = att[att.length - 1].toLowerCase();  
  14. bb电子糖果派对,            var isCSS = ext == "css";  
  15. 提供 39种样式高亮语法的JQuery插件。            var tag = isCSS ? "link" : "script";  
  16.             var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' ";  
  17.             var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";  
  18.             if ($(tag + "[" + link + "]").length == 0) $("head").prepend("<" + tag + attr + link + "></" + tag + ">");  
  19.         }  
  20.     }  
  21. });  
  22. $.include('../js/jquery-ui-1.8.21.custom.min.js');  
  23. $.include('../css/black-tie/jquery-ui-1.8.21.custom.css');  

将该函数写入叁个common.js文件中,在html中加载该common.js文件,就足以高达指标。该js函数出自以下链接: 
 
注意: 
1.在html5中,<script>标签已经不扶持language属性了,所以自身删除了: 

Java代码  bb电子糖果派对 3

  1. var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";  

中的language='javascript' 
2.原版的书文者在写入js和css标签时,用的是: 

Java代码  bb电子糖果派对 4

  1. document.write("<" + tag + attr + link + "></" + tag + ">");  

而是透超过实际施,发掘document.write()方法会在写入前毁灭原页面包车型地铁保有剧情,也就一定于覆盖的乐趣,那样鲜明达不到本身的内需,作者需求在加载页面时动态的向页面导入共通的js和css,而不能消弭笔者原页面包车型客车任何任何内容,所以查了下api,笔者改用了: 

Java代码  bb电子糖果派对 5

  1. $("head").prepend("<" + tag + attr + link + "></" + tag + ">");  

以此艺术,$("head"卡塔尔(英语:State of Qatar).prepend()方法的机能是在<head>标签的最前端追加写入内容。 

最后,再补充三个艺术,也是经过共通js来达成,应该比地方那些艺术更易于理解: 

Java代码  bb电子糖果派对 6

  1. Dynamically loading external JavaScript and CSS files   
  2.   
  3. To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:   
  4.   
  5. function loadjscssfile(filename, filetype){   
  6. if (filetype=="js"){ //if filename is a external JavaScript file   
  7.   var fileref=document.createElement('script')   
  8.   fileref.setAttribute("type","text/javascript")   
  9.   fileref.setAttribute("src", filename)   
  10. }   
  11. else if (filetype=="css"){ //if filename is an external CSS file   
  12.   var fileref=document.createElement("link")   
  13.   fileref.setAttribute("rel", "stylesheet")   
  14.   fileref.setAttribute("type", "text/css")   
  15.   fileref.setAttribute("href", filename)   
  16. }   
  17. if (typeof fileref!="undefined")   
  18.   document.getElementsByTagName("head")[0].appendChild(fileref)   
  19. }   
  20.   
  21. loadjscssfile("myscript.js", "js") //dynamically load and add this .js file   
  22. loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file   
  23. loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file  

Snippet jQuery Syntax Highlighter 是三个独当一面在SHJS的 开源插件,Snippet提供了简易而且非常快的方法,能够平价的为你带给高亮语法的提醒.能够在IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.6第22中学运维.先轻便为您讲风姿洒脱讲它的用法.在法定的网址也已经有了详实的介绍,这里就有一些翻译一下它所提供的例子.1. 在您的HTML中加载Snippet和JQuery 1. script type="text/javascript" src="js/jquery.js"/script 2. script type="text/javascript" src="js/jquery.snippet.js"/script2. 加载Snippet的CSS 1. link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" /3. 着重是这一步,大家要把下部的代码写在script标志中,让Snippet对pre标识进行操作

 

怎动态加载外界CSS与JS文件

(function(){
xe = window.xe || {};
xe.load = {
filesAdded : {},
loadScript : function(src){
if(this.filesAdded[src]){
return 0;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
this.filesAdded[src] = true;
document.body.appendChild(script);
},
loadScriptString : function(code){
var script = document.createElement('script');
script.type = 'text/javascript';
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;
}
document.body.appendChild(script);
},
loadCss : function(href){
if(this.filesAdded[href]){
return 0;
}
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = href;
this.filesAdded[href] = true;
document.getElementsByTagName('head')[0].appendChild(link);
},
loadCssString : function(code){
var style = document.createElement('style');
style.type = 'text/css';
try{
style.appendChild(document.createTextNode(code));
......余下全文>>  

  1. $(document).ready(function(){ 2. $("pre.htmlCode").snippet("html");
  2. // 找到类名称叫htmlCode的pre标签 4. // 并且以HTML语法来高亮显示它 5. $("pre.styles"卡塔尔(قطر‎.snippet("css",{style:"greenlcd"}卡塔尔国; 6. // 找到类名称叫styles的pre标签 7. // 同不常候以CSS语法来高亮呈现它 8. // 展现的门类为greenlcd 9. $("pre.js").snippet("javascript",{style:"random",transparent:true,showNum:false}卡塔尔;
  3. // 找到类名字为js的pre标签 11. //並且以JavaScript语法来高亮展现它 12. // 展现的项目为在39中随便筛选 13. // 增选背景为透明 14. // 不展现行号
  4. }卡塔尔;4. 足以动态更新您的Snippet 1. $(document卡塔尔.ready(function(卡塔尔(قطر‎{ 2. $("pre#dynamic"卡塔尔(قطر‎.snippet("php",{style:"navy",showNum:false}卡塔尔; 3. // 找到类名叫js的pre标签并把品种选为navy 4. // 遮盖行号 5. $("pre#dynamic"卡塔尔国.click(function(卡塔尔(قطر‎{ 6. $(this卡塔尔(قطر‎.snippet({style:"vampire",transparent:true,showNum:true}卡塔尔(英语:State of Qatar); 7. // 变动snippet的等级次序为vampire 8. // 变动背景为透明 9. // 呈现行号 10. }卡塔尔(英语:State of Qatar); 11. }卡塔尔(英语:State of Qatar);关于愈来愈多的参数能够在Snippet的网址的找到,这里就相当的少说了.简单的说Snippet是两个比较康健的同一时间很好用的来得高亮代码的插件,风野趣的 话,你也得以下来试试.下载地址和例子点这里.

小编在英特网阅读的时候发掘了Snippet插件,其补助广大的代码类的吹捧——举个例子:HTML、CSS、JS、C#等。并有39种区别的鼓吹风格可供接收。

怎在网页中通过jQuery动态加载js代码

你是否想要动态加载此外js文件中的代码?
那正是说那样的话,其实你能够选取使用ajax的艺术加载,
但是dataType要设置成script
那就是说就足以实行相应的代码了。  

plugin,jqueryplugin 贰个轻松易行的动态加载js和css的jquery代码,用于在改变页面时通过js函数加载一些共通的js和css文件。...

其官方网址地址:Snippet插件官方网站。在官英特网,已经相比详细的介绍了插件的行使方式,这里就不在赘述了。

 

和无数标榜插件相似,该插件是依据JQuery的,故在运用的时候,要先引用相关的文件,如下所示:

 

  • <link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" />
  • <script type="text/javascript" src="js/jquery.js"></script>
  • <script type="text/javascript" src="js/jquery.snippet.js"></script>

 

留意:由于在jquery.snippet.js中应用了代码$.browser.opera,而这几个代码在JQuery 1.9版本中曾经移除,故即使援用的是JQuery 1.9版本,则插件使用会不不荒谬。因而,建议直接援引其官方网址上的JQuery 1.4本子。

 

那什么在大团结的博客中利用Snippet插件呢?

首先,把供给运用的文书先上传到博客的后台

说不上,在博客的页面中写援用插件的代码。

抑或是联合在博客后新北的页面设置中会集援用,但那有八个副功效,就是每篇博客都会引用这多少个文本(不管有用没用,都会援用,那么些文件加起来也许有近240K,对没用到这几个插件的页面来讲是个浪费,比如作者早先的近百篇文章)

 

友情链接: 网站地图
Copyright © 2015-2019 http://www.tk-web.com. bb电子糖果派对有限公司 版权所有