kuaiqie
/
javascript.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>javascript插件 - 快切</title>
<meta name="keywords" content="快切,中文css框架,css框架,开源css框架,css框架下载"/>
<meta name="description" content="快切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。"/>
<meta name="author" content="developer@qietu.com">
<link rel="stylesheet" href="assets/css/quick.css">
<link rel="stylesheet" href="assets/css/quick-rwd.css">
<link rel="stylesheet" href="css/prettify.css" >
<link rel="stylesheet" href="css/docs.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.7.1.min.js"></script>
<script src="assets/js/quick.js"></script>
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>

</head>
<body>
<div class="naver">
  <div class="wrapper">
    <div class="brand"> <a href="./index.html">快切</a> </div>

    <div class="module">
      <ul>
        <li> <a href="started.html">入门</a> </li>
        <li> <a href="grid.html">12列栅格</a> </li>
        <li> <a href="base.html">基础css</a> </li>
        <li> <a href="widgets.html">组件</a> </li>
        <li class="selected"> <a href="javascript.html" class="selected">javascript插件</a> </li>
        <li> <a href="icon.html">图标</a> </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="dialog"</code>来调用</small></h1>
        <h2>代码片段</h2>
        <pre>&lt;div class=&quot;dialog&quot; style=&quot;display:block;&quot;&gt;<br>       &lt;div class=&quot;dialog-head&quot;&gt;<br>    	编辑学校<br>        &lt;del&gt;×&lt;/del&gt;<br>    &lt;/div&gt;<br>    &lt;div class=&quot;dialog-body&quot;&gt;<br>    ...<br>    &lt;/div&gt;<br>    &lt;div class=&quot;dialog-foot&quot;&gt;<br>    	&lt;input name=&quot;&quot; type=&quot;button&quot; value=&quot;确定&quot; class=&quot;button blue&quot;&gt;<br>    	&lt;input name=&quot;&quot; type=&quot;button&quot; value=&quot;取消&quot; class=&quot;button&quot;&gt;<br>    &lt;/div&gt;<br>   &lt;/div&gt;</pre>
        <h2>效果演示</h2>
        <div class="row">
          <div class="col9">
            <div class="well" style=" background:#888;">
              <!--演示开始-->
              <div class="dialog" style="display:block; position:relative; top:auto; left:auto; margin:0 auto;">
                <div class="dialog-head"> 编辑学校 <del>×</del> </div>
                <div class="dialog-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="dialog-foot">
                  <input name="" type="button" value="确定" class="button blue">
                  <input name="" type="button" value="取消" class="button">
                </div>
              </div>
              <!--演示结束-->
            </div>
            <h2>事件调用</h2>
            <p> <a href="#dialog" class="button" rel="dialog">点击我弹出POPUP窗口</a> </p>
            <pre>&lt;a href=&quot;#dialog&quot; class=&quot;button&quot; rel=&quot;dialog&quot;&gt;点击我弹出对话框窗口&lt;/a&gt;</pre>
            <!--调用演示-->
            <div class="dialog" id="dialog">
              <div class="dialog-head"> 编辑学校 <del>×</del> </div>
              <div class="dialog-body">
                <p> 这里是内容 </p>
              </div>
              <div class="dialog-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>&lt;a rel=&quot;tooltip&quot; title=&quot;快切是一个开源中文(X)HTML/CSS 框架&quot;&gt;快切&lt;/a&gt;</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>&lt;a rel=&quot;popover&quot; title=&quot;快切是一个开源中文(X)HTML/CSS 框架&quot;&gt;快切&lt;/a&gt;</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="slider-list">
          	 <ul>
             	<li style="display:none;">
                    <h1>快切——响应css框架</h1>
                    <h2>web响应兼容ie6,ie7,ie8,firefox,chrome,iphone,ipad浏览器</h2>
                  </li>
                  <li>
                    <h1>快切——国产开源css框架</h1>
                    <h2>it's Made In China！如果你觉得好用就义无反顾的支持吧！</h2>
                  </li>
             </ul>
          </div>
          <!--左右按钮-->
          <div class="slider-prev">&lsaquo;</div>
          <div class="slider-next">&rsaquo;</div>

        </div>

        <div class="phead">代码片段</div>
        <pre>&lt;div class=&quot;slider&quot;&gt;<br>          &lt;div class=&quot;slider-list&quot;&gt;<br>          	 &lt;ul&gt;<br>             	&lt;li style=&quot;display:none;&quot;&gt;<br>                    &lt;h1&gt;快切——响应css框架&lt;/h1&gt;<br>                    &lt;h2&gt;web响应兼容ie6,ie7,ie8,firefox,chrome,iphone,ipad浏览器&lt;/h2&gt;<br>                  &lt;/li&gt;<br>                  &lt;li&gt;<br>                    &lt;h1&gt;快切——国产开源css框架&lt;/h1&gt;<br>                    &lt;h2&gt;it's Made In China！如果你觉得好用就义无反顾的支持吧！&lt;/h2&gt;<br>                  &lt;/li&gt;<br>             &lt;/ul&gt;<br>          &lt;/div&gt;<br>          &lt;!--左右按钮--&gt;<br>          &lt;div class=&quot;slider-prev&quot;&gt;&amp;lsaquo;&lt;/div&gt;<br>          &lt;div class=&quot;slider-next&quot;&gt;&amp;rsaquo;&lt;/div&gt;<br>      <br>        &lt;/div&gt;</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>&lt;a href=&quot;javascript:SetHome();&quot; class=&quot;button blue&quot;&gt;设为首页&lt;/a&gt;</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(&quot;UniversalXPConnect&quot;);  }  <br>			catch (e) { <br>				alert(&quot;此操作被浏览器拒绝！\n请在浏览器地址栏输入“about:config”并回车\n然后将[signed.applets.codebase_principal_support]设置为'true'&quot;);<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>&lt;a href=&quot;javascript:AddFavorite('http://kuai.qietu.com','快切-开源中文css框架');&quot;&gt;
加入收藏&lt;/a&gt;</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, &quot;&quot;); }<br>        catch (e) {<br>            alert(&quot;加入收藏失败，请使用Ctrl+D进行添加&quot;);<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>&lt;script type=&quot;text/javascript&quot;&gt;<br>	setTimeout(function(){<br>		alert(1);<br>	},3000);<br>&lt;/script&gt;</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('&lt;div id=&quot;mask&quot;&gt;&lt;/div&gt;').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>&lt;div class=&quot;singlerolling&quot;&gt;<br>            	&lt;ul&gt;<br>                	&lt;li&gt;这是第一行&lt;/li&gt;<br>                	&lt;li&gt;这是第一行2&lt;/li&gt;<br>                &lt;/ul&gt;<br>            &lt;/div&gt;</pre>
          </div>
        </div>
      </div>
      <div class="part" id=""> </div>
    </div>
  </div>
</div>
<div class="wrapper footer">
  <p>&copy; 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>

<!--浮动菜单-->
<div class="absbar">
	<ul>
    	<li><a href="###">分享</a>
        	<ul>
            	<li><a href="http://weibo.com/qietuwang" target="_blank">微博</a></li>
            	<li><a href="###">微信</a>
                	<div class="qrcode">
                    	<img src="imgs/getqrcode.jpg"/>
                        <br/>请扫描关注快切微信
                    </div>
                </li>
            </ul>
        </li>
    	<li><a href="http://koubei.baidu.com/s/kuai.qietu.com" target="_blank">点评</a></li>
    	<li><a href="###"><i class="icon icon-chevron-up"></i></a></li>
    	<li><a href="###"><i class="icon icon-chevron-down"></i></a></li>
    </ul>
</div>
</body>
</html>