外掛程式需求(功能需要)
一個外掛程式就是完成一個特定的功能,我們在動手製作一個外掛程式時應該確定該外掛程式開發完成後應具備哪些功能供我們使用。
在某天早上,按模式的完成開機、串連資料庫、開啟VS開發環境、偵錯工具。程式跑起了,可是頁面中的有段內容超過了頁面所容許的範圍。這還不容易喲,SubString唄,
對,這的確是個好法子,能解決這類問題,但當頁面需要被處理過後的內容進行互動,這種方法難免有點不適應了,那麼我們就使用Jquery開發一個滿足該需求的外掛程式吧;
開發須知
如果您對使用Jquery開發外掛程式的流程不是很串連,請查考本篇文章:開發Jquery外掛程式(一)(包含最終)
一步一步開發Jquery外掛程式----文字自動縮放
首先我們應該想到為了以後擴充該外掛程式,條件不應該寫死在程式中,那麼該外掛程式應該具備這麼幾個參數:Length(限制長度)、Replace(被替換後的文字)、ShowMore(顯示全部的按鈕)、HideMore(隱藏過多的文字);
1、在Jquery開發外掛程式時,它提供向外掛程式傳遞參數和使用預設定義好的參數,一般寫法應用如下:
複製代碼 代碼如下:
$.fn.MyFunction= function(options) {//options為我們傳遞的參數數組;
var defaults = {
arg1: ...,
arg2: "...",
argN: "",
replace: "..."
};
var options = $.extend(defaults, options);
那麼針對我們今天開發的這個外掛程式,對應的外掛程式參數如下:
複製代碼 代碼如下:
$.fn.HideMore= function(options) {
var defaults = {
length: 10,
showmore: "更多",
hidemore: "隱藏",
replace: "..."
};
var options = $.extend(defaults, options);
2、那接下來的工作大致流程如下:
i、擷取Div中的內容長度;
ii、與傳遞至外掛程式的length的值比較;
iii、如果長度超過length就截取並替換;
iiii、對showmore和hidemore定義事件;
外掛程式原始碼:
複製代碼 代碼如下:
(function($) {
$.fn.HideMore = function(options) {
var defaults = {
length: 10,
showmore: "更多",
hidemore: "隱藏",
replace: "..."
};
var options = $.extend(defaults, options);
var objhtml = $(this).html();
if (objhtml.length > options.length) {
var precontent = objhtml.substring(0, options.length);
var lastcontent = "" + objhtml.substring(options.length, objhtml.length) + "";
var morelink = "" + options.showmore + "";
var newcontent = precontent + lastcontent +
options.replace + morelink;
$(this).html(newcontent);
$(".more").css("display", "none");
$(".morelink").click(function() {
if ($(".morelink").html() == options.showmore) {
$(".more").show(1000);
$(".morelink").html(options.hidemore);
return false;
}
else {
$(".more").hide(900);
$(".morelink").html(options.showmore);
return false;
}
});
}
return false;
};
})(jQuery);
Html測試代碼:
複製代碼 代碼如下:
$("elements").HideMore(
{
length:50,
showmore"展",
hidemore"縮",
replace:"......"
});
好了,讀者看到這裡不妨把代碼COPY並運行吧。您的第二個外掛程式就誕生咯。