jquery插件

浏览数：47 / 时间：2015年06月09日

这里有一个简单的插件的例子，也是我从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="shortcuts.css" type="text/css" />
<!-- lang: html -->

<!-- lang: html -->
    <script src="../jquery.js" type="text/javascript"></script>
<!-- lang: html -->
    <script src="jquery.slidefade.js" type="text/javascript"></script>
<!-- lang: html -->
    <script src="shortcuts.js" type="text/javascript"></script>
<!-- lang: html -->
  </head>
<!-- lang: html -->

<!-- lang: html -->
  <body>  
<!-- lang: html -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing
<!-- lang: html -->
      elit, sed do eiusmod tempor incididunt ut labore et
<!-- lang: html -->
      dolore magna aliqua. Ut enim ad minim veniam, quis
<!-- lang: html -->
      nostrud exercitation ullamco laboris nisi ut aliquip
<!-- lang: html -->
      ex ea commodo consequat. Duis aute irure dolor in
<!-- lang: html -->
      reprehenderit in voluptate velit esse cillum dolore eu
<!-- lang: html -->
      fugiat nulla pariatur. Excepteur sint occaecat
<!-- lang: html -->
      cupidatat non proident, sunt in culpa qui officia
<!-- lang: html -->
      deserunt mollit anim id est laborum.</p>
<!-- lang: html -->
    <div class="controls">
<!-- lang: html -->
      <input type="button" value="Slide and fade out" id="out" />
<!-- lang: html -->
      <input type="button" value="Slide and fade in" id="in" />
<!-- lang: html -->
      <input type="button" value="Toggle" id="toggle" />
<!-- lang: html -->
    </div>
<!-- lang: html -->
  </body>
<!-- lang: html -->
</html>

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

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery插件