seajs使用jquery插件构造scrollbox

最新推荐文章于 2024-05-25 10:04:55 发布

Cumu_

最新推荐文章于 2024-05-25 10:04:55 发布

阅读量8.8k

点赞数

本文链接：https://blog.csdn.net/JThink_/article/details/10198433

版权

bootstrap 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

seajs

1 篇文章 0 订阅

订阅专栏

jquery plugin

1 篇文章 0 订阅

订阅专栏

1.seajs是淘宝前端工程师玉伯开发，它是遵循CMD规范的模块加载方式，可以像nodejs那么优雅得编写模块代码，具体的介绍可以去官网：http://seajs.org/docs/#intro

2.首先介绍下我们将要使用的jquery plugin——jquery-scrollbox，这是个比较新的jquery插件，目前版本是1.0.1，专门用来做scrollbox的，比较炫，具体介绍可以去官网看看：http://plugins.jquery.com/jquery-scrollbox/

3.这个小Demo的结构如下图：

注：我是随便拖到eclipse下为了截图的，那么错误大家可以无视，因为我用的是seajs的压缩版，所以就报错了。

4.Get Started:

-------------------index.html----------------------

<!DOCTYPE html>
<html>
<head>
<title>jquery-scrollbox.js demo</title>
<link href="./css/libs/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="./css/app.css" rel="stylesheet">
</head>
<body>
  <center>
	<div id="demo1" class="scroll-img">
    <ul>
      <li><img src="./img/1.png"></li>
      <li><img src="./img/2.png"></li>
      <li><img src="./img/3.png"></li>
      <li><img src="./img/4.png"></li>
      <li><img src="./img/5.png"></li>
      <li><img src="./img/6.png"></li>
      <li><img src="./img/7.png"></li>
      <li><img src="./img/8.png"></li>
      <li><img src="./img/9.png"></li>
      <li><img src="./img/10.png"></li>
      <li><img src="./img/11.png"></li>
      <li><img src="./img/12.png"></li>
      <li><img src="./img/13.png"></li>
      <li><img src="./img/14.png"></li>
    </ul>
  </div>
  <div id="demo1-btn" class="text-center">
    <button class="btn" id="demo1-backward">Backward</button>
    <button class="btn" id="demo1-forward">Forward</button>
  </div>
  </center>
    
  <script src='js/libs/seajs/sea.js'></script>
  <script>
    // the seajs configure
    seajs.config({
      // the alias configure
      alias: {
        'jquery': 'libs/jquery/jquery-1.10.2.js',
        'jquery_scrollbox': 'libs/jquery_scrollbox/jquery.scrollbox.js',
      },
      // the js base url, we can change in different environment
      base: 'file:///E:/jquery_plugin/jquery_scrollbox/js'
    });
    // load the main file
    seajs.use('app', function(app) {
      app.init();
    });
  </script>
</body>
</html>

注：seajs的config需要根据自己的环境配置base，大家如果不熟悉seajs的话可以去官网学习下，的确是比较简单的一个js框架

在index.html中我们使用了app的init方法，下面就看看这个app.js的实现：

------------------app.js-----------------------

define(function(require, exports) {
  var $ = require('jquery'); // 加载jquery模块
  require('jquery_scrollbox')($); // 加载jquery_scrollbox模块
  
  // 这是个内部的私有方法，默认下划线开始命名
  var _demo1 = function() {
    $('#demo1').scrollbox({
      direction: 'h',
      distance: 140
    });
    $('#demo1-backward').click(function () {
      $('#demo1').trigger('backward');
    });
    $('#demo1-forward').click(function () {
      $('#demo1').trigger('forward');
    });
  }
  
  // 这是个共有方法，用exports提供给别的模块使用
  var init = function() {
    _demo1();
  }
  
  exports.init = init;
});

我们需要注意的是，jquery以及jquery的插件并不符合CMD规范，为了能够模块化使用他们就必须进行转换下，这里是根据官网的说法来的

----------------jquery.js-----------------

define(function() {//def CMD 
  /*jquery 自身的代码*/ 
  return $.noConflict(); 
});//end CMD

---------------jquery plugin--------------

define(function() { 
//def CMD 
  return function($) { 
  /*jquery plugin的自身代码*/ 
  }
});//end CMD

那么我们使用的时候就应该这样：

  var $ = require('jquery'); // 加载jquery模块
  require('jquery_scrollbox')($); // 加载jquery_scrollbox模块

差点忘了还有个最简单app.css文件

-------------------app.css------------------

.scroll-img {
  border: 1px solid red;
  width: 680px;
  height: 142px;
  overflow: hidden;
  font-size: 0;
}

.scroll-img ul {
  width: 700px;
  height: 600px;
  margin: 0;
}

.scroll-img ul li {
  display: inline-block;
  margin: 10px 0 10px 10px;
}

#demo1.scroll-img ul {
  width: 1500px;
}

5.运行的结果（应该是动态的，但是我不会搞啊，就弄了个静态的）：