我創建了一個jQuery插件,它通過ajax查詢服務器並顯示一個彈出窗口。然後我想要另一個頁面返回一些不同的數據並顯示它。我實現它的方式是,插件會發送數據,指出它到達服務器的頁面,服務器會獲取數據併發回數據類型,客戶端會根據給定類型的數據顯示它。擴展抽象jQuery插件
我的方法顯然有很多不足之處。相反,是否可以創建插件的抽象版本,然後將其擴展到每個特定的應用程序,以便正確顯示它(即擺脫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);
如果你更詳細地描述了你想要抽象的部分以及你想如何使用它們,將會有所幫助。可以在javascript選項對象中定義插件的各種選項,或者在標記中使用'data-'屬性。至於風格,爲什麼不能爲每種類型的主要內容添加不同的類?不清楚樣式問題是什麼...細節將有助於 – charlietfl 2013-03-16 18:45:51
@charlietfl。我想分開的部分主要是我如何接收數據,然後使用客戶端使用類似'string = contact(data)'來呈現數據;'根據您的評論,聽起來我可以(也應該)定義某種選項,它甚至可以是處理顯示數據的回調函數。 – user1032531 2013-03-16 18:57:40