你的位置:首页 > Java教程

[Java教程].net的自定义JS控件,运用了 面向对象的思想 封装 了 控件(.net自定义控件开发的第一天)


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

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

  业务需求: 制作  一个   属于 自己的    按钮 对象    ,然后 像 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         this.control = $("#" + ClientId); //这是通过 id绑定控件11         var button_html = '<div href="#" id="button_'+this.id+'"  > ' + 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>

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

点击之后弹出 一个 提示框,我相信 你们也能做到。

 

总结:

  这样写 似乎 很容易理解 ,但是有没有觉得 这样写 自定义控件 有点麻烦,是否可以 更加 简单化呢?

  下一章我将会 在 他的基础上  进行 封装,集成,多态,相信 大家应该都听过吧?而且 按钮的功能还不够强大,

为什么 我们不能将这个按钮做的更加 牛逼些呢?