온라인으로 검색해 보면 기성 컨트롤이 많이 있는데, 기성 컨트롤을 이해하고 현재 시스템과 결합하여 적용해야 하는데 이 정도의 시간이 소요될 것입니다. 내가 직접 만드는 것과 마찬가지
그러면 좋을 것 같아요. 직접 만들어 보면 작동 방식을 더 잘 이해할 수 있고 나중에 사용하기도 더 쉬워질 것입니다.
제 목표는 이것을 컨트롤로 활용하여 외부 프로그램의 커플링을 줄이는 것입니다. 즉, 추가하는 것을 잊지 않도록 외부 프로그램 사용에 필요한 조건을 최대한 줄여야 한다는 것입니다. 설정이 중단되었습니다.
가능하거나 바람직하다면 Jquery 하나만 참조하면 되고 다른 JavaSciprt는 프로그래밍 방식으로 생성됩니다.
드디어 앞서 언급한 동적 컨트롤과 함께 사용할 수 있기를 바랍니다. 오늘은 먼저 연구하고 다음 html 프로토타입을 사용하여 먼저 타당성을 테스트한 후 변경을 시작하겠습니다. ASP.NET 컨트롤에 적용됩니다.
이 프로그램에는 주의가 필요한 몇 가지 중요한 문제가 있습니다.
드롭다운 메뉴가 트리거되는 방식, 드롭다운 메뉴의 내용을 그리는 방법, 메뉴 이벤트에 의해 트리거되는 캡처 및 값이 어디에 있어야 하는지 선택 이벤트 캡쳐 후 저장
위 문제가 해결된 후 나중에 ASP.NET에서 다시 작성하게 되므로 프로토타입을 디자인할 때 ASP.NET에 적용 가능한지 주의가 필요합니다
아이디어는 다음과 같습니다.
This is my 계획은 OnClick 이벤트에 의해 트리거되는 버튼을 디자인하는 것입니다. 이때 JQuery는 메뉴를 동적으로 생성하기 위해 ASP.NET에서 동적으로 생성된 메뉴 배열을 캡처합니다.
생성된 메뉴는 세 가지 이벤트(mouseover mouseout click)를 설정할 수 있어야 합니다. 처음 두 개는 미적 목적을 위한 것이므로 클릭 이벤트가 트리거된 후
는 선택한 값을 저장합니다. asp.net 서버 컨트롤 TextBox에서 값이 PostBack으로 다시 전달될 수 있도록 서버 측에서 이를 처리합니다.
메타 http-equiv="Content-Type" content="text/html; charset=utf-8" />
Jquery를 사용하여 값을 입력할 수 있는 드롭다운 메뉴 구현 (1) <br><script type=" text/javascript"> <br>$(document).ready(function () { <br>//애니메이션 속도<br>var speed = 500; <br>//메뉴 관련 이벤트 처리<br>$( "#divPop div").live("mouseover mouseout click", function (event) { <br>if (event.type == "mouseover") { <br>//$(this ).addClass('highlight' ); <br>$(this)[0].style.backColor = '#E6F5FA' <br>} <br>if (event.type == "mouseout") { <br>//$(this) .removeClass("highlight"); <br>$(this)[0].style.BackgroundColor = '#DDFFDD' <br>} <br>if (event.type == " click") { <br> var inID = $("#btnDDL").get(0).getAttribute("inputid"); <br>//alert($(this).html()); <br> $("#" inID) .val($(this).html()); <br>} <br>}) <br>//드롭다운 메뉴의 옵션을 동적으로 생성한 후 읽어보세요. 배열에서 메뉴를 생성합니다<br>$(" #divPop").append("<div>test1</div>") <br>$("#divPop").append("<div> ;test2</div>"); <br>/ /Bind 이벤트 처리<br>$("#btnDDL").click(function (event) { <br>//이벤트 버블링 취소<br>event.stopPropagation( ); <br>//팝업 레이어 위치 설정 <br>var offset = $(event.target).offset() <br>//alert($(event.target).width()); >var inID = $(this).get(0 ).getAttribute("inputid"); <br>//입력 및 버튼 너비에 따라 드롭다운 메뉴의 너비 설정<br>$("#divPop ")[0].style.width = ($("#" inID ).width() $(this).width() 10) "px"; <br>//팝을 숨기려면 빈 영역을 클릭하세요. -up 레이어<br>$(document).click(function (event) { $(" # divPop").hide(speed) }) <br>//드롭다운 메뉴가 표시되는 위치 설정<br>$("#divPop").css({ top: offset.top $(event.target).height () 10 "px", left: offset.right }); <br>//표시 상태 전환 팝업 레이어<br>$("#divPop").toggle(speed) <br>}) <br></script> <br><body> <br><div> <br><br /><br /> < ;br /><input name="txtKey" type="text " maxlength="30" size="30" id="txtKey" style="Padding:2px;" />< 버튼 id="btnDDL" inputid="txtKey" >▼</button> <br></div> <br><!-- 팝업 레이어--> <br><div id=" divPop " style="Background-color: #DDFFDD; 테두리: 단색 1px #000000; 위치: 절대; 디스플레이:없음; <BR>너비: 300px; 높이: 100px;"> <br></div> <br></body> <br></html> <br><br> <br>모두가 해결하고 싶어하는 문제도 있는데, 바로 divPop을 동적으로 생성하는 것입니다...</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="TimergliderJS는 jQuery 기반 타임라인 플러그인_jquery입니다." href="http://m.php.cn/ko/faq/19382.html">TimergliderJS는 jQuery 기반 타임라인 플러그인_jquery입니다.</a></span><span>다음 기사：<a class="dBlack" title="TimergliderJS는 jQuery 기반 타임라인 플러그인_jquery입니다." href="http://m.php.cn/ko/faq/19384.html">TimergliderJS는 jQuery 기반 타임라인 플러그인_jquery입니다.</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>