基於Jquery的文字自動截取(提供原始碼)

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.