同步操作将从 qietuwang/quickcss 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="gb2312" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><title>javascript插件 - 快切</title><meta name="keywords" content="快切,中文css框架,css框架,开源css框架,css框架下载"/><meta name="description" content="快切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止枯燥的跨浏览器兼容性测试。"/><meta name="author" content="快切 kuai.qietu.com"><link rel="stylesheet" href="assets/css/quick.css"><link rel="stylesheet" href="css/addons.css"><!--[if ie 6]><link rel="stylesheet" href="assets/css/ie6.css"><![endif]--><!--[if lt IE 9]><script src="assets/js/html5.js"></script><![endif]--><script src="assets/js/jquery-1.3.2.min.js"></script><script src="assets/js/quick.js"></script><script src="assets/js/addon.js"></script><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><div class="naver"><div class="wrapper"><div class="brand"> <a href="./index.html"><img src="imgs/logo.png"/></a> </div><div class="collapse"><span></span><span></span><span></span></div><div class="module"><ul><li> <strong><a href="started.html">入门</a></strong> </li><li> <strong><a href="grid.html">12列栅格</a></strong> </li><li> <strong><a href="base.html">基础css</a></strong> </li><li> <strong><a href="widget.html">组件</a></strong> </li><li> <strong><a href="javascript.html" class="selected">javascript插件</a></strong> </li><li> <strong><a href="icon.html">图标</a></strong> </li></ul></div><div class="sub"> <a href="http://kuai.qietu.com">前往官网</a> </div></div></div><div class="heading"><div class="wrapper"><h1>javascript插件</h1><h2>基于jquery,javascript的特效插件</h2></div></div><div class="wrapper"><div class="row"><div class="col3"><ul class="sidebar"><li class="selected"> <a href="#popup">弹窗</a></li><li><a href="#tooltip">气泡提醒</a></li><li><a href="#popover">弹出提示</a></li><li><a href="#slider">幻灯片</a></li><li><a href="#sethome">设为首页</a></li><li><a href="#favorite">加入收藏</a></li><li><a href="#sleep">延时效果</a></li><li><a href="#masker">遮罩层</a></li><li><a href="#singlerolling">单行滚动</a></li></ul></div><div class="col9"><div class="part" id=""><h1 class="phead">弹窗<small>通过<code>rel="popup"</code>来调用</small></h1><h2>代码片段</h2><pre><div class="popup" style="display:block;"><br> <div class="head"><br> 编辑学校<br> <del>×ばつ</del><br> </div><br> <div class="body"><br> ...<br> </div><br> <div class="foot"><br> <input name="" type="button" value="确定" class="button blue"><br> <input name="" type="button" value="取消" class="button"><br> </div><br> </div></pre><h2>效果演示</h2><div class="row"><div class="col9"><div class="well" style=" background:#888;"><!--演示开始--><div class="popup" style="display:block; position:relative; top:auto; left:auto; margin:0 auto;"><div class="head"> 编辑学校 <del>×ばつ</del> </div><div class="body"><p> 名称:<input name="" type="text"></p><p> 省份:<select name=""></select>地区:<select name=""></select></p><p> 地址:<input name="" type="text"></p><p> 级别:<select name=""></select><input name="" type="text"></p><p> 类型:<input name="" type="radio" value="">高中<input name="" type="radio" value="">初中<input name="" type="radio" value="">小学 </p></div><div class="foot"><input name="" type="button" value="确定" class="button blue"><input name="" type="button" value="取消" class="button"></div></div><!--演示结束--></div><h2>事件调用</h2><p> <a href="#popup" class="button" rel="popup">点击我弹出POPUP窗口</a> </p><pre><a href="#popup" class="button" rel="popup">点击我弹出POPUP窗口</a></pre><!--调用演示--><div class="popup" id="popup"><div class="head"> 编辑学校 <del>×ばつ</del> </div><div class="body"><p> 这里是内容 </p></div><div class="foot"><input name="" type="button" value="确定" class="button blue"><input name="" type="button" value="取消" class="button"></div></div><!--调用演示结束--></div></div></div><div class="part" id="tooltip"><h1 class="phead">tooltip<small>气泡提醒组件 通过<code>rel="tooltip"</code>来调用</small></h1><h2>代码片段</h2><pre><a rel="tooltip" title="快切是一个开源中文(X)HTML/CSS 框架">快切</a></pre><div class="row"><div class="col9"><h1 class="phead">演示</h1><div class="well" style="color:#ccc;"> <a rel="tooltip" title="快切是一个开源中文(X)HTML/CSS 框架">快切</a>是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止枯燥的跨浏览器兼容性测试。 </div></div></div></div><div class="part" id="popover"><h1 class="phead">popover<small>气泡提醒组件 通过<code>rel="popover"</code>来调用</small></h1><pre><a rel="popover" title="快切是一个开源中文(X)HTML/CSS 框架">快切</a></pre><div class="row"><div class="col9"><h1 class="phead">演示</h1><div class="well" style="color:#ccc;"> <a rel="popover" title="快切是一个开源中文(X)HTML/CSS 框架">快切</a>是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止枯燥的跨浏览器兼容性测试。 </div></div></div></div><div class="part" id="slider"><div class="slider"><div class="item"><h1>快切——响应css框架</h1><h2>web响应兼容ie6,ie7,ie8,firefox,chrome,iphone,ipad浏览器</h2></div><div class="item"><h1>快切——国产开源css框架</h1><h2>it's Made In China!如果你觉得好用就义无反顾的支持吧!</h2></div><!--左右按钮--><div class="prev">‹</div><div class="next">›</div></div><div class="phead">代码片段</div><pre><div class="slider"><br> <br> <br> <div class="item"><br> <h1>比Bootstrap更懂ie6</h1><br> <h2>全面支持ie6浏览器,bootstrap做不到的我们做到了!</h2><br> </div><br> <div class="item"><br> <h1>响应式css框架,国内首款</h1><br> <h2>快切取自"Cutter"的谐音。翻译成中文是切割者的意思!</h2><br> </div><br> <div class="item"><br> <h1>支持国货不仅仅是口号</h1><br> <h2>it's Made In China!如果你觉得好用就义无反顾的支持吧!</h2><br> </div><br> <br> <!--左右按钮--><br> <div class="prev">&lsaquo;</div><br> <div class="next">&rsaquo;</div><br> <br> </div></pre></div><div class="part" id="sethome"><h1 class="phead">设为首页<small>一个兼容所有浏览器的设为首页js代码</small></h1><h4> 一个常用的js功能,但是兼容的比较少,这里整理出兼容所有浏览器的设为首页js代码。</h4><div class="row"><div class="col9"><h1 class="phead">演示</h1><p><a href="javascript:SetHome();" class="button blue">设为首页</a></p><pre><a href="javascript:SetHome();" class="button blue">设为首页</a></pre><div class="phead">代码片段</div><pre>function SetHome(obj,vrl){<br> try{ obj.style.behavior='url(#default#homepage)';obj.setHomePage(vrl); }<br> catch(e){<br> if(window.netscape) {<br> try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } <br> catch (e) { <br> alert("此操作被浏览器拒绝!\n请在浏览器地址栏输入"about:config"并回车\n然后将[signed.applets.codebase_principal_support]设置为'true'");<br> }<br> var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);<br> prefs.setCharPref('browser.startup.homepage',vrl);<br> }<br> }<br>}</pre></div></div></div><div class="part" id="favorite"><h1 class="phead">加入收藏<small>一个兼容所有浏览器的加入收藏js代码</small></h1><div class="row"><div class="col4"> 一个常用的js功能,但是兼容的比较少,这里整理出兼容所有浏览器的加入收藏js代码。 </div><div class="col8"><h1 class="phead">演示</h1><p><a href="javascript:AddFavorite('http://kuai.qietu.com','快切-开源中文css框架');" class="button blue">加入收藏</a></p><pre><a href="javascript:AddFavorite('http://kuai.qietu.com','快切-开源中文css框架');">加入收藏</a></pre><div class="phead">代码片段</div><pre>function AddFavorite(sURL, sTitle)<br>{<br> try { window.external.addFavorite(sURL, sTitle); }<br> catch (e)<br> {<br> try { window.sidebar.addPanel(sTitle, sURL, ""); }<br> catch (e) {<br> alert("加入收藏失败,请使用Ctrl+D进行添加");<br> }<br> }<br>}</pre></div></div></div><div class="part" id="sleep"><script type="text/javascript">$(function(){$('#timer').click(function(){setTimeout(function(){alert(1);},3000);})})</script><h1 class="phead">延时效果<small>展示一个js延时效果的实现方法</small></h1><div class="row"><div class="col4"> 一个常用的js功能,但是兼容的比较少,这里整理出兼容所有浏览器的s代码。 延时效果一般通过setTimeout函数可以简单实现。</div><div class="col8"><h1 class="phead">演示</h1><p><a class="button blue" id="timer">点击我,延时3秒钟弹出窗口</a></p><div class="phead">代码片段</div><pre><script type="text/javascript"><br> setTimeout(function(){<br> alert(1);<br> },3000);<br></script></pre></div></div></div><div class="part" id="masker nojs"><script type="text/javascript">$(function(){$('#masker').not('.nojs').click(function(){$('body').prepend('<div id="mask"></div>').find('#mask').css({opacity:0.2, cursor:'pointer', background:'black', position:'absolute', zIndex:999, width:'100%', height:$(document).height()});/*点击遮罩关闭*/$('#mask').live('click',function(){$(this).remove();})})})</script><h1 class="phead">弹出一个满屏的遮罩层<small>兼容,一段代码搞掂。兼容ie6,ie7,ie8,firefox,chrome</small></h1><div class="row"><div class="col9"><div class="phead">演示<small>推荐,一句话jquery链式写法</small></div><p><a class="button blue" id="masker">点击我</a></p><div class="phead">代码片段</div><pre>$('body').prepend('<div id="mask"></div>').find('#mask').css({opacity:0.2,cursor:'pointer', background:'black', position:'absolute', zIndex:999, width:'100%',height:$(document).height()});/*点击遮罩关闭,live方法用于,为通过js新增的元素添加事件*/<br>$('#mask').live('click',function(){<br> $(this).remove();<br>})</pre></div></div></div><div class="part" id="singlerolling"><h1 class="phead">单行滚动<small>总结出非常常用的单行滚动效果,史上最简单的jQuery实现!代码更小。结构布局更简单。使用更方便。</small></h1><!--演示开始--><div class="singlerolling" style="height:88px;"><ul><li>这是第一行</li><li>这是第一行2</li><li>这是第一行2</li><li>这是第一行2</li><li>这是第一行2</li><li>这是第一行2</li></ul></div><!--演示结束--><div class="row"><div class="col9"><h1 class="phead">演示</h1><!--演示开始--><div class="singlerolling"><ul><li>这是第一行</li><li>这是第一行2</li></ul></div><!--演示结束--><div class="phead">代码片段</div><pre><div class="singlerolling"><br> <ul><br> <li>这是第一行</li><br> <li>这是第一行2</li><br> </ul><br> </div></pre></div></div></div><div class="part" id=""> </div></div></div></div><div class="wrapper footer"><p>© CopyRight 2002-2013, 快切 kuai.qietu.com, Inc.All Rights Reserved.<br/>代码基于<a href="http://www.apache.org/licenses/LICENSE-2.0" rel="nofollow" target="_blank">Apache License v2.0</a>, 文档基于创作共享的 <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="nofollow" target="_blank">署名-非商业使用-相同方 式分享 2.5</a> 协议发布</p></div></body></html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。