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>

然后 ,接下来我们 在  你的  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("展示出来了·");
}
btn_button.init(); //然后初始化 按钮 ,注意!!! 初始化 一定要在 所有属性 赋值完成后才执行
</script>

保存,打开,运行就能看到结果了。

自定义JS控件-简单示例的更多相关文章

  1. Android自定义组合控件详细示例 (附完整源码)

    在我们平时的Android开发中,有时候原生的控件无法满足我们的需求,或者经常用到几个控件组合在一起来使用.这个时候,我们就可以根据自己的需求创建自定义的控件了,一般通过继承View或其子类来实现. ...

  2. Android自定义用户控件简单范例(二)

    对于完全由后台定制的控件,并不是很方便其他人的使用,因为我们常常需要看到控件放到xml界面上的效果,并根据效果进行布局的调整,这就需要一个更加标准的控件制作流程: 我们的自定义控件和其他的控件一样,应 ...

  3. Android自定义用户控件简单范例(一)

    一款优秀的移动应用需要具有自己独特统一的风格,通常情况下UI设计师会根据产品需求和使用人群的特点,设计整体的风格,界面的元素和控件的互效果.而原生态的Android控件为开发人员提供的是最基本的积木元 ...

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

    大家好!我叫刘晶,很高兴你能看到我分享的文章!希望能对你有帮助! 首先我们来看下几个例子 ,就能看到 如何 自定义控件! 业务需求: 制作  一个   属于 自己的    按钮 对象    ,然后 像 ...

  5. 使用jQuery和CSS自定义HTML5 Video 控件 简单适用

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...

  6. arcgis api for js共享干货系列之二自定义Navigation控件样式风格

    arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...

  7. android自定义倒计时控件示例

    这篇文章主要介绍了Android秒杀倒计时自定义TextView示例,大家参考使用吧 自定义TextView控件TimeTextView代码: 复制代码 代码如下: import android.co ...

  8. arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格(附源码下载)

    0.内容概览 自定义 Navigation 控件样式风格 源码下载 1.内容讲解 arcgis api 3.x for js 默认的Navigation控件样式风格如下图:这样的风格不能说不好,各有各 ...

  9. WPF自定义分页控件,样式自定义,简单易用

    WPF自定义分页控件 做了许久伸手党,终于有机会贡献一波,搜索一下WPF分页控件,还是多,但是不太通用,主要就是样式问题,这个WPF很好解决,还有一个就是分页控件嘛,只关心几个数字的变动就行了,把页码 ...

随机推荐

  1. 微小,但是美好的改变 G2 2.2发布

    G2 2.2.0, 『微小,但是美好的改变.』 # 一.丰富可视化交互形式 #### 选择: [图形的单选.多选](https://g2.alipay.com/tutorial/geom-select ...

  2. jQuery源码分析系列(30) : Ajax 整体结构

    开头引用一段 想起一句话:前端研究,研究个屁~ 的确如此呀.补充下联:前端设计,设计个屁~ 前端目前最大的困境是,如 HTML 一样,无论你承不承认,市场上并不太需要 HTML 高手 其实这里引发一个 ...

  3. Android实现播放视频

    转载:http://www.bdqn.cn/news/201311/12100.shtml 使用VideoView播放视频 VideoView,用于播放一段视频媒体,它继承了SurfaceView,位 ...

  4. 分享几个.NET WinForm开源组件,纪念逐渐远去的WinForm。。。

    前面3个月的时间内,这些.NET开源项目你知道吗?系列文章已经发表了3篇,共计45个平时接触比较少,曾经默默无闻的.NET开源项目,展示给大家,当然不是每个人都能用得上,但也的确是有些人用了,反响还不 ...

  5. 如何用Python实现杨辉三角和心

    1. 如何实现杨辉三角 import copy list=[] newlist=[] def Fibonacci(list,n): newlist.append(0) if n ==1: return ...

  6. kafka源码分析之二客户端分析

    客户端由两种:生产者和消费者 1. 生产者 先看一下生产者的构造方法: private KafkaProducer(ProducerConfig config, Serializer<K> ...

  7. FreeMarker模板开发指南知识点梳理

    freemarker是什么? 有什么用? 怎么用? (问得好,这些都是我想知道的问题) freemarker是什么? FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生 ...

  8. C语言实现控制台中光标随意移动

    开始准备学习下C,新手哦~~ 今天弄了个控制台程序,光标可以随意在DOS下移动~~ 先放一张效果图,不过很丑,大家能不能看懂,哈哈,就是 I Love You. 代码注释都有,其实好多东西我都是从其他 ...

  9. Redis 对比 Memcached 并在 CentOS 下进行安装配置

    了解一下 Redis Redis 是一个开源.支持网络.基于内存.键值对的 Key-Value 数据库,使用 ANSI C 编写,并提供多种语言的 API ,它几乎没有上手难度,只需要几分钟我们就能完 ...

  10. 数据结构Java实现01----算法概述

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...