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

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

业务需求: 制作  一个   属于 自己的    按钮 对象    ,然后 像 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 var button_html = '<div href="#" id="button_'+this.id+'" class="button" > ' + this.value + '</div>'; // 这个是我们要插入 的 html文件
this.control.after(button_html);
               this.control = $("#" + ClientId);  //这是通过 id绑定控件  (有关 需找 标签 都要写到 页面加载完 标签之后执行)
 //绑定点击事件   $("#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>

然后 ,接下来我们 在  你的  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>

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

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

总结:

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

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

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

.net的自定义JS控件,运用了 面向对象的思想 封装 了 控件(.net自定义控件开发的第一天)的更多相关文章

  1. 自定义JS控件-简单示例

    1.  业务需求: 制作 一个按钮对象,然后 像 winfrom  那样调用 就可以了: 首先 我们新建一个 MyControls的 JS文件:(插入如下代码) //这里运用的面向对象的思想 ,新建了 ...

  2. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  3. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  4. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  5. Android自定义View(RollWeekView-炫酷的星期日期选择控件)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...

  6. JS 获取某个容器控件中id包含制定字符串的控件id列表

    //获取某容器控件中id包含某字符串的控件id列表 //参数:容器控件.要查找的控件的id关键字 function GetIdListBySubKey(container,subIdKey) { va ...

  7. C# 如何定义让PropertyGrid控件显示[...]按钮,并且点击后以下拉框形式显示自定义控件编辑属性值

    关于PropertyGrid控件的详细用法请参考文献: 1.C# PropertyGrid控件应用心得 2.C#自定义PropertyGrid属性 首先定义一个要在下拉框显示的控件: using Sy ...

  8. 示例篇-购物车的简单示例和自定义JS

    简介: 支持平台: Android4.0,iOS7.0,Windows 10, Windows 10 mobile 说明:主要是演示listview所在的ui和模板cell所在的ui之间数据的交互,点 ...

  9. 问题解决——基于MSCOMM32.OCX控件的类在客户机不能创建控件

    大家不要笑我了,我不喜欢用那个人家写的串口类. 所以导出了MSCOMM32.OCX的类,然后在此基础上写了一个串口打印机的小工具类. -------------声明--------------- 本文 ...

随机推荐

  1. 从xcode 6 上传 App Store

    2014苹果结束了大会,ios8公布.可怜的苹果开发人员又要開始伤脑筋了. 比方提交新产品的那个iTunes connect体验就做得极烂.并且这还是本菜鸟的第一次上线提交.折寿啊 一.制作证书.ap ...

  2. 系统如何端子app弄root才干

    最近由于调试USB OTG怪东西.这导致USB端口被占用,这项.虽然我是project版本号,但不能运行adb shell,这是不可能的debug该. 所以,我现在是一个系统终端apk,规划 http ...

  3. MVC下判断用户登录和授权状态方法

    MVC下判断用户登录和授权状态方法 在我们日常开发的绝大多数系统中,都涉及到管理用户的登录和授权问题.登录功能(Authentication),针对于所有用户都开放:而授权(Authorization ...

  4. POJ 3009-Curling 2.0(DFS)

    Curling 2.0 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12158   Accepted: 5125 Desc ...

  5. 第十七章——配置SQLServer(3)——配置“对即时负载的优化”

    原文:第十七章--配置SQLServer(3)--配置"对即时负载的优化" 前言: 在第一次执行查询或者存储过程时,会创建执行计划并存储在SQLServer的过程缓存内存中.在很多 ...

  6. [DEEP LEARNING An MIT Press book in preparation]Linear algebra

    线性代数是数学的一个重要分支,它经常被施加到project问题,要了解学习和工作深入研究的深度,因此,对于线性代数的深刻理解是非常重要的.下面是我总结的距离DL book性代数中抽取出来的比較有意思的 ...

  7. Linux网络基础设施配置

    1.TCP/IP网络配置文件 /etc/sysconfig/network-scripts/ifcfg-eth0 /etc/sysconfig/network /etc/host.conf /etc/ ...

  8. 人迹罕至的android要完全退出程序的一种方法

    最近的一个项目,无意中发现了一个方法,使android要完全退出程序的一种方法,遥想当年,以便找到让的有效途径android遇险完全退出程序,我不由得有些感慨. 在这里,不敢独享.和大家分享一下,还启 ...

  9. nodejs http静态服务器

    使用nodejs写的很简单的静态服务器,没有做cluster处理,没有做缓存处理,不支持访问文件夹,功能只有一个,就是获取到文件后再返回文件内容. var fs = require('fs'); va ...

  10. 余弦信号DFT频谱分析(继续)

    以前谈到序列的实际长度可以通过零填充方法加入,使得最终增加N添加表观分辨率. 但它并没有解决泄漏频率的问题. 根本原因在于泄漏窗口选择的频率. 由于矩形窗突然被切断,频谱旁瓣相对幅度过大,造成泄漏分量 ...