手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

jQuery Alert and YmPrompt

Submitted by gouki on 2010, May 10, 9:21 AM

不知道从什么时候起，网页上那烦人的alert,prompt,confirm框都成了很多人讨厌的对象，因为他的样式太丑了。ExtJS中的alert就是适合他自己的样式的弹出，可是其他不是框架的代码中要有漂亮的对话框怎么办？
jQuery Alert 是jQuery的官方插件，Ymprompt是国内开发人员写的，其于jQuery的一个插件，当然是各有所长。

jQuery Alert相对比较简单一点，用法也简单，而Ymprompt就复杂的多了。

这是关于jQuery Alert的介绍：

http://www.cnblogs.com/whitewolf/archive/2010/05/09/1731120.html，介绍请移步左边的链接
  1. 这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有如下这些特点：  
  2.   
  3.   1：这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。   
  4.   2：允许你自定义对话框的标题。   
  5.   3：在ＩＥ７中，可以使你避免使用JavaScript 的prompt（）函数带来的页面重新加载。   
  6.   4：这些方法都模拟了Windows的模式对话框。在你改变改变浏览器窗口大小时候，它能够自适应用户窗口的调整。   
  7.   5：如果你引入了jQuery UI Draggable plugin插件，那这个插件也可以被自由拖动。  

而Ymprompt在这里有一个简单的介绍：http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html，写的很多，但都是document，并非介绍，所以我就不贴了。

jQuery Alert在官方有的下载，我也就不提供啦。可以尝试一下。

在ThinkSNS中，用的是ymprompt，所以我才看了一下这玩意，但并非能够完全满足我的需求，如果仅仅使用简单的alert、prompt、confirm之类的，应该是够用了。

Tags: jquery, jqueryui, alert, ymprompt

Javascript | 评论:0 | 阅读:22068

JS:截取文章一部分显示(无损html)

Submitted by gouki on 2010, May 4, 11:23 AM

很多做站的朋友都会有一个问题，在显示摘要的时候，如果摘要前有很多图片，那么显示出来的页面是不太正常的。比如，摘要显示100个字符，可是如果前面有很多图片，去掉图片代码后，100个字符已经几乎用完了。怎么办？
我个人是这样处理的。在PHP中，先用strip_tags去除内容中的标签，然后trim一下，再进行截取。这样的话就几乎没有什么问题了。
而这篇文章就有点意思，用作者的话来说，是无损html。来吧看看他写的内容。

最近在做一些内容搜索的工作，搜索出来的内容为html格式，列表部分需要显示每项内容的一部分。因为是html格式的内容，直接截取内容的前多少字符显 然不合适了。而如果直接去掉所有html格式然后再截取又无法达到想要的效果，再网上搜了一通之后，写下如下代码应该可以满足基本的要求了。(js写的， 因为容易调试)

JavaScript代码
  1. var br = {};  
  2. br.spTags = ["img","br","hr"];/*不需要成对出现的标记*/  
  3. br.contain = function(arr,it){  
  4.     for(var i=0,len=arr.length;i<len;i++){  
  5.         if(arr[i]==it){  
  6.             return true;      
  7.         }  
  8.     }  
  9.     return false;  
  10. }  
  11. br.subArtc = function(article,worldNum){  
  12.     var result = [];  
  13.     /*首先截取需要的字串*/  
  14.     var wcount = 0;  
  15.     var startTags = [],endTags = [];  
  16.     var isInTag = false;  
  17.     for(var i=0,len=article.length;i<len;i++){  
  18.         var w = article[i];  
  19.         result.push(w);  
  20.         if(w=="<"){  
  21.             isInTag = true;      
  22.         }  
  23.         if(!isInTag){  
  24.             wcount++;  
  25.             if(wcount==worldNum){  
  26.                 break;      
  27.             }  
  28.         }  
  29.         if(w==">"){  
  30.             isInTag = false;      
  31.         }  
  32.     }  
  33.     /*对字串进行处理*/  
  34.     var j=0;  
  35.     isInTag = false;  
  36.     var isStartTag = true;  
  37.     var tagTemp = "";  
  38.     while(j<i){  
  39.         w = result[j];  
  40.         if(isInTag){  
  41.             if(w==">" || w==" " || w=="/"){  
  42.                 isInTag = false;  
  43.                 if(isStartTag){  
  44.                     startTags.push(tagTemp);      
  45.                 }else{  
  46.                     endTags.push(tagTemp);      
  47.                 }  
  48.                 tagTemp = "";  
  49.             }  
  50.             if(isInTag){  
  51.                 tagTemp+=w;      
  52.             }  
  53.         }  
  54.         if(w=="<"){  
  55.             isInTag = true;  
  56.             if(result[j+1]=="/"){  
  57.                 isStartTag = false;  
  58.                 j++;  
  59.             }else{  
  60.                 isStartTag = true;      
  61.             }  
  62.         }  
  63.         j++;  
  64.     }  
  65.     /*剔除img,br等不需要成对出现的标记*/  
  66.     var newStartTags = [];  
  67.     for(var x=0,len=startTags.length;x<len;x++){  
  68.         if(!br.contain(br.spTags,startTags[x])){  
  69.             newStartTags.push(startTags[x]);  
  70.         }  
  71.     }  
  72.     /*添加没有的结束标记*/  
  73.     var unEndTagsCount = newStartTags.length - endTags.length;  
  74.     while(unEndTagsCount>0){  
  75.         result.push("<");  
  76.         result.push("/")  
  77.         result.push(newStartTags[unEndTagsCount-1]);  
  78.         result.push(">");  
  79.         unEndTagsCount--;  
  80.     }  
  81.     return result.join("");  
  82. };  

