Automatic text interception based on Jquery (source code provided)_jquery

Plug-in requirements (functional requirements)
A plug-in is to complete a specific function. When we make a plug-in, we should determine what functions the plug-in should have for us to use after it is developed.
One morning, I completed booting, connecting to the database, opening the VS development environment, and debugging the program according to the pattern. The program started, but some content on the page exceeded the allowable range of the page. This is not easy, SubString,
Yes, this is indeed a good way to solve this kind of problem, but when the page needs to be interacted with the processed content, this method is inevitably a bit uncomfortable, then we will Use Jquery to develop a plug-in that meets this requirement;
Development Instructions
If you are not very familiar with the process of using Jquery to develop plug-ins, please check this article: Developing Jquery plug-ins (1) (including final renderings)
Develop Jquery plug-in step by step - automatic text scaling
First of all, we should think that in order to expand the plug-in in the future, the conditions should not be hard-coded in the program, then the plug-in should have the following parameters: Length (limitation) length), Replace (replaced text), ShowMore (show all buttons), HideMore (hide too much text);
1. When developing a plug-in with Jquery, it provides the ability to pass parameters to the plug-in and use default definitions Good parameters are generally written as follows:

Copy code The code is as follows:

$.fn .MyFunction= function(options) {//options is the parameter array we pass;
var defaults = {
arg1: ...,
arg2: "...",
argN: "",
replace: "..."
};
var options = $.extend(defaults, options);

So for the plug-in we developed today , the corresponding plug-in parameters are as follows:

Copy code The code is as follows:

$.fn.HideMore = function(options) {
var defaults = {
length: 10,
showmore: "more",
hidemore: "hide",
replace: "..."
};
var options = $.extend(defaults, options);

2. The general process of the next work is as follows:
i. Get the content length in Div ;
ii. Compare with the length value passed to the plug-in;
iii. If the length exceeds length, intercept and replace it;
iiii. Define events for showmore and hidemore;
Plug-in source code:

Copy code The code is as follows:

(function($) {
$.fn. HideMore = function(options) {
var defaults = {
length: 10,
showmore: "more",
hidemore: "hide",
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 test code:

Copy code The code is as follows:

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

Okay, readers may wish to COPY the code and run it when they see this. Your second plug-in is born.