欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Jquery的文字自動截?。ㄌ峁┰创a）

 更新時間：2011年08月09日 19:17:12   作者：  
計劃總是趕不上變化，這篇插件開發(fā)的文章本應(yīng)在上周完成，由于手頭的項目實在緊張，只好讓路吧，嘿嘿。今天將跟大家一起完成這個插件的開發(fā)流程。
插件需求（功能需要）
一個插件就是完成一個特定的功能，我們在動手制作一個插件時應(yīng)該確定該插件開發(fā)完成后應(yīng)具備哪些功能供我們使用。
在某天早上，按模式的完成開機、連接數(shù)據(jù)庫、開啟VS開發(fā)環(huán)境、調(diào)試程序。程序跑起了，可是頁面中的有段內(nèi)容超過了頁面所容許的范圍。這還不容易喲，SubString唄，
對，這的確是個好法子，能解決這類問題，但當頁面需要被處理過后的內(nèi)容進行交互，這種方法難免有點不適應(yīng)了，那么我們就使用Jquery開發(fā)一個滿足該需求的插件吧；
開發(fā)須知
如果您對使用Jquery開發(fā)插件的流程不是很連接，請查考本篇文章：開發(fā)Jquery插件（一）(包含最終效果圖)
一步一步開發(fā)Jquery插件----文字自動縮放
首先我們應(yīng)該想到為了以后擴展該插件，條件不應(yīng)該寫死在程序中，那么該插件應(yīng)該具備這么幾個參數(shù)：Length（限制長度）、Replace（被替換后的文字）、ShowMore（顯示全部的按鈕）、HideMore（隱藏過多的文字）；
1、在Jquery開發(fā)插件時，它提供向插件傳遞參數(shù)和使用默認定義好的參數(shù)，一般寫法應(yīng)用如下：
復(fù)制代碼 代碼如下:

$.fn.MyFunction= function(options) {//options為我們傳遞的參數(shù)數(shù)組；
var defaults = {
arg1: ...,
arg2: "...",
argN: "",
replace: "..."
};
var options = $.extend(defaults, options);

那么針對我們今天開發(fā)的這個插件，對應(yīng)的插件參數(shù)如下：
復(fù)制代碼 代碼如下:

$.fn.HideMore= function(options) {
var defaults = {
length: 10,
showmore: "更多",
hidemore: "隱藏",
replace: "..."
};
var options = $.extend(defaults, options);

2、那接下來的工作大致流程如下：
i、獲取Div中的內(nèi)容長度；
ii、與傳遞至插件的length的值比較；
iii、如果長度超過length就截取并替換；
iiii、對showmore和hidemore定義事件；
插件源代碼：
復(fù)制代碼 代碼如下:

(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測試代碼：
復(fù)制代碼 代碼如下:

$("elements").HideMore(
{
length:50,
showmore"展",
hidemore"縮",
replace:"......"
});

好了，讀者看到這里不妨把代碼COPY并運行吧。您的第二個插件就誕生咯。

相關(guān)文章

最新評論