我是 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'});
});
但我收到一条错误消息“Uncaught TypeError: Object [object Object] has no method 'rmTool”。我究竟做错了什么？有人可以指出我或告诉我为什么它不起作用吗？谢谢。
最佳答案
我发现这对我有用的页面上似乎与我的jquery有冲突:
jQuery(function() {
jQuery( "#map-container").rmTool({'mapVisuals':'RM_Map'});
});
关于javascript - 简单的 JQuery 插件创建，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23405283/