사용자 정의 JS 컨트롤 - 간단 한 예제

1、  업무 수요: 버튼 대상 을 만 들 고 winfrom 처럼 그렇게 호출 하면 됩 니 다.
우선 MyControls 의 JS 파일 을 새로 만 듭 니 다. (다음 코드 삽입)

//             ，          
var button = function (ClientId) {  
            this.control = null;   //  ：         
            this.id = null;          //      id
            this.value = null;    //        
            this.click = null;      //         
            //       ，         
            this.init = function () {
                this.id = ClientId;   //         id
                this.control = $("#" + ClientId);  //     id    
                var button_html = '<div href="#"  id="button_'+this.id+'"  class="button" > ' + this.value + '</div>';  //            html  
                this.control.after(button_html);  
               //                  
                $("#button_"+this.id+).unbind("click").bind("click",this.click);                                                                                                                       
                this.control.hide();  //       
            };
            
        }

이제 우리 가 이 상 대 를 어떻게 썼 지?
우선 jquery 플러그 인 을 가 져 옵 니 다.
그리고 우 리 는 이 파일 의 경 로 를 도입 해 야 합 니 다.
다음은 button 스타일 을 기록 합 니 다:

<style type="text/css">       
   .button {
       padding: 10px 20px 10px 20px; border: medium solid #FF00FF; width:auto; height: 20px; float: left; background-color: #808080; font-family:   ; font-size: large; font-weight: bold; 
    }
</style>

그리고 이제 우 리 는 너의 웹 페이지 에 쓰기:

<div id="btn"></div>   //                 
<script type="text/javascript">
 var btn_button = new button("btn");    //    new         ，            winfrom     
        btn_button.value = "    ";    //          
        btn_button.click = function () {   //              
            alert("     ·");
        }
        btn_button.init();                 //          ，  ！！！                        
 </script>

저장, 열기, 실행 하면 결 과 를 볼 수 있 습 니 다.