seajs使用jquery插件构造scrollbox

来源：互联网发布：php权限管理源代码编辑：程序博客网时间：2024/06/06 01:10

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.运行的结果（应该是动态的，但是我不会搞啊，就弄了个静态的）：

那2个按钮点击之后图片会向相应的方向滚动一张。

上传不了这个demo的附件，大家可以私下跟我要~~~~