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="< ;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>"
"< ;tr><td><input type="checkbox" value='3 ' /></td><td>세 번째 항목</td></tr>"
"< ;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>
배경색: 파란색
색상: 흰색; ;/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>"
"< ;tr><td><input type="checkbox" value='3 ' /></td><td>세 번째 항목</td></tr>"
"< ;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으로 문의하세요.

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7303
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1342
46


라라벨 튜토리얼
1259
25


PHP 튜토리얼
1207
29

