jquery插件

時間 2019-11-21

標籤 jquery 插件欄目 JQuery 简体版

原文原文鏈接

這裏有一個簡單的插件的例子，也是我從jquery基礎教程2裏面摘抄的javascript

一、jquery.slidefade.js插件css

<!-- lang: 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 -->
};

二、使用插件裏面定義的通用方法再寫shortcuts.jshtml

<!-- lang: 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 -->
});

三、本例子中會用到的cssjava

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

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

.controls { margin-top: 1em; }dom

四、最後，顯示效果：ide

<!-- lang: html -->
<!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>

咱們看到引入這些文件就完成了想要的效果。學習

五、可是還有一些封裝性更高的框架，最近在學習的easyUI（雖然有些人說過它的一些問題，可是我以爲對於菜鳥，學習別人的框架是必要的，並且要真的懂）可是在jquery.easyUI.min.js裏面使用了$(function(){})保證加載完dom就執行的。ui