亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于Jquery的文字自動(dòng)截取（提供源代碼）

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

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

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

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

2、那接下來(lái)的工作大致流程如下：
i、獲取Div中的內(nèi)容長(zhǎng)度；
ii、與傳遞至插件的length的值比較；
iii、如果長(zhǎng)度超過(guò)length就截取并替換；
iiii、對(duì)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測(cè)試代碼：
復(fù)制代碼 代碼如下:

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

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

相關(guān)文章

最新評(píng)論