jquery简单封装

对Raphael画图标的一个jquery简单封装

公司要做一个项目的demo，要求地图上可以插红旗，所以就用到了Raphael。

因为是个demo，所以地图就用了一张图片，效果如下：

 

 

所以为了更好的封装一下这个功能，就写了一个简单的插件：jquery-pointpainter.js

/**
 * @author Lee<br>
 * @since 2013-8-19 <br>
 */
(function($, Raphael) {
    $.fn.pointpainter = function(options, params) {
        if ( typeof options == 'string') {
            if (options == 'setPoint' && params) {
                setPoint.call(this, params);
            }
            return this;
        }

        var opts = $.extend(true, {}, $.fn.pointpainter.defaults, options);
        return this.each(function() {
            $(this).data('pointpainter.opts', opts);
            _init.call($(this));
        });
    }
    //初始化画布
    function _init() {
        var opts = this.data('pointpainter.opts');
        this.dblclick(function(evt) {
            var offset = $(this).offset();
            var point = {
                x : evt.pageX - offset.left,
                y : evt.pageY - offset.top
            };
            opts.onMapDblClick.call(this, evt, point);
        });

        var paper = Raphael(this[0], opts.width || this.width(), opts.height || this.height());
        this.data('pointpainter.paper', paper);
        drawing.call(this);
    }

    //开始画图
    function drawing() {
        var opts = this.data('pointpainter.opts');
        var paper = this.data('pointpainter.paper');
        paper.clear();
        for (var i = 0; i < opts.points.length; i++) {
            var point = opts.points[i];
            paper.path(opts.icon).attr({
                fill : point.fill,
                stroke : opts.stroke,
                cursor : opts.cursor
            }).transform('t' + (point.x + opts.position.left) + ',' + (point.y + opts.position.top)).click(function() {
                opts.onIconClick.call(this, this.data());
            }).hover(function(evt) {
                opts.onIconMouseOver.call(this, evt, this.data());
            }, function(evt) {
                opts.onIconMouseOut.call(this, evt, this.data());
            }).data(point.data);
        }
    }

    //添加绘画点
    function setPoint(points) {
        var opts = this.data('pointpainter.opts');
        opts.points.push(points);
        drawing.call(this);
    }


    $.fn.pointpainter.defaults = {
        //图标
        icon : 'M9.5,3V13C17.5,13,17.5,17,25.5,17V7C17.5,7,17.5,3,9.5,3ZM6.5,29H8.5V3H6.5V29Z',
        //图标颜色
        fill : 'green',
        stroke : "none",
        //图标的cursor
        cursor : 'pointer',

        //画布宽度和高度，默认为绑定元素的宽度和高度
        width : 0,
        height : 0,

        //初始化默认坐标点
        points : [{
            x : 0,
            y : 0,
            data : {}//data为绑定到图标的数据，可以在onIconMouseOver和onIconMouseOut事件中获取
        }],

        //定义图标位置，图标位置是以坐标点为基准的定位
        position : {
            left : -7,
            top : -26,
        },

        onIconMouseOver : $.noop,
        onIconMouseOut : $.noop,
        onMapDblClick : $.noop, //双击地图时触发的事件，两个参数，第一个为事件对象，第二个为所点击的点相对于地图的位置
        onIconClick : $.noop//点击图标事件，两个参数，第一个为点，第二个为该点绑定的数据
    }
})(jQuery, Raphael);

 

再给个调用的例子：

                var points=[
                        {x:193,y:176,fill:'red',data:{name:'济南市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:108,y:193,fill:'green',data:{name:'聊城市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:309,y:354,fill:'green',data:{name:'临沂市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:371,y:172,fill:'yellow',data:{name:'潍坊市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:484,y:241,fill:'red',data:{name:'青岛市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:569,y:83,fill:'green',data:{name:'烟台市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:629,y:84,fill:'red',data:{name:'威海市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:218,y:380,fill:'green',data:{name:'枣庄市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:158,y:310,fill:'yellow',data:{name:'济宁市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:58,y:326,fill:'green',data:{name:'菏泽市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:208,y:227,fill:'red',data:{name:'泰安市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:252,y:224,fill:'yellow',data:{name:'莱芜市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:413,y:316,fill:'green',data:{name:'日照市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:286,y:161,fill:'yellow',data:{name:'淄博市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:138,y:86,fill:'green',data:{name:'德州市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:286,y:94,fill:'yellow',data:{name:'滨州市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
                        {x:326,y:82,fill:'green',data:{name:'东营市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}
                        ]

                $('#container').pointpainter({
                    points : points,
                    onIconClick : function(data) {
                        window.location.href = "sjxmfbgl.html";
                    },
                    onMapDblClick : function(evt, point) {
                        console.log('x:' + point.x + ',y:' + point.y + ',');
                        $(this).pointpainter('setPoint', point);
                    },
                    onIconMouseOver : function(evt, data) {
                        var offset = {
                            top : evt.clientY,
                            left : evt.clientX
                        };
                        var content = '项目名称：' + data.projectName + '<br>项目期数：' + data.period + '<br>立项日期：' + data.date + '<br>财政结算：' + data.money + '<br>项目内容：' + data.content + '<br>预计完工日期：' + data.complateDate;
                        $('#pointTip').empty().html(content).show().offset(offset);
                    },
                    onIconMouseOut :function(){$('#pointTip').hide();}
                });

 

各式各样的图标可以从http://raphaeljs.com/icons/获取，点击图标之后，下方会显示该点击图标的值，默认为小红旗：M9.5,3v10c8,0,8,4,16,4V7C17.5,7,17.5,3,9.5,3z M6.5,29h2V3h-2V29z

 

欢迎大家拍砖^_^

 

 2013-08-21

 

下载地址：http://pan.baidu.com/share/link?shareid=3942623987&uk=641094506&third=15