简单的JQuery插件创建

时间:2014-05-01 09:40:17

标签: javascript jquery

我是jquery插件开发的新手,我想尝试一下,但我似乎陷入了困境。

这是我的代码:

(function ($) {
    $.fn.rmTool = function(configure) {
        var options = $.extend({
            mapVisuals: 'none'
        }, configure);
        //Get Data from JSON file
        $.getJSON('/ABCOM/Web/Resources/data/rm_data.js', function (data) {
            var rm_name, division, rm_phone, rc_name, rc_phone, states, dataset;

            function dataByDivision(data, property, value) {
                return $(data).filter(function () {
                    return this[property] === value;
                });
            }

            var west = dataByDivision(data, "Division", "West");
            $.each(west, function (i, item) {
                rm_name = item.RM_Name, rm_phone = item.RM_Phone, rc_name = item.RC_Name, rc_phone = item.RC_Phone, states = item.States_Covered;

                dataset = '<tr><td>' + states + '</td><td>' + rm_name + '<br/>' + rc_name + '</td><td>' + rm_phone + '<br/>' + rc_phone + '</td></tr>';

                $('.west-region').append(dataset);
            });

            var east = dataByDivision(data, "Division", "East");
            $.each(east, function (i, item) {
                rm_name = item.RM_Name, rm_phone = item.RM_Phone, rc_name = item.RC_Name, rc_phone = item.RC_Phone, states = item.States_Covered;

                dataset = '<tr><td>' + states + '</td><td>' + rm_name + '<br/>' + rc_name + '</td><td>' + rm_phone + '<br/>' + rc_phone + '</td></tr>';

                $('.east-region').append(dataset);
            });

            var south = dataByDivision(data, "Division", "South");
            $.each(south, function (i, item) {
                rm_name = item.RM_Name, rm_phone = item.RM_Phone, rc_name = item.RC_Name, rc_phone = item.RC_Phone, states = item.States_Covered;

                dataset = '<tr><td>' + states + '</td><td>' + rm_name + '<br/>' + rc_name + '</td><td>' + rm_phone + '<br/>' + rc_phone + '</td></tr>';

                $('.south-region').append(dataset);
            });
            $.each(data, function (i, item) {
                rm_name = item.RM_Name, division = item.Division, rm_phone = item.RM_Phone, rc_name = item.RC_Name, rc_phone = item.RC_Phone, states = item.States_Covered;

                dataset = '<tr class="' + rm_name + ' ' + rc_name + '"><td>' + rm_name + '</td><td>' + division + '</td><td>' + rm_phone + '</td><td>' + rc_name + '</td><td>' + rc_phone + '</td><td>' + states + '</td></tr>';

                $('.rm-data').append(dataset);
            });

        });

// Search Function
        $('#search-button').on('click', function () {
            /*String.prototype.capitalize = function() {
             return this.charAt(0).toUpperCase() + this.slice(1);
             }*/
            $('.rm-data tr').hide();
            $('.error-msg').hide();
            var query = $('#search').val();
            console.log(query);
            /*var format = query.split(' ');
             var first = format[0].capitalize();
             var second = format[1].capitalize();
             var finalquery = first+' '+second;
             console.log(finalquery);*/

            if ($('.rm-data tr').hasClass(query)) {
                $('.rm-data tr:contains(' + query + ')').fadeIn('slow', function () {
                    $('.rm-data tr:contains(' + query + ')').slideDown().show();
                });
            }

            else {

                var error = '<div class="error-msg">Contact Not Found</div>';
                $('.rm-table-search').append(error);
                if ($('.error-msg').length == 0) {
                    $('.rm-table').append(error);
                }
                else {
                    $('.rm-table').append('');
                }

            }

        });

        function InitializeVisual() {
            AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;
            return new AnyChart('/ABCOM/Web/Resources/swf/AnyChart.swf');
        }

        function RM_Map(self) {
            var chart = InitializeVisual();
            var config = {
                "charts": {
                    "chart": {
                        "plot_type": "Map",
                        "chart_settings": {
                            "data_plot_background": {
                                "enabled": "false"

                            },
                            "chart_background": {
                                "enabled": "false"
                            },
                            "title": {
                                "enabled": "false",
                                "text": "USA President Election 2008"
                            }
                        },http://stackoverflow.com/editing-help
                        "data_plot_settings": {
                            "map_series": {
                                "source": "usa/country/states.amap",
                                "labels_display_mode": "Always",
                                "id_column": "REGION_ID",
                                "projection": { "flag": "False" },
                                "effects": { "enabled": "False" },
                                "grid": { "enabled": "false" },
                                "border": {
                                    "enabled": "true",
                                    "color": "White",
                                    "thickness": "2"
                                },
                                "defined_map_region": {
                                    "palette": "Default",
                                    "label_settings": {
                                        "enabled": "true",
                                        "format": "{%REGION_ID}",
                                        "background": { "enabled": "false" },
                                        "font": {
                                            "color": "#ffffff",
                                            "bold": "true"
                                        }
                                    }
                                }
                            }
                        },
                        "data": {
                            "series": [
                                {

                                    "name": "West",
                                    "color": "#6b7910",
                                    "point": [
                                        { "name": "AK"},
                                        {"name": "AZ"},
                                        {"name": "CA"},
                                        {"name": "NV"},
                                        {"name": "NM"},
                                        {"name": "CO"},
                                        {"name": "IL"},
                                        {"name": "WI"},
                                        {"name": "IA"},
                                        {"name": "MN"},
                                        {"name": "AZ"},
                                        {"name": "MO"},
                                        {"name": "KS"},
                                        {"name": "NE"},
                                        {"name": "SD"},
                                        {"name": "ND"},
                                        {"name": "WY"},
                                        {"name": "MT"},
                                        {"name": "ID"},
                                        {"name": "WA"},
                                        {"name": "OR"},
                                        {"name": "UT"},
                                        {"name": "IN"}


                                    ]
                                },
                                {
                                    "name": "East",
                                    "color": "#949694",
                                    "point": [
                                        {"name": "MI"},
                                        {"name": "OH"},
                                        {"name": "WV"},
                                        {"name": "PA"},
                                        {"name": "NY"},
                                        {"name": "ME"},
                                        {"name": "MA"},
                                        {"name": "NH"},
                                        {"name": "VT"},
                                        {"name": "RT"},
                                        {"name": "CT"},
                                        {"name": "RI"},
                                        {"name": "NJ"}

                                    ]
                                },
                                {
                                    "name": "South",
                                    "color": "#7bb2c6",
                                    "point": [
                                        {"name": "DE"},
                                        {"name": "MD"},
                                        {"name": "DC"},
                                        {"name": "VA"},
                                        {"name": "NC"},
                                        {"name": "SC"},
                                        {"name": "GA"},
                                        {"name": "FL"},
                                        {"name": "AL"},
                                        {"name": "KY"},
                                        {"name": "DE"},
                                        {"name": "TN"},
                                        {"name": "TX"},
                                        {"name": "LA"},
                                        {"name": "MS"},
                                        {"name": "HI"},
                                        {"name": "OK"},
                                        {"name": "AR"}
                                    ]
                                }
                            ]
                        }
                    }
                }
            };
            chart.width = "100%";
            chart.height = "100%";
            chart.wMode = "transparent";
            chart.setJSData(config);
            chart.addEventListener('pointClick', clickedPoint);
            chart.addEventListener('pointMouseOver', hoveredList);
            chart.addEventListener('pointMouseOut', defaultList);
            chart.write(self.attr('id'));

        }

        function hoveredList(e) {
            var selected = e.data.Series.Name;

            switch (selected) {
                case 'West':
                    $('#' + selected).addClass('shadowed-table');
                    break;
                case 'East':
                    $('#' + selected).addClass('shadowed-table');
                    break;
                case 'South':
                    $('#' + selected).addClass('shadowed-table');
                    break;
                default:
            }
        }

        function defaultList(e) {
            var selected = e.data.Series.Name;
            $('#' + selected).removeClass('shadowed-table');
        }

        function clickedPoint(location) {
            var clicked = location.data.Name, advisor_name, advisor_phone, dataset, checker,pointIdentity = location.data.Series.Name;
            $.getJSON('/ABCOM/Web/Resources/data/rm_data.js', function (data) {
                var pull = $(data).filter(function () {
                    return this.State_Location === clicked;
                });
                $('.map-rm-list').css('display', 'none');
                $('.map-rm-list-body').empty();
                $.each(pull, function (i, item) {
                    advisor_name = item.RM_Name, advisor_phone = item.RM_Phone;

                    dataset = '<div class="rm-info-container" style="display:none">' + advisor_name + '<br/>' + advisor_phone + '</div>';
                    $('.map-rm-list-body').append(dataset);
                    checker = $('.map-rm-list-body').length;

                    if (checker == 1) {

                        $('.map-rm-list').fadeIn('slow', function () {
                            $('.map-rm-list').css('display', 'block');
                            $('.rm-info-container').addClass(pointIdentity);
                            $('.rm-info-container').css('display', 'block').slideDown('slow');

                        });

                    }
                });
            });

        }

        switch(options.mapVisuals){
            case 'RM_Map':
                RM_Map(this);
            break;
            default:
                break;
        }
    };


}(jQuery));

所以我尝试使用此

将我的插件调用到页面中
jQuery.noConflict();
$(document).ready( function() {
    $('#map-container').rmTool({'mapVisuals':'RM_Map'});
});

但我得到一个错误说&#34; Uncaught TypeError:Object [object Object]没有方法&#39; rmTool&#34;。我究竟做错了什么?有人可以指点我或告诉我它为什么不起作用吗?谢谢。

1 个答案:

答案 0 :(得分:1)

我认为这个问题似乎与我的jquery在我的网页上有冲突:

jQuery(function() {
            jQuery( "#map-container").rmTool({'mapVisuals':'RM_Map'});
        });