改灶:学习编写jQuery插件

改造、改灶,意思和发音都差不多。用了改灶有点想表达另起炉灶的意思。

事情的缘起就象今晚上这场HIGH歌PK一样。原来对知识推广方面的内容一直比较倾向于引导,不具体。原因其实很简单,原理呢明白一些,说到实践呢,那就没有了,说穿了是瞎指挥。借着泡茶妹的由头写写jQuery的代码也是让身心能从各种俗务中解脱出来的妙法,所以一试。果然大爽。

对于解决技术问题一直以来的习惯是抄。能抄得明白、抄得写意也是提高工作效率的好方式。因为软件生产,特别是业务类软件的生产过程本身就是一种循环来循环去的开发过程。

0. 原来用来实现图片轮换显示的代码都是借用了一个叫做lunhuan.js的程序,简单搜索了一下,找到轮播图alt作为标题。比如我们要实现下面内容的轮换:

            <div id="play_text">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>
            <div id="play_list">
                <a href="#" target="_blank">
                    <img src="img/lunhuan/001.jpg" title="" alt="" width="206px"/>
                </a>
                <a href="#" target="_blank">
                    <img src="img/lunhuan/002.jpg" title="" alt="" width="206px" />
                </a>
                <a href="#" target="_blank">
                    <img src="img/lunhuan/003.jpg" title="" alt="" width="206px" />
                </a>
                <a href="#" target="_blank">
                    <img src="img/lunhuan/004.jpg" title="" alt="" width="206px" />
                </a>
                <a href="#" target="_blank">
                    <img src="img/lunhuan/005.jpg" title="" alt="" width="206px" />
                </a>
                <a href="#" target="_blank">
                    <img src="img/lunhuan/006.jpg" title="" alt="" width="206px" />
                </a>
            </div>

可用以下面的代码来实现。

    
    var t = n = 0,
    count = $("#play_list a").size();
    $(function() {
        $("#play_list a:not(:first-child)").hide();
        $("#play_text li").click(function() {
            var i = $(this).text() - 1;
            n = i;
            if (i >= count) return;
            $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(500);
        });
        t = setInterval("showAuto()", 1000);
    })

    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#play_text li").eq(n).trigger('click');
    }

1. 那假设要有两组需要切换呢?下面是很容易想像的方式,即便不会写程序,只要动脑,也可以从上面的代码复制得到:

    var t = n = m = l = 0,
    count = $("#play_list a").size();
    $(function() {
        $("#play_list a:not(:first-child)").hide();
        $("#play_text li").click(function() {
            var i = $(this).text() - 1;
            n = i;
            if (i >= count) return;
            $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(500);
        });
        t = setInterval("showAuto()", 1000);
    })
    countz = $("#playz_list a").size();
    $(function() {
        $("#playz_list a:not(:first-child)").hide();
        $("#playz_text li").click(function() {
            var m = $(this).text() - 1;
            l = m;
            if (m >= countz) return;
            $("#playz_list a").filter(":visible").fadeOut(500).parent().children().eq(m).fadeIn(500);
        });
        t = setInterval("showAutoz()", 1000);
    })

    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#play_text li").eq(n).trigger('click');
    }
    function showAutoz() {
        l = l >= (countz - 1) ? 0 : ++l;
        $("#playz_text li").eq(l).trigger('click');
    }

如果要多个呢?如果要每个指定不同的变化时长呢?复制就解决不了问题了。
2. 无论使用什么来写,因为相对于每一组内容都需要有一个定时器来执行,所以采用基于类的方式来设计是一个好方式。比如喜欢jQuery的类定义写法,正巧在官网找到了一个如何写插件的文章:Plugins/Authoring。真是方便,就着原来的内容改写的插件如下,还可以支持简单的定制。不过引入了一个定时器插件,虽然可以自己写还是利用最方便。

(function($){

  $.fn.Rolling = function(options) {
    var n = 0;
    var count = this.children().size();

    var _options = $.extend({}, {time: 1000, fadeOut: 500, fadeIn: 500}, options);

    this.children().hide();
    this.children().eq(0).show();

    this.children().click(function() {

      $this = $(this);
      n = $this.index();
      $this.parent().children().filter(":visible")
        .fadeOut(_options.fadeOut)
        .parent().children().eq(n)
        .fadeIn(_options.fadeIn);
    });

    this.everyTime(_options.time, this.selector, function() {
      n = n >= (count -1)? 0 : ++n;
      $this = $(this);
      $this.children().eq(n).trigger("click");
    });
  };
})(jQuery);

简单注释了下:

