Jquery 기반 자동 텍스트 가로채기(소스코드 제공)_jquery

플러그인 요구사항(기능적 요구사항)
플러그인은 특정 기능을 완성하기 위한 것입니다. 플러그인을 만들 때, 플러그인이 개발된 후에 사용하려면 어떤 기능을 갖춰야 하는지 결정해야 합니다.
어느 날 아침, 부팅, 데이터베이스 접속, VS 개발 환경 오픈, 패턴에 따른 프로그램 디버깅을 완료했습니다. 프로그램이 시작되었지만 페이지의 일부 내용이 페이지의 허용 범위를 초과했습니다. 이것은 쉽지 않습니다, SubString,
예, 이것은 실제로 이런 종류의 문제를 해결하는 좋은 방법이지만 페이지가 처리된 콘텐츠와 상호 작용해야 할 때 이 방법은 필연적으로 약간 불편하므로 다음을 사용하겠습니다. 이 요구 사항을 충족하는 플러그인을 개발하기 위한 Jquery;
개발 지침
Jquery를 사용하여 플러그인을 개발하는 프로세스에 익숙하지 않은 경우 Jquery 플러그인 개발(1)을 확인하세요. ) (최종 렌더링 포함)
Jquery 플러그인 단계별 개발 - 자동 텍스트 스케일링
우선, 향후 플러그인 확장을 위해서는 조건이 어렵지 않아야 한다고 생각해야 합니다. -프로그램에 코딩된 경우 플러그인에는 다음 매개변수가 있어야 합니다: 길이(제한) 길이), 바꾸기(대체된 텍스트), ShowMore(모든 버튼 표시), HideMore(너무 많은 텍스트 숨기기)
1. Jquery로 플러그인을 개발할 때 매개변수를 플러그인에 전달하고 기본 정의를 사용하는 기능을 제공합니다. 좋은 매개변수는 일반적으로 다음과 같이 작성됩니다.

코드 복사 코드는 다음과 같습니다.

$.fn .MyFunction= function(options) {//options는 우리가 전달하는 매개변수 배열입니다.
var 기본값입니다. = {
arg1: ...,
arg2: "...",
argN: "",
replace: "..."
}
var 옵션 = $.extend(defaults, options);

그래서 오늘 개발한 플러그인의 경우 해당 플러그인 매개변수는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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

2. 다음 작업의 일반적인 과정은 다음과 같습니다.
i. Div에 전달된 길이 값과 비교합니다. 플러그인;
iii. 길이가 길이를 초과하면
iiii. showmore 및 hidemore에 대한 이벤트 정의:

코드 복사 코드는 다음과 같습니다.

(function($) {

$.fn. HideMore = function(options ) {
var defaults = {
길이: 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 = "" 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
}
}); >};
})(jQuery);


HTML 테스트 코드:




코드 복사

코드는 다음과 같습니다:

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

});

좋아요, 독자들은 이 코드를 보면 코드를 복사하여 실행하고 싶을 수도 있습니다. 두 번째 플러그인이 탄생했습니다.