Plug-in requirements (functional requirements)
A plug-in is the completion of a specific function, we have to make a plug-in when the plug-in should be determined after the development of what features for us to use.
On one morning, complete the boot up, connect the database, open the VS development environment, debug the program in the mode. The program runs, but there is a paragraph in the page that exceeds the allowable range of the page. It's not easy yo, substring Bai,
Yes, this is a good way to solve such problems, but when the page needs to be processed to interact with the content, this approach is inevitably a bit uncomfortable, then we use jquery to develop a plug-in to meet the needs of it;
Development Notes
If you are not very connected to the process of using jquery to develop plug-ins, check out this article: Develop jquery plug-ins (i) (including final effect diagram)
Develop jquery plug-ins----Text Auto Scale
First we should think that in order to extend the plug-in later, the condition should not be written dead in the program, then the plug-in should have so many parameters: length (limit length), replace (replaced text), ShowMore (Show all the buttons), Hidemore (hide too much text);
1, in the jquery development plug-in, it provides to the plug-in transfer parameters and use the default definition of parameters, the general application of the following:
Copy Code code as follows:
$.fn. myfunction= function (options) {//options is an array of arguments passed for us;
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 code as follows:
$.fn. hidemore= function (options) {
var defaults = {
Length:10,
ShowMore: "More",
Hidemore: "Hide",
Replace: "..."
};
var options = $.extend (defaults, options);
2, then the work of the general process is as follows:
I, get the content length in div;
II, compared with the value of length passed to the plug-in;
III, if the length is longer than the intercept and replace;
IIII, defining events for ShowMore and Hidemore;
Plug-in source code:
Copy Code code 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 code as follows:
$ ("Elements"). Hidemore (
{
LENGTH:50,
ShowMore "exhibition",
Hidemore "Shrink",
Replace: "..."
});
Well, the reader can see here to copy and run the code. Your second plugin was born.