基本思路：

1.绕过标记，取得实际内容字数 ，如需要显示内容前100个字，绕过标记检索，得到第一百个字实际的索引。然后截取此索引前面的字串。
2.根据一得到的字串，得到这个字串中存在的开始标记和结束标记。注：此处的开始标记标识以"<"开通，且下一个字符不为"/"。
3.剔除2中 得到的开始标记中的不需要成对出现的标记。如br,img,hr等。
4.对比经过3处理的开始标记和2中得到的结束标记，没有配成对的在合适的位置为其配对。

此功能没有经过严格的测试，大家若有兴趣可以可以帮忙测试，有更好的想法的也可以回帖讨论。 

--EOF--http://www.cnblogs.com/bravfing/archive/2010/05/02/1725924.html

我没有用PHP的试过，因为在PHP中本身对多字节的支持就不是特别的好不象js，认为中文就是一个字符。不过思路可以考虑一下，但真正要显示摘要的话，当然还是不要含 HTML代码，因为那可能会影响页面布局。

 

Tags: substr, html, 页面布局

Javascript | 评论:3 | 阅读:26262

用按位或操作将 浮点数 转成 整数

Submitted by gouki on 2010, April 28, 9:56 AM

看到一篇文章，是这样说的：

use bitwish Operators "|"  Convert a floating-point value to an int
意思就是：
由于位操作只对整型才有意义,所以表达式中的浮点数会首先被js解析器转换成整型.
然后再用js解析器本身的语言(例如:c++)的或操作将算 运符两边的数值运算,所以该例的结果得到整数1.

 

JavaScript代码
  1. alert(0|'123.55');  
  2. alert(parseInt('123.55'));  
  3. alert(Math.round('123.55'));  

上面三种都可以转成int，但是math.round会四舍五入。

Tags: 浮点, 位或

Javascript | 评论:0 | 阅读:22581

javascript:void(0);

Submitted by gouki on 2010, April 28, 9:08 AM

我看的这篇文章介绍的很少，只是一个简单的说明，在网页中，很多人把void当成了一个阻止默认事件发生的工具，因为他没有返回值，所以使用的时候可以肆无忌惮一点。

原文如下：

Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下：
1. javascript:void (expression)
2. javascript:void expression
注：expression 是一个要计算的 Javascript 标准的表达式，圆括号是可选的。

当使用 void 操作符指定的超链接时，表达式会被计算但是不会在当前文档处装入任何内容。

举例：

XML/HTML代码
  1. <A HREF="javascript:void(0)">单此处什么也不会发生</A>  
  2. <A HREF="javascript:void(document.form.submit())">单此处提交表单</A>  

跳转的几种办法：

