jquery 플러그 인 개발 옵션 제작 상세 설명
하 나 는$함수 자 체 를 확장 하 는 방법 입 니 다.이것 은 정적 확장(클래스 확장 이 라 고도 함)입 니 다.이 플러그 인 은 일반적으로 도구 방법 입 니 다.
또 하 나 는 원형 대상$.fn 위 에 확장 되 어 있 으 며,개 발 된 플러그 인 은 dom 요소 에 사 용 됩 니 다.
클래스 확장
$.showMsg = function(){
alert('hello,welcome to study jquery plugin dev');
}
// $.showMsg();
$.showName = function(){
console.log( 'ghostwu' );
}
$.showName();
2.$.fn 에 기능 확장,
이 플러그 인 은 요소 에 사 용 됩 니 다.예 를 들 어 제 가 기능 을 확장 하고 단 추 를 누 르 면 현재 단추 의 값 을 표시 합 니 다.
$.fn.showValue = function(){
return $(this).val();
}
$(function(){
$("input").click(function(){
// alert($(this).showMsg());
alert($(this).showMsg());
});
});
<input type="button" value=" ">
페이지 레이아웃 과 스타일:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
<style>
#tab {
width:400px;
height:30px;
}
#tab li, #tab ul {
list-style-type:none;
}
#tab ul {
width:400px;
height: 30px;
border-bottom:1px solid #ccc;
line-height: 30px;
}
#tab ul li {
float:left;
margin-left: 20px;
padding:0px 10px;
}
#tab ul li.active {
background: yellow;
}
#tab ul li a {
text-decoration: none;
color:#666;
}
#tab div {
width:400px;
height:350px;
background-color:#ccc;
}
.clearfix:after{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
</style>
<script src="tab2.js"></script>
<script>
$(function(){
$("#tab").tabs( { evType : 'mouseover' } );
});
</script>
</head>
<body>
<div id="tab">
<ul class="clearfix">
<li><a href="#tab1"> 1</a></li>
<li><a href="#tab2"> 2</a></li>
<li><a href="#tab3"> 3</a></li>
</ul>
<div id="tab1"> :ghostwu(1)
<div> : http://www.cnblogs.com/ghostwu/</div>
</div>
<div id="tab2"> :ghostwu(2)
<div> : http://www.cnblogs.com/ghostwu/</div>
</div>
<div id="tab3"> :ghostwu(3)
<div> : http://www.cnblogs.com/ghostwu/</div>
</div>
</div>
</body>
</html>
;(function ($) {
$.fn.tabs = function (opt) {
var def = { evType: "click" }; //
var opts = $.extend({}, def, opt);
var obj = $(this);
$("ul li:first", obj).addClass("active");
obj.children("div").hide();
obj.children("div").eq(0).show();
$("ul li", obj).bind(opts.evType, function () {
$(this).attr("class", "active").siblings("li").attr("class","");
var id = $(this).find("a").attr("href").substring(1);
obj.children("div").hide();
$("#" + id, obj).show();
});
};
})(jQuery);
2,세 번 째 줄 은 기본 설정,옵션 의 트리거 유형 을 정의 합 니 다.기본 값 은 클릭 이벤트 입 니 다.
3,4 줄,opt 참조 시 opt 설정 을 사용 합 니 다.여 부 는 3 줄 의 기본 설정 을 사용 합 니 다.이 줄 의 역할 은 플러그 인 소스 코드 를 바 꾸 지 않 고 플러그 인의 표현 형식 을 설정 할 수 있 도록 하 는 것 입 니 다.
4,7-9 줄,옵션 카드 의 첫 번 째 div 를 표시 하고 나머지 는 모두 숨 깁 니 다.첫 번 째 tab 에 class='active'노란색 하 이 라이트 선택 을 추가 합 니 다.
5,11-16 줄,대응 하 는 옵션 을 클릭 하여 해당 하 는 div 를 표시 하고 숨 깁 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
