设置字体: 小中大

JQ模块库09.12.08

本文章收藏综合各种流行的JQ特效，以标准化，模块化，语义化为基础达到结构，表现，行为完美分离。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HeMin JQ模块库 09.12.8 （www.hemin.cn/blog）</title> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/main.css" type="text/css" /> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/skin/skin_3.css" type="text/css" id="cssfile" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  <script src="http://www.hemin.cn/jq/scripts/jquery.cookie.js" type="text/javascript">//cookie插件</script> <script src="http://www.hemin.cn/jq/scripts/jcarousellite.js" type="text/javascript">//jcarousellite插件实现图片无缝滚动</script> <script src="http://www.hemin.cn/jq/scripts/jquery.jqzoom.js" type="text/javascript">//jqzoom插件实现放大图片</script> <script src="http://www.hemin.cn/jq/scripts/jquery.thickbox.js" type="text/javascript">//thickbox插件弹出放大图片</script> <script src="http://www.hemin.cn/jq/scripts/jquery.progression.js" type="text/javascript">//progression插件</script> <script src="http://www.hemin.cn/jq/scripts/jquery.pstrength-min.1.2.js" type="text/javascript">//pstrength插件</script> <script src="http://www.hemin.cn/jq/scripts/jquery.soChange.js" type="text/javascript">//soChange插件</script> <script src="http://www.hemin.cn/jq/scripts/tipswindown.js" type="text/javascript">//tipswindown插件</script> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/tipswindown.css" type="text/css" /> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/thickbox.css" type="text/css" /> <script src="http://www.hemin.cn/jq/scripts/jq-main.js" type="text/javascript"></script> </head> <body> <div id="box">以标准化，模块化，语义化为基础达到结构，表现，行为完美分离。<span class="close">X</span></div> <div id="warp"> <div id="header"> <a href="#" class="logo"title="HeMin JQ模块库">HeMin JQ模块库 09.12.8</a> <ul id="skin"> <li id="skin_0" title="蓝色">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色" class="selected" >天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> </div> <div id="navigation" class="nav"> <ul> <li><a href="#">HeMin-01</a></li> <li><a href="#">HeMin-02</a> <ul> <li><a href="#">HeMin-02-01</a></li> <li><a href="#">HeMin-02-02</a></li> <li><a href="#">HeMin-02-03</a></li> </ul> </li> <li><a href="#">HeMin-03</a> <ul> <li><a href="#">HeMin-03-01</a></li> <li><a href="#">HeMin-03-02</a></li> </ul> </li> <li><a href="#">HeMin-04</a> <ul> <li><a href="#">HeMin-04-01</a></li> <li><a href="#">HeMin-04-02</a></li> <li><a href="#">HeMin-04-03</a></li> <li><a href="#">HeMin-04-04</a></li> </ul> </li> <li><a href="#">HeMin-05</a></li> </ul> </div> <div id="main"> <div id="notice"> <ul class="scroll-container"> <li><a href="#" class="tooltip" title="HeMin-01">1.HeMin-01111111111111111111111</a></li> <li><a href="#" class="tooltip" title="HeMin-02">2.HeMin-02222222222222222222222</a></li> <li><a href="#" class="tooltip" title="HeMin-03">3.HeMin-03333333333333333333333</a></li> <li><a href="#" class="tooltip" title="HeMin-04">4.HeMin-04444444444444444444444</a></li> <li><a href="#" class="tooltip" title="HeMin-05">5.HeMin-05555555555555555555555</a></li> <li><a href="#" class="tooltip" title="HeMin-06">6.HeMin-06666666666666666666666</a></li> <li><a href="#" class="tooltip" title="HeMin-07">7.HeMin-07777777777777777777777</a></li> <li><a href="#" class="tooltip" title="HeMin-08">8.HeMin-08888888888888888888888</a></li> </ul> </div> <div class="part_l"> <div id="news"> <h3>新闻从上滚动</h3> <div class="scrollNews"> <ul> <li><a href="#" class="tooltip" title="HeMin-01">1.HeMin-01111111111111111111111</a></li> <li><a href="#" class="tooltip" title="HeMin-02">2.HeMin-02222222222222222222222</a></li> <li><a href="#" class="tooltip" title="HeMin-03">3.HeMin-03333333333333333333333</a></li> <li><a href="#" class="tooltip" title="HeMin-04">4.HeMin-04444444444444444444444</a></li> <li><a href="#" class="tooltip" title="HeMin-05">5.HeMin-05555555555555555555555</a></li> <li><a href="#" class="tooltip" title="HeMin-06">6.HeMin-06666666666666666666666</a></li> <li><a href="#" class="tooltip" title="HeMin-07">7.HeMin-07777777777777777777777</a></li> <li><a href="#" class="tooltip" title="HeMin-08">8.HeMin-08888888888888888888888</a></li> </ul> </div> <div class="module_up_down" ><span>动画式收缩展开</span></div> </div> <div id="procatalog"> <h3>分类树展开和关闭</h3> <ul class="m-treeview"> <li class="m-expanded"> <span>父栏目1</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> <li class="m-expanded"> <span>父栏目2</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> <li class="m-expanded"> <span>父栏目3</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> </ul> <div class="module_up_down" ><span>动画式收缩展开</span></div> </div> <div id="tab"> <h3>选项卡</h3> <div class="content"> <div class="tab_menu"> <ul> <li class="selected">HeMin01</li> <li>HeMin02</li> <li>HeMin03</li> </ul> </div> <div class="tab_box"> <div class="tab-content"> 111111111111111111111111111 </div> <div class="tab-content hide"> 222222222222222222222222222 </div> <div class="tab-content hide"> 333333333333333333333333333 </div> </div> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="magnifier"> <h3>放大镜</h3> <div class="jqzoom"><img src="http://www.hemin.cn/jq/images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="http://www.hemin.cn/jq/images/blue_one_big.jpg" id="bigImg"/></div> <span> <a href="http://www.hemin.cn/jq/images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img alt="点击看大图" src="http://www.hemin.cn/jq/images/look.gif" /> </a> </span> </div> <div id="switch_photo"> <h3>小图切换大图</h3> <div class="big_img"> <img src="http://www.hemin.cn/jq/images/pro_img/blue_one_small.jpg" height="300" width="298" alt="" /> </div> <ul class="imgList"> <li class="img01"><img src="http://www.hemin.cn/jq/images/pro_img/blue_one.jpg" alt="" /></li> <li class="img02"><img src="http://www.hemin.cn/jq/images/pro_img/green_one.jpg" alt="" /></li> <li class="img03"><img src="http://www.hemin.cn/jq/images/pro_img/yellow_one.jpg" alt="" /></li> <li class="img04"><img src="http://www.hemin.cn/jq/images/pro_img/green_one.jpg" alt="" /></li> </ul> </div> <div id="MultiSelects"> <h3>MultiSelects(左右选框)</h3> <div class="MultiSelects-content"> <table width="298" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="29"> <input type="button" name="s1up" id="s1up" value="↑" /><br /> <input type="button" name="s1down" id="s1down" value="↓" /></td> <td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;"> <option value="opt01">option01</option> <option value="opt02">option02</option> <option value="opt03">option03</option> <option value="opt04">option04</option> <option value="opt05">option05</option> <option value="opt06">option06</option> <option value="opt07">option07</option> <option value="opt08">option08</option> <option value="opt09">option09</option> <option value="opt10">option10</option> </select></td> <td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td> <td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;"> </select></td> <td width="119"> <input type="button" name="s2up" id="s2up" value="↑" /><br /> <input type="button" name="s2down" id="s2down" value="↓" /></td> </tr> </table> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="progress-bar"> <h3>进程条</h3> <div class="boxed"> <div class="right"> normal: <div class="progressbar_nojs">50 %</div> </div> <div class="left"> jquery demo:<br /> <span id="rain">50</span> %<div class="progressbar" id="progress-1">50 %</div> Value : <input type="text" id="progress-current" value="50" size="5" /> <input type="button" value="edit" id="progress-button" /> <span>20 %</span><div class="progressbartext" >20 %</div> </div> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="password-length"> <h3>密码长度提示</h3> <div class="password-content"> <strong>密码：</strong><input class="password" type="password" name="Password" size="20"/> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="container"> <h3>TipsWindown 1.0弹出层</h3> <div class="content"> <ol> <li> 弹出文本信息提示： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")</blockquote> <button id="text1">点击我弹出提示</button> </li> <li> 弹出页面中的某个ID的html： <br /> <blockquote>tipsWindown("标题","id:testID","300","200","true","","true","id")</blockquote> <button id="id1">点击我弹出提示</button> <div id="testID" style="display: none"> <p>我是测试ID里的内容</p> <br /> 我换行了... </div> </li> <li> 弹出图片： <br /> <blockquote>tipsWindown("图片","img:图片路径","250","150","true","","true","img")</blockquote> <button id="img1">点击我弹出提示</button> </li> <li> get加载一个.html文件（也可以是.php/.asp?id=4之类的）： <br /> <blockquote>tipsWindown("标题","url:get?test.html","250","150","true","","true","text"); </blockquote> <button id="url1">点击我弹出提示</button> </li> <li> 加载一个页面到框架显示：<br /> <blockquote>tipsWindown("标题","iframe:http://hemin.cn","900","580","true","","true","leotheme"); </blockquote> <button id="iframe1">点击我弹出提示</button> </li> <li> 弹出一个不能拖动且没有遮罩背景的文本信息层： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")</blockquote> <button id="text2">点击我弹出提示</button> </li> <li> 弹出一个不能拖动，三秒钟自动关闭的层： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")</blockquote> <button id="text3">点击我弹出提示</button> </li> </ol> </div> <div class="module_up_down" ><span>收缩</span></div> </div> </div> <div class="part_r"> <div id="pro-list"> <h3>新款上市模块横向滚动</h3> <div class="pro-content"> <ul> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> </ul> </div> <div class="module_left_right"><span class="goLeft">左移动</span><span class="goRight">右移动</span></div> </div> <div id="change"> <h3>1.默认最简易模式</h3> <div class="changeBox_a1" id="change_1"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> </div> </div> <div id="change"> <h3>2.带前后按钮</h3> <div class="changeBox_a1" id="change_2"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> </div> </div> <div id="change"> <h3>3.数字导航切换及自定义当前数字的class</h3> <div class="changeBox_a1" id="change_3"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <ul class="ul_change_a2"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> </ul> </div> </div> <div id="change" class="change-ico-title"> <h3>4.切换对象为其他，这里为包含图片和标题的层</h3> <div class="changeBox_a1" id="change_32"> <div class="changeDiv"> <h4><a href="#">图片111111111说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#1"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片222222222说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#2"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片333333333说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#3"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片444444444说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#4"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> </div> <ul class="ul_change_a2"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> </ul> </div> </div> <div id="change"> <h3>5.平滑过渡间歇时间为0</h3> <div class="changeBox_a1" id="change_33"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> <div id="change" class="change-ico-but"> <h3>6.带导航图标及按钮</h3> <div class="changeBox_a1" id="change_4"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> <div id="change"> <h3>7.不自动切换</h3> <div class="changeBox_a1" id="change_5"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> </div> </div> <div id="f_links_box" class="posr"> <a href="#" id="f_left"></a><a href="#" id="f_right"></a> <div id="f_links_list"> <ul> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo"/></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> </ul> </div> </div> <div id="footer"> <p>JQ模块库版权所有提供广大JQ学习爱好者</p> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

