javascript插件

基于jquery,javascript的特效插件

弹窗通过rel="dialog"来调用

代码片段

<div class="dialog" style="display:block;">
<div class="dialog-head">
编辑学校
<del>×</del>
</div>
<div class="dialog-body">
...
</div>
<div class="dialog-foot">
<input name="" type="button" value="确定" class="button blue">
<input name="" type="button" value="取消" class="button">
</div>
</div>

效果演示

编辑学校 ×

名称:

省份: 地区:

地址:

级别:

类型: 高中 初中 小学

事件调用

点击我弹出POPUP窗口

<a href="#dialog" class="button" rel="dialog">点击我弹出对话框窗口</a>
编辑学校 ×

这里是内容

tooltip气泡提醒组件 通过rel="tooltip"来调用

代码片段

<a rel="tooltip" title="快切是一个开源中文(X)HTML/CSS 框架">快切</a>

演示

快切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止枯燥的跨浏览器兼容性测试。

popover气泡提醒组件 通过rel="popover"来调用

<a rel="popover" title="快切是一个开源中文(X)HTML/CSS 框架">快切</a>

演示

快切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止枯燥的跨浏览器兼容性测试。
  • 快切——响应css框架

    web响应兼容ie6,ie7,ie8,firefox,chrome,iphone,ipad浏览器

  • 快切——国产开源css框架

    it's Made In China!如果你觉得好用就义无反顾的支持吧!

代码片段
<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>

设为首页一个兼容所有浏览器的设为首页js代码

一个常用的js功能,但是兼容的比较少,这里整理出兼容所有浏览器的设为首页js代码。

演示

设为首页

<a href="javascript:SetHome();" class="button blue">设为首页</a>
代码片段
function SetHome(obj,vrl){
try{ obj.style.behavior='url(#default#homepage)';obj.setHomePage(vrl); }
catch(e){
if(window.netscape) {
try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); }
catch (e) {
alert("此操作被浏览器拒绝!\n请在浏览器地址栏输入“about:config”并回车\n然后将[signed.applets.codebase_principal_support]设置为'true'");
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage',vrl);
}
}
}

加入收藏一个兼容所有浏览器的加入收藏js代码

一个常用的js功能,但是兼容的比较少,这里整理出兼容所有浏览器的加入收藏js代码。

演示

加入收藏

<a href="javascript:AddFavorite('http://kuai.qietu.com','快切-开源中文css框架');">
加入收藏</a>
代码片段
function AddFavorite(sURL, sTitle)
{
try { window.external.addFavorite(sURL, sTitle); }
catch (e)
{
try { window.sidebar.addPanel(sTitle, sURL, ""); }
catch (e) {
alert("加入收藏失败,请使用Ctrl+D进行添加");
}
}
}

延时效果展示一个js延时效果的实现方法

一个常用的js功能,但是兼容的比较少,这里整理出兼容所有浏览器的s代码。 延时效果一般通过setTimeout函数可以简单实现。

演示

点击我,延时3秒钟弹出窗口

代码片段
<script type="text/javascript">
setTimeout(function(){
alert(1);
},3000);
</script>

弹出一个满屏的遮罩层兼容,一段代码搞掂。兼容ie6,ie7,ie8,firefox,chrome

演示推荐,一句话jquery链式写法

点击我

代码片段
$('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新增的元素添加事件*/
$('#mask').live('click',function(){
$(this).remove();
})

单行滚动总结出非常常用的单行滚动效果,史上最简单的jQuery实现!代码更小。结构布局更简单。使用更方便。

  • 这是第一行
  • 这是第一行2
  • 这是第一行2
  • 这是第一行2
  • 这是第一行2
  • 这是第一行2

演示

  • 这是第一行
  • 这是第一行2
代码片段
<div class="singlerolling">
<ul>
<li>这是第一行</li>
<li>这是第一行2</li>
</ul>
</div>