一个不错的jquery插件模版

  • pageplugin.js

    (function ($) {
    
    $.PagePlugin = function (obj, opt) {
    
    var options = $.extend({}, $.PagePlugin.defaults),
        docOffset,
        _ua = navigator.userAgent.toLowerCase(),
        is_msie = /msie/.test(_ua),
        ie6mode = /msie [1-6]\./.test(_ua);
    
    if (typeof (obj) !== ‘object‘) {
        obj = $(obj)[0];
    }
    
    if (typeof (opt) !== ‘object‘) {
        opt = {};
    }
    
    function setOptions(opt) {
        if (typeof (opt) !== ‘object‘) opt = {};
        options = $.extend(options, opt);
    }
    
    //自定义方法,需要在下面api声明
    function setImage(src, callback) {
    
        if (typeof (callback) == ‘function‘) {
            callback.call(api);
        }
    }
    
    setOptions(opt);
    var $orig = $(obj);
    
    //调用内部方法
    ScoreManager.getBo();
    ScoreManager.getCo();
    
    //scoreManager,相当于自定义类
    var ScoreManager = (function () {
        function getScore1(){
            alert("key1");
        }
    
        function getScore2(){
            alert("key2");
        }
    
        return {
            getBo: getScore1,
            getCo: getScore2
        };
    
    }());
    
     //定义api
    var api = {
        setImage: setImage,
        focus:ScoreManager.getBo,
        getBounds: function () {
            return [1, 2];
        }
    
    };
    
    $orig.data(‘PagePlugin‘, api);
    return api;
    }
    
    //设置默认属性
    $.PagePlugin.defaults = {
    	marginT: 0,
    	marginL: 0
    };
    }(jQuery));
  • 如何使用?
    index.js
    var api = null;
    
    //这里"#page_plugins"我定义为传入控件的内容,可能为id,亦可能class。
    
    api = $.PagePlugin("#page_plugins", {
    marginT: 10,
    marginL: 20
    });
    
    api.getBounds();
    api.setImage("h1", function () {
    
    });
时间: 2024-08-14 06:21:01

一个不错的jquery插件模版的相关文章

图片延迟加载并等比缩放,一个简单的JQuery插件

使用方法: $(".viewArea img").zoom({height:74,width:103}); (function($){    $.fn.zoom = function(settings){                //一些默认配置:                settings = $.extend({                    height:0,                    width:0,                    load

编写一个简单的Jquery插件

1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var methods = { //Object showName: function (name) { alert('Name:' + name); }, showAge: function (age) { alert('Age' + age); } }; //method方法名 $.fn.showplugi

推荐一个内容滚动jquery插件

myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider/ 参考:http://plugins.jquery.com/myslider/ 例子代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>myslider</title><base target=&

一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子

页面代码:   <html>     <!-- 引入相关的js文件,相对路径  -->     <script type="text/javascript" src="js/jquery.js"></script>       <script type="text/javascript" src="js/ajaxfileupload.js"></script&g

制作一个简洁的jquery插件

原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6efd3881d3397903e84752&scene=1&srcid=0125cT8n9FJMI1u2faaQgjcS&from=singlemessage&isappinstalled=0#wechat_redirect 英文原文链接:http://www.queness.co

一款效果非常不错的jquery插件 -Lightbox

今天为大家介绍一款非常不错的jquery图片查看插件-Lightbox.这款图片查看插件体验很好,不仅有左右两个小箭头可以浏览上一张和下一张图片,还支持鼠标的左右键浏览上一张和下一张图片.有点类似google图片的查看器.一起看下效果图: 在线预览   源码下载 我们一起看下实现代码: html代码: <div id="wrapper"> <h1> Responsive Lightbox Portfolio</h1> <ul id="

写了一个简单的jquery插件(初恋啊)

用了好久的jquery了,却没有写过插件,今天研究了一个别人的插件和一些文章,总算搞清楚了jquery插件一些写法, 代码写了一个div当鼠标事件发生时的宽高变化情况,基础,代码基础,基础好了,才能研究深入的东西. 1 (function(jQuery){ 2 /* 3 * 插件应该返回一个JQuery对象,以便保证插件的可链式操作. 4 * JQuery插件的机制:jQuery提供了2个用于扩展jQuery功能的方法 5 * jQuery.fn.extend() 6 * jQuery.exte

How to Create a Basic Plugin 如何写一个基础的jQuery插件

How to Create a Basic Plugin Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. I

jquery 插件模版

;(function ($) { //插件的默认值属性 var defaults = { Weight: '300px', height: '230px', nextId: 'nextBtn', nextText: 'Next' }; //插件的扩展方法名称 $.fn.easySlider = function (options) { // 合并用户自定义属性,默认属性 var options = $.extend(defaults, options); $(this).click(functi