.net的自定义JS控件，运用了 面向对象的思想 封装 了 控件(.net自定义控件开发的第一天) 2015-03-30 17:26 by 刘晶, ... 阅读, ... 评论, 收藏, 编辑 大家好！我叫刘晶，很高兴你能看到我分享的文章！希望能对你有帮助！
首先我们来看下几个例子 ，就能看到 如何 自定义控件！
业务需求： 制作 一个 属于 自己的 按钮 对象 ，然后 像 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; //这个是页面传过来的id10 11 var button_html = '<div href="#" id="button_'+this.id+'" class="button" > ' + this.value + '</div>'; // 这个是我们要插入 的 html文件12 this.control.after(button_html);
this.control = $("#" + ClientId); //这是通过 id绑定控件 （有关 需找 标签 都要写到 页面加载完 标签之后执行）
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>
于是我们就可以 得到下面的效果：
点击之后弹出 一个 提示框，我相信 你们也能做到。
总结：
这样写 似乎 很容易理解 ，但是有没有觉得 这样写 自定义控件 有点麻烦，是否可以 更加 简单化呢？
下一章我将会 在 他的基础上 进行 封装，集成，多态，相信 大家应该都听过吧？而且 按钮的功能还不够强大，
为什么 我们不能将这个按钮做的更加 牛逼些呢？