$.fn.Rolling = function(options) {
    // static variable to count
    // 这些静态变量是用来替换原来计数内容的,就是下面这段代码
    // var t = n = 0,
    //     count = $("#play_list a").size();
    //
    var n = 0;
    var count = this.children().size();

    // 原来我们无法指定缺省值,现在很方便
    var _options = $.extend({}, {time: 1000, fadeOut: 500, fadeIn: 500}, options);

    // 原来很方便,因为有filter
    //    $("#play_list a:not(:first-child)").hide();
    // 现在我用了两行,不难理解,但是存在溢出问题,应该有更好的替代办法
    this.children().hide();
    this.children().eq(0).show();

    // 原来借用文本内容的事件就不需要了
    this.children().click(function() {

      $this = $(this);
      n = $this.index();
      // 这代码跟原来没区别
      $this.parent().children().filter(":visible")
        .fadeOut(_options.fadeOut)
        .parent().children().eq(n)
        .fadeIn(_options.fadeIn);
    });

    // 定义定时器事件
    this.everyTime(_options.time, this.selector, function() {
      n = n >= (count -1)? 0 : ++n;
      $this = $(this);
      $this.children().eq(n).trigger("click");
    });
  };

调用起来很简单:

<script type="text/javascript" src="js/jquery.timers.js"></script>
<script type="text/javascript" src="js/rolling.js"></script>
<script>
  $("#play_list").Rolling();
  $("#playz_list").Rolling({time:1800, fadeIn: 600, fadeOut: 500});
</script>

3. 简单整理后扔在这里:图片内容轮换jQuery插件

因为为这东西改灶花了点时间,但时要讲清楚着实费力。想起今晚的比赛,说起来不怎么喜欢多亮的嗓音,按庾澄庆的说法,很没场景感。这代码改的也是,恁没场景感。如是,练习组织语言吧。

参考文章:
1. $this vs $(this) in jQuery
2. What is the difference between “this”, “$this” and “$(this)”?
3. What is the reason for var $this = this
4. jQuery for Designer
5. 我最喜欢的数据可视化神作d3.js
6. Is there a better way to create an object-oriented class with jquery?
7.

Roar

Roar is a notification widget that streamlines incoming messages, such as updates or errors, without distracting the user from their browser experience or breaking their work-flow by displaying obtrusive alerts. Roar is inspired by Growl, the notification system for Mac OS X and is realised with MooTools.

Roar是一个消息通知工具。不过本来想找的是能够闪动窗体标题的JavaScript代码。

JS滚动实例

下述代码可以实现内容左右循环滚动。关键,xq_1中的内容要大于xq的宽度。另外,xq_1这个td要指定nowrap,否则在Firefox和Chrome中不会滚动的,因为内容折行了。

[sourcecode language=”html”]


[/sourcecode]

jQuery也很方便啊

原来有段javascript的代码,是滚动图片的。因为最近在看jQuery,就用jQuery改造一下,下面这段勉强可用。等偶慢慢搞成好点的版本,再整理个例子:
[sourcecode language=”javascript”]
jQuery.fn.horzScroller = function(params) {
var p = params || {
container: “”,
scroller: “”,
ref: “”,
speed: 25,
dir: true
};

var _container = $(“#” + p.container);
var _scroller = $(“#” + p.scroller);
var _ref = $(“#” + p.ref);
var _speed = p.speed;
var _marquee;
var _dir = p.dir;

var scrollLeft = function() {
if(_container.width() – _container.scrollLeft() < =0) _container.scrollLeft(0); else _container.scrollLeft(_container.scrollLeft() + 1); }; var scrollRight = function() { if(_ref.offsetWidth() - _container.scrollLeft() <=0) _container.scrollLeft(_container.scrollLeft() - _scroller.offsetWidth()); else _container.scrollLeft(_container.scrollLeft() + 1); }; var init = function() { _ref.html(_scroller.html()); if (_dir) _marquee = setInterval(scrollLeft, _speed); else _marquee = setInterval(scrollRight, _speed); _container.mouseover(function(e) { clearInterval(_marquee); } ); _container.mouseout(function(e) { if (_dir) _marquee = setInterval(scrollLeft, _speed); else _marquee = setInterval(scrollRight, _speed); } ); } init(); } [/sourcecode] 调用界面: [sourcecode language="html"] < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




Hello,10000000000000000000000000000000000000000000000000



[/sourcecode]

**注意,在滚动的区域的内内容要宽度大于外面的容器才可以。

关于此实例的完整代码和说明稍后再推出吧。正事儿要紧。

参考:
http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html
http://www.cnblogs.com/terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html

http://jqueryui.com/
http://www.corrie.net.cn/e/321.htm
http://www.skiyo.cn/article/Skiyo-74-1228116085.html

javascript获取客户端网卡MAC地址和IP地址和计算机名

在做 B/S 结构的系统时,我们常常需要获取客户端的一些信息,如 IP MAC ,以结合身份验证。 要获取服务器端的 MAC 很容易,但是要获取客户端的 MAC 的地址确要花费一翻心思,通常的做法是调用 Win32API 或直接调用nbtstat 命令,这样做有很多问题,而另一种方法就是直接用客户端脚本,我们这里用 Javascript ,这样做的好处是不需要服务器端进行处理,有客户端自行获取,传递到服务器端,且速度和可靠性都比在服务器端获取好。
具体实现的html和javascript如下:

http://zhupan.javaeye.com/blog/26440

此法仅限于IE,可见IE着实“安全”,“安全”呐。