首页 > 代码库 > jquery插件

jquery插件

2024-07-21 00:11:45   217人阅读

这里有一个简单的插件的例子，也是我从jquery基础教程2里面摘抄的

1、jquery.slidefade.js插件

jQuery.fn.slideFadeOut = function(speed, callback) {
<!-- lang: js -->
  return this.animate({
<!-- lang: js -->
    height: ‘hide‘,
<!-- lang: js -->
    opacity: ‘hide‘
<!-- lang: js -->
  }, speed, callback);
<!-- lang: js -->
};
<!-- lang: js -->

<!-- lang: js -->
jQuery.fn.slideFadeIn = function(speed, callback) {
<!-- lang: js -->
  return this.animate({
<!-- lang: js -->
    height: ‘show‘,
<!-- lang: js -->
    opacity: ‘show‘
<!-- lang: js -->
  }, speed, callback);
<!-- lang: js -->
};
<!-- lang: js -->

<!-- lang: js -->
jQuery.fn.slideFadeToggle = function(speed, callback) {
<!-- lang: js -->
  return this.animate({
<!-- lang: js -->
    height: ‘toggle‘,
<!-- lang: js -->
    opacity: ‘toggle‘
<!-- lang: js -->
  }, speed, callback);
<!-- lang: js -->
};

2、使用插件里面定义的通用方法再写shortcuts.js

$(document).ready(function() {
<!-- lang: js -->
  $(‘#out‘).click(function() {
<!-- lang: js -->
    $(‘p‘).slideFadeOut(‘slow‘);
<!-- lang: js -->
    return false;
<!-- lang: js -->
  });
<!-- lang: js -->
  $(‘#in‘).click(function() {
<!-- lang: js -->
    $(‘p‘).slideFadeIn(‘slow‘);
<!-- lang: js -->
    return false;
<!-- lang: js -->
  });
<!-- lang: js -->
  $(‘#toggle‘).click(function() {
<!-- lang: js -->
    $(‘p‘).slideFadeToggle(‘slow‘);
<!-- lang: js -->
    return false;
<!-- lang: js -->
  });
<!-- lang: js -->
});

3、本例子中会用到的css

body {
font: 62.5% Arial, Verdana, sans-serif;
}

p {
width: 200px;
border: 1px solid #aaa;
background-color: #eee;
margin: 0.5em;
padding: 0.5em;
}

.controls {
margin-top: 1em;
}

4、最后，显示效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!-- lang: html -->
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- lang: html -->

<!-- lang: html -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- lang: html -->
  <head>
<!-- lang: html -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- lang: html -->

<!-- lang: html -->
    <title>Shortcut Methods Example</title>
<!-- lang: html -->

<!-- lang: html -->
    <link rel="stylesheet" href=http://www.mamicode.com/"shortcuts.css" type="text/css" />> 

我们看到引入这些文件就完成了想要的效果。
 

5、但是还有一些封装性更高的框架，最近在学习的easyUI（虽然有些人说过它的一些问题，但是我觉得对于菜鸟，学习别人的框架是必要的，而且要真的懂） 
但是在jquery.easyUI.min.js里面最外面的方法是用来放插件的，并不是加载完dom就执行的，所以我暂时还没看懂源码，是使用的什么方法等待dom加载完再执行的。
jquery插件


联系
我们