XML/HTML代码
  1. 1.window.open("url")  
  2.   
  3. 2. 用自定义函数  
  4.          <script>  
  5.          function openWin(obj,target,args)  
  6.          {  
  7.              obj.target="_blank";  
  8.              obj.href = target+"?stationno="+args;  
  9.              obj.click();  
  10.          }  
  11.         </script>  
  12.   
  13. <a href="javascript:void(0)" onclick="openWin(this,"…………",3)">XXXX</a>  
  14.   
  15. 3.window.location.href="";  

 

上述第二种就是所谓利用void来阻止默认链接事情的发生。
还有一种情况就是在href里加入"###"，即href="###"，为什么是3个而不是一个？这也有一个缘故，请查看：FORM不能跳转，当找不到相应的锚点时，页面才不会往上滚动，如果指定锚点，而锚点名称为空，页面会滚动到顶部。###,其实只是指定一个不存在的锚点而已（又写的乱了）

Tags: void, window.open

Javascript | 评论:1 | 阅读:24537

雅虎JavaScript架构师：网页开发技术安全优先

Submitted by gouki on 2010, April 26, 9:30 PM

html5 越来越近了，HTML5可能给我们带来很大的改变，就象新的标签可以支持视频了。看看javascript的架构师能够做什么吧。原文来自http://www.cnbeta.com/articles/109538.htm

由于当前技术仍偏向功能强化为主要思维，指令码趋向庞杂的结果，容易产生更多安全漏洞，且失去快速因应攻击调整架构的灵活性。
身 为JavaScript网路技术重要推手的雅虎（Yahoo!）架构设计师Douglas Crockford表示，现行网页开发技术思维仍偏重多媒体功能或浏览效能的提升，未来应以安全为第一优先。 Crockford 现为Yahoo!资深JavaScript架构师，负责YUI（Yahoo! User Interface）的架构设计，并且担任ECMA JavaScript 2.0技术委员会成员，为JavaScript开发社群大师级人物，此次受邀来台参加OSDC（Open Source Developer's Conference Taiwan）进行专题演讲，向国内开发者介绍ECMA JavaScript的发展。

Crockford向媒体阐述网络技术发展时指出，当前的网络技术仍然不脱过去的思维，网页开发技术仍以功能强化、浏览网页效能提升为主，虽然强 化了网络开发的丰富性，但未将网络安全列为开发优先考虑因素的结果，致使网络安全事件层出不穷。

延续过去网络开发思维的结果，现今网络技 术强调强大的互动、多媒体功能，但也让一些攻击手法兴起，以XSS（Cross-Site Scripting）为例，由于内嵌多个不同来源的脚本，容易让黑客借指令集趁虚而入，窃取用户端计算机的数据。

虽然也有新的技术，如 Google推动的Caja，用以防范XSS跨站攻击手法，但整体技术发展方向仍是朝功能、效能提升前进。

以HTML 5技术为例，Crockford表示，虽然HTML5增加了许多功能，但让整个脚本变得更为庞大且复杂，容易产生漏洞遭到攻击；另外，支持存取使用者电 脑、手机的终端数据，将数据被窃的安全风险扩大至手机上，而过于庞大复杂的结果，不容易因应日新月异的攻击手法改变，长期而言易形成安全风险。

对 于当前浏览器业者形成速度竞赛，纷纷强化JavaScript引擎加速网页浏览速度，号称最快的浏览速度，他认为，浏览器加速网页浏览速度虽是好事，但这 样改善方式有限，只在5至10%的终端浏览器部份加速，若能同时改善服务器端，加速的效果更大。

对于制定中的新标准ECMA Script 5，他乐观预期未来将成为主要的网络开发标准，虽然Apple、Chrome还不明确，但包括IE、FireFox、Opera都倾向ECMA Script 5，今年应会看到新的浏览器应用。
--EOF--
HTML5已经被越来越多的浏览器所支持，IE还能挺多久？是否又会创造出什么新标准？从IE4开始，多少网页设计师为了兼容所有的浏览器而痛苦？以后又会怎么样？IE6还有这么多用户，怎么办？这一些都让人迷惘啊。HTML5来了，对于前端工程师的压力就要更大一点了。代码没写好，很可能就直接被人利用了。以前的XSS漏洞可能会被更加扩大、放大。还是需要多学一点安全了

Tags: html5, ecmascript, javascript, chrome, yahoo

Javascript | 评论:0 | 阅读:19984

Records:307«‹26272829303132333435›»