我创建了一个jQuery插件，它通过ajax查询服务器并显示一个弹出窗口。然后我想在另一个页面上另一个返回一些不同的数据并显示它。我实现它的方式，插件将发送数据指示它所在的页面到服务器，服务器将获取数据并发回数据类型，客户端将根据给定类型的数据显示它。
我的方法显然有很多不足之处。相反，是否有可能制作插件的抽象版本，然后将其扩展到每个特定的应用程序，以便正确显示它（即摆脱switch语句）？另外，我如何摆脱弹出窗口上的ID（即#screenshot），以便每个都可以单独设置样式？感谢
ayb={};
$("a.screenshot").screenshotPreview();
function contact(data)
{
return '<dl><dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
+'<dt>Account:</dt><dd>'+data.account_name+'</dd>'
+'<dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
+((data.title)?'<dt>Title:</dt><dd>'+data.title+'</dd>':'')
+'<dt>User Name:</dt><dd>'+data.username+'</dd>'
+'<dt>Password:</dt><dd>'+data.password+'</dd>'
+'<dt>Communication Method:</dt><dd>'+data.communication_method+'</dd>'
+((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
+((data.account_phone)?'<dt>Account Phone:</dt><dd>'+display_phone(data.account_phone)+'</dd>':'')
+((data.phone)?'<dt>Direct Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
+((data.mobile_phone)?'<dt>Mobile Phone:</dt><dd>'+display_phone(data.mobile_phone)+'</dd>':'')
+((data.account_fax)?'<dt>Account Fax:</dt><dd>'+display_phone(data.account_fax)+'</dd>':'')
+((data.fax)?'<dt>Direct Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
+((data.address || data.location)?'<dt>Address:</dt><dd>'+data.address+((data.address && data.location)?'<br>':'')+data.location+'</dd>':'')
+((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
+'</dl>';
}
function account(data)
{
return '<dl><dt>Name:</dt><dd>'+data.name+'</dd>'
+((data.phone)?'<dt>Account Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
+((data.fax)?'<dt>Account Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
+((data.address || data.location)?'<dt>Address:</dt><dd>'+data.address+((data.address && data.location)?'<br>':'')+data.location+'</dd>':'')
+((data.vertical_markets)?'<dt>Primary Market:</dt><dd>'+data.vertical_markets+'</dd>':'')
+((data.priority)?'<dt>Priority:</dt><dd>'+data.priority+'</dd>':'')
+'</dl>';
}
function user(data)
{
return '<dl><dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
+'<dt>User Name:</dt><dd>'+data.username+'</dd>'
+((data.phone)?'<dt>Direct Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
+((data.mobile_phone)?'<dt>Mobile Phone:</dt><dd>'+display_phone(data.mobile_phone)+'</dd>':'')
+((data.fax)?'<dt>Direct Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
+((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
+'</dl>';
}
function getUrlVars(href)
{
//Returns object based on variables in url. Used to send data to GET
var vars = {}, hash, hashes = href.slice(href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars[hash[0]] = hash[1];
}
return vars;
}
(function( $ ){
$.fn.screenshotPreview = function() {
//Apply to links to get a preview of the link
//Config - Set popup's distance from the cursor
ayb.screenshot={};
ayb.screenshot.xOffset = 20;
ayb.screenshot.yOffset = 10;
ayb.screenshot.showing=false;
this.hover(function(e)
{
if(!ayb.screenshot.showing){
ayb.screenshot.title = this.title;this.title = "";//Prevent title from being displayed,and save for later to put back
var url=getUrlVars(this.href);
ayb.screenshot.timeoutID=window.setTimeout(function() {
ayb.screenshot.showing = true;
url.task="getPopup"; //specify task
ayb.screenshot.ajax=$.ajax({
url: 'index.php',
data: url,
success: function(data)
{
//Determine how to display returned data
switch (data.type)
{
case 'contact':var string=contact(data);break;
case 'account':var string=account(data);break;
case 'user':var string=user(data);break;
case 'project':var string=project(data);break;
default:var string='Error';
}
$("body").append('<div id="screenshot">'+((ayb.screenshot.title != '')?'<h3>'+ayb.screenshot.title+'</h3>':null)+string+"</div>");
$("#screenshot")
.css("top",(e.pageY - ayb.screenshot.yOffset) + "px")
.css("left",(e.pageX + ayb.screenshot.xOffset) + "px")
.fadeIn("fast");
},
dataType: 'json'
});
},250); //Wait 1/4 of a second before requesting data from server
}
},
function()
{
//When not hover
if (typeof ayb.screenshot.ajax == 'object') {ayb.screenshot.ajax.abort();}
window.clearTimeout(ayb.screenshot.timeoutID);
this.title = ayb.screenshot.title;
$("#screenshot").remove();
ayb.screenshot.showing = false;
});
this.mousemove(function(e)
{
$("#screenshot").css("top",(e.pageY - ayb.screenshot.yOffset) + "px").css("left",(e.pageX + ayb.screenshot.xOffset) + "px");
});
};
})( jQuery );
答案 0 :(得分：1)
可能有所帮助的一些想法。首先在标记中使用data-属性：
<a href="#" class="screenshot" data-type="user">User Link</a>
接下来是创建更通用的模板方法。使用类型可以从html data-type中获取，通过添加相同类型的类（或与类型相关的其他协议），您可以针对不同的用例使用不同的css
DEMO JS：
(function ($) {
var shotTemplate = function (data, type) {
this.shot = {
start: '<div id="screenshot" class="' + type + '">',
end: '</div>},'
};
this.user = function () {
/* not suggesting "data.type" protocol, was just simple for my demo*/
return '<div class="user_class">' + data.user + '</div>';
};
this.contact = function () {
return '<div class="contact_class">' + data.contact + '</div>';
};
this.account= function () {
return '<div class="account_class">' + data.account + '</div>';
};
return this.shot.start + this[type]() + this.shot.end;
};
$.fn.screenshotPreview = function () {
return this.each(function () {
var $el = $(this);
/* isolate screenshot to this instance*/
var $screenshot;
$el.hover(function () {
$.post(url,data,function( response){
$screenshot = $(shotTemplate(response, $el.data('type')));
$('body').append($screenshot);
});
}, function () {
$screenshot.remove();
})
});
};
})(jQuery);
CSS：
#screenshot.user{background:navy;color:white}
#screenshot.contact{background:#444;color:white}
DEMO：http://jsfiddle.net/wceDc/
我保持演示简单，以便专注于概念，而不是定位杂乱的代码