.net的自定义JS控件，运用了面向对象的思想封装了控件(.net自定义控件开发的第一天)

浏览数：28 / 时间：2015年06月09日

大家好！我叫刘晶，很高兴你能看到我分享的文章！希望能对你有帮助！

首先我们来看下几个例子，就能看到如何自定义控件！

业务需求：制作一个属于自己的按钮对象，然后像 winfrom 那样调用就可以了：

首先我们新建一个 MyControls的 JS文件：（插入如下代码）

 1 //这里运用的面向对象的思想 ，新建了一个按钮对象 
 2 var button = function (ClientId) {  
 3             this.control = null;   //属性： 按钮对象的 自己
 4             this.id = null;          //按钮对象的 id
 5             this.value = null;    //按钮对象显示的值
 6             this.click = null;      //按钮对象的点击事件
 7             //接下来是初始化， 所有 按钮的属性
 8             this.init = function () {
 9                 this.id = ClientId;   //这个是页面传过来的id
10                 this.control = $("#" + ClientId);  //这是通过 id绑定控件
11                 var button_html = ‘<div href="#"  id="button_‘+this.id+‘"  class="button" > ‘ + this.value + ‘</div>‘;  // 这个是我们要插入 的 html文件
12                 this.control.after(button_html);  
13                //绑定点击事件            
14                 $("#button_"+this.id+).unbind("click").bind("click",this.click);                                                                                                                       
15                 this.control.hide();  //隐藏 当前控件
16             };
17             
18         }

接下来我们怎么用的这个对象呢？

首先，我们先导入 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>

然后，接下来我们在你的 web页面内写下：

 <div id="btn"></div>   //这里 是我们的要将 其改变成 按钮
<script type="text/javascript">
 var btn_button = new button("btn");    //这里是 new  一个按钮的对象， 有没有觉得 非常 像 winfrom  的开发
        btn_button.value = "我是好人";    //这里是给他的属性赋值
        btn_button.click = function () {   //这里是 按钮的点击事件   
            alert(1);
        }
        btn_button.init();                 //然后初始化 按钮  ，注意！！！  初始化 一定要在 所有属性 赋值完成后才执行
 </script>

于是我们就可以得到下面的效果：

技术分享