基于Jquery的文字自動(dòng)截?。ㄌ峁┰创a）
更新時(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)用如下：
$.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ù)如下：
$.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定義事件；
插件源代碼：
(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è)試代碼：
$("elements").HideMore(
{
length:50,
showmore"展",
hidemore"縮",
replace:"......"
});
好了，讀者看到這里不妨把代碼COPY并運(yùn)行吧。您的第二個(gè)插件就誕生咯。
一個(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è)插件就誕生咯。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開(kāi)折疊效果
- JS/jQuery實(shí)現(xiàn)默認(rèn)顯示部分文字點(diǎn)擊按鈕顯示全部?jī)?nèi)容
- Jquery截取中文字符串的實(shí)現(xiàn)代碼
- 基于jquery的jqDnR拖拽溢出的修改
- 多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼
- jQuery實(shí)現(xiàn)圖片文字淡入淡出效果
- jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果
- jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
- jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(hào)(…)表示的方法
相關(guān)文章
jquery 卷簾效果實(shí)現(xiàn)代碼(不同方向)
卷簾效果在生活中應(yīng)用比較廣泛，因?yàn)樗囊曈X(jué)效果比較不錯(cuò)，本文用代碼實(shí)現(xiàn)一個(gè)，感興趣的朋友不妨了解一下，或許對(duì)你學(xué)習(xí)jquery有所幫助,好了話不多說(shuō)切入正題2013-02-02
這篇文章主要介紹了jQuery仿寫(xiě)百度百科的目錄樹(shù)醫(yī)保詞條樣式，點(diǎn)擊右側(cè)的目錄樹(shù)，左側(cè)跳轉(zhuǎn)到指定的錨點(diǎn)位置，滾動(dòng)鼠標(biāo)，游標(biāo)跟隨一起滾動(dòng)至響應(yīng)鏈接位置，具體實(shí)現(xiàn)思路大家參考下本文2017-01-01
jq源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jq源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
利用jQuery彈出select選擇的值,當(dāng)單擊按鈕的時(shí)候就會(huì)執(zhí)行的一個(gè)方法，它的作用就是alert select值2013-04-04
使用jquery 簡(jiǎn)單實(shí)現(xiàn)下拉菜單
這里給大家展示了一例使用jQuery實(shí)現(xiàn)下拉菜單效果，代碼非常簡(jiǎn)潔，推薦給小伙伴們2015-01-01
jquery獲取table指定行和列的數(shù)據(jù)方法(當(dāng)前選中行、列)
下面小編就為大家?guī)?lái)一篇jquery獲取table指定行和列的數(shù)據(jù)方法(當(dāng)前選中行、列)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播效果
本文給大家介紹的是使用jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播切換特效，效果非常棒，有需要的小伙伴可以參考下。2015-04-04
一般元素下的多個(gè)指定子元素顯示隱藏效果,使用css中的選擇器:nth-child()、:nth-of-type(),但如果想使用JavaScript動(dòng)態(tài)控制,就需要用到j(luò)query的filter()方法2023-08-08
jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery中next()方法用法,實(shí)例分析了next()方法的功能、定義及獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素使用技巧,需要的朋友可以參考下2015-01-01