Posted By

jiewmeng on 01/12/11


Tagged

jquery


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

AllKnightAccess
stevenh512
AtticBoy


jQuery Plugin


 / Published in: JavaScript
 

A simple jQuery Plugin I made to remind myself how to create a jQuery Plugin following the tips from http://docs.jquery.com/Plugins/Authoring

Demo - http://jsfiddle.net/hya58/1/

  1. (function($) {
  2. $.fn.megaEdit = function(options) {
  3.  
  4. var settings = {
  5. name: "This is a default name",
  6. option1: "This is Option 1's value"
  7. };
  8.  
  9. var helpers = {
  10. log: function(message) {
  11. if (typeof console != "undefined") {
  12. console.log(message);
  13. }
  14. },
  15. rand: function() {
  16. return Math.round(Math.random() * 20);
  17. }
  18. };
  19.  
  20. var eventHandlers = {
  21. onLoaded: function() {
  22. helpers.log(settings.name + " loaded!");
  23. }
  24. };
  25.  
  26. if (options !== undefined) {
  27. $.extend(settings, options);
  28. }
  29.  
  30. return this.each(function() {
  31. $this = $(this);
  32. $this.bind("megaEdit.loaded", eventHandlers.onLoaded);
  33.  
  34. $this.val("Random Number: " + helpers.rand() + "\nMy name is: " + settings.name + "\nOption2: " + settings.option1);
  35. $this.trigger("megaEdit.loaded");
  36. });
  37.  
  38. }
  39. })(jQuery);

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: yuanming3936 on January 12, 2011

/** * @classDescription 模拟Marquee,无间断滚动内容 * @author Aken Li(www.kxbd.com) * @DOM *
*

    *
  • *
  • *
*
* @CSS * #marquee {width:200px;height:50px;overflow:hidden;} * @Usage * $('#marquee').kxbdMarquee(options); * @options * isEqual:true,//所有滚动的元素长宽是否相等,true,false * loop: 0,//循环滚动次数,0时无限 * direction: 'left',//滚动方向,'left','right','up','down' * scrollAmount:1,//步长 * scrollDelay:20//时长 */ (function($){

$.fn.kxbdMarquee = function(options){
    var opts = $.extend({},$.fn.kxbdMarquee.defaults, options);

    return this.each(function(){
        var $marquee = $(this);//滚动元素容器
        var _scrollObj = $marquee.get(0);//滚动元素容器DOM
        var scrollW = $marquee.width();//滚动元素容器的宽度
        var scrollH = $marquee.height();//滚动元素容器的高度
        var $element = $marquee.children(); //滚动元素
        var $kids = $element.children();//滚动子元素
        var scrollSize=0;//滚动元素尺寸
        var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,1左右,0上下

        //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
        $element.css(_type?'width':'height',10000);
        //获取滚动元素的尺寸
        if (opts.isEqual) {
            scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length;
        }else{
            $kids.each(function(){
                scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
            });
        }
        //滚动元素总尺寸小于容器尺寸,不滚动
        if (scrollSize 0) {
                numMoved+=opts.scrollAmount;
                if(numMoved>scrollSize*opts.loop){
                    _scrollObj[_dir] = 0;
                    return clearInterval(moveId);
                } 
            }
            if(opts.direction == 'left' || opts.direction == 'up'){
                _scrollObj[_dir] +=opts.scrollAmount;
                if(_scrollObj[_dir]>=scrollSize){
                    _scrollObj[_dir] = 0;
                }
            }else{
                _scrollObj[_dir] -=opts.scrollAmount;
                if(_scrollObj[_dir]

You need to login to post a comment.