웹 프론트엔드 JS 튜토리얼 jquery_jquery를 기반으로 하는 확인란 드롭다운 상자 플러그인 코드

jquery_jquery를 기반으로 하는 확인란 드롭다운 상자 플러그인 코드

May 16, 2016 pm 06:24 PM
드롭다운 상자

option_check.js 코드:

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

/*****************************************
호출 방법은
Jselect ($("#inputid"),{
bindid:'bindid',
hoverclass:'hoverclass',
optionsbind:function(){return hqhtml();}
});
inputid는 드롭다운 상자에 바인딩될 텍스트 상자 ID입니다.
bindid는 드롭다운 상자를 팝업/철회하기 위한 클릭의 컨트롤 ID입니다.
hoverclass는 마우스가 움직일 때의 스타일입니다. 옵션
hqhtml은 바인딩된 데이터입니다
************************************ ************* /
(function($){
$.showselect = {
init : function(o,options){
var defaults = {
bindid : null, //The 이벤트는
bindid의 hoverclass:null에 바인딩됩니다. //마우스가 옵션으로 이동할 때의 스타일 이름
optionsbind:function(){} //드롭다운 상자 바인딩 함수
}
var options = $.extend(defaults ,options);
if(options.optionsbind!=null){//바인딩 함수가 비어 있지 않은 경우
this._setbind(o,options); }
if(options.bindid !=null){
this._showcontrol(o,options)
}
},
_showcontrol:function(o,options){//Control 드롭다운 상자 표시
$(" #" options.bindid).toggle(function(){
$(o).next().slideDown();
},function(){
$(o).next().slideUp()
})
},
_setbind:function(o,options){//데이터 바인딩
var optionshtml="&lt ;div style="z-index: 999; 위치: 절대;">"
options.optionsbind() "</div>";
$(o).after(optionshtml);
var offset= $(o).offset( );
var w=$(o).width()
$(o).next().css({top:offset.top $( o).height() 7,left:offset .left,width:w});
if(options.hoverclass!=null){
$(o).next().find("tr" ).hover(function(){$(this ).addClass(options.hoverclass);},
function(){$(this).removeClass(options.hoverclass);})
}
$(o).next().find ("input[type=checkbox]").filter("[lang=checked]").each(function(){$(this).attr("checked", "선택됨");});
$(o).next().find("input[type=checkbox]").click(function(){
var $ckoption=$(this). attr("체크됨");
if ($ckoption){
$(this).attr("체크됨","");
}else{
$(this).attr( "확인됨","확인됨");
}
})
$(o).next().find("tr").click(function(){
var $ckflag =$(this).find("input[ type=checkbox]");
if($ckflag.attr("checked")){
$ckflag.attr("checked","");
$ckflag.attr("lang" ,"");
}
else{
$ckflag.attr("checked","checked")
$ckflag.attr( "lang","checked");
}
var selarray=new Array()
$(o).next().find("input[type=checkbox]").each( function(){
if($( this).attr("checked"))
selarray.push($(this).parent().next().text())
} );
$(o).val (selarray.join(','))
})
$(o).next().hide()
}
Jselect = function(o, json){
$.showselect.init(o,json)
}
})(jQuery); >html 코드:



코드 복사
코드는 다음과 같습니다. <script type= "text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="option_check.js"></ script> <style type="text/css ">
.hover
{
배경색: 파란색
색상: 흰색; ;/style>
<script type="text /javascript">
$(function(){
Jselect($("#txt_wbk"),{
bindid:'txt_wbk' , //버튼에 바인딩할 수 있습니다. 여기를 클릭하세요. 텍스트 상자에 드롭다운 상자가 표시됩니다.
hoverclass:'hover',
optionsbind:function(){return hqhtml();}
} );
})
function hqhtml(){// 여기서 데이터베이스에서 값을 가져온 후 html을 연결할 수 있습니다. 참고: 사전 옵션
var optionshtml에 lang='checked' 속성을 추가하세요. ="<테이블 스타일='너비:100%; 배경색: 빨간색' cellpadding= "0" cellpacing="0" >"
   "<tr><td 스타일='너비:20px' ><input type="checkbox" value='1' /></ td><td>첫 번째 항목</td></tr>"
  "<tr>< td><input type="checkbox" value='2' lang='checked' /></td><td>두 번째 항목</td></tr>"
  "&lt ;tr><td><input type="checkbox" value='3 ' /></td><td>세 번째 항목</td></tr>"
"&lt ;tr><td><input type="checkbox" value=' 4' /></td><td>네 번째 항목</td></tr></table>" ;
반환 옵션html;
}
</script>
<div>
<input id="txt_wbk" type="text" style="width: 200px;" />드롭다운 상자 테스트
</div>

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

예제 색상 JSON 파일 예제 색상 JSON 파일 Mar 03, 2025 am 12:35 AM

예제 색상 JSON 파일

8 멋진 jQuery 페이지 레이아웃 플러그인 8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

8 멋진 jQuery 페이지 레이아웃 플러그인

자신의 Ajax 웹 응용 프로그램을 구축하십시오 자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

자신의 Ajax 웹 응용 프로그램을 구축하십시오

' this ' 자바 스크립트로? ' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

' this ' 자바 스크립트로?

소스 뷰어와의 jQuery 지식을 향상시킵니다 소스 뷰어와의 jQuery 지식을 향상시킵니다 Mar 05, 2025 am 12:54 AM

소스 뷰어와의 jQuery 지식을 향상시킵니다

모바일 개발을위한 10 개의 모바일 치트 시트 모바일 개발을위한 10 개의 모바일 치트 시트 Mar 05, 2025 am 12:43 AM

모바일 개발을위한 10 개의 모바일 치트 시트

See all articles