十二月 8th, 2009 in JS/JQuery, 原创作品 | tags: JQ, 库, 模块化, 语义化 | 1,893 次浏览 | 35 Comments

JavaScript库开发规则

这是base2的作者Dean Edwards 2007年3月份的一篇文章。最近正在折腾怎么写JavaScript库，感觉Dean给出的这些规则很中肯，忍不住就转来了。

1. 保持无侵入性
我的HTML标记不想知道你的JavaScript代码。

2. 严禁修改和扩展Object.prototype!
这条很重要，因此需要一条完全针对它的规则。对象是JavaScript功能的基本构建模块，不要搞乱它们。

3. 不要过分扩展
对JavaScript内建对象的扩展越少越好。别误解我的意思。JavaScript的原生对象中有用的方法是有点少，有时不得不添加一两个自己的方法。但是，对于富有创造力的（库）程序员来说，添加这“一两个”方法是不够的。然而，请停下来！添加需要的就好。你对JavaScript内建对象的扩展越少，你的代码与其它框架产生的冲突的概率就越少。
Show more »

十一月 5th, 2009 in JS/JQuery | tags: js, 库, 规范 | 1,099 次浏览 | 5 Comments

此页面上的内容需要较新版本的 Adobe Flash Player。

He Min Blog 每一步细节注定你将来的命运。

JQ模块库09.12.08

JavaScript库开发规则

Webmaster

Category

Tag Cloud

Recent Article

Random Pages

Recent Comments

Gallery

Pigeonhole

Links

Tunnel

Translation

访问者分析