插件需求(功能需要)
一個插件就是完成一個特定的功能,我們在動手制作一個插件時應該確定該插件開發完成後應具備哪些功能供我們使用。
在某天早上,按模式的完成開機、連接數據庫、開啟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並運行吧。您的第二個插件就誕生咯。