代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS插件 - Slicy</title>
<meta name="keywords" content="Slicy,中文css框架,css框架,开源css框架,css框架下载"/>
<meta name="description" content="Slicy是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。"/>
<link rel="stylesheet" href="assets/css/slicy.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/slicy.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"><img src="imgs/logo.png" width="80"/></a> </div>
<div class="module">
<ul>
<li> <a href="slicy.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">JS插件</a> </li>
<li> <a href="icon.html">图标</a> </li>
</ul>
</div>
<div class="sub"> <a href="http://www.qietu.com/?slicy">切图网</a> </div>
</div>
</div>
<div class="heading">
<div class="wrapper">
<h1>JS插件</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><div class="dialog" style="display:block;"><br> <div class="dialog-head"><br> 编辑学校<br> <del>×</del><br> </div><br> <div class="dialog-body"><br> ...<br> </div><br> <div class="dialog-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="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><a href="#dialog" class="button" rel="dialog">点击我弹出对话框窗口</a></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><a rel="tooltip" title="Slicy是一个开源中文(X)HTML/CSS 框架">Slicy</a></pre>
<div class="row">
<div class="col9">
<h1 class="phead">演示</h1>
<div class="well" style="color:#ccc;"> <a rel="tooltip" title="Slicy是一个开源中文(X)HTML/CSS 框架">Slicy</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="Slicy是一个开源中文(X)HTML/CSS 框架">Slicy</a></pre>
<div class="row">
<div class="col9">
<h1 class="phead">演示</h1>
<div class="well" style="color:#ccc;"> <a rel="popover" title="Slicy是一个开源中文(X)HTML/CSS 框架">Slicy</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>Slicy——响应css框架</h1>
<h2>web响应兼容ie6,ie7,ie8,firefox,chrome,iphone,ipad浏览器</h2>
</li>
<li>
<h1>Slicy——国产开源css框架</h1>
<h2>it's Made In China！如果你觉得好用就义无反顾的支持吧！</h2>
</li>
</ul>
</div>
<!--左右按钮-->
<div class="slider-prev">‹</div>
<div class="slider-next">›</div>
</div>
<div class="phead">代码片段</div>
<pre><div class="slider"><br> <div class="slider-list"><br> <ul><br> <li style="display:none;"><br> <h1>Slicy——响应css框架</h1><br> <h2>web响应兼容ie6,ie7,ie8,firefox,chrome,iphone,ipad浏览器</h2><br> </li><br> <li><br> <h1>Slicy——国产开源css框架</h1><br> <h2>it's Made In China！如果你觉得好用就义无反顾的支持吧！</h2><br> </li><br> </ul><br> </div><br> <!--左右按钮--><br> <div class="slider-prev">&lsaquo;</div><br> <div class="slider-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://www.slicy.cn','Slicy-开源中文css框架');" class="button blue">加入收藏</a></p>
<pre><a href="javascript:AddFavorite('http://www.slicy.cn','Slicy-开源中文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, Qietu Network Technology Co., Ltd. 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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手