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. MyEclipse中屏蔽js检验

    方法一: 右键工程-->properties-->Myeclipse-->validation-->Excluded Resource,勾选需要取消验证的文件或者文件夹就可以了 ...

  2. JS数字计算精度误差的解决方法

    本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0. ...

  3. XE2:查看Extended Events收集的数据

    SQL Server 使用Target来存储Events,Target 能够将Events存储到File中(扩展名是 xel),或 memoy buffer 中(Ring Buffer),Event ...

  4. EF-DbUpdateException解决方案

    图二:

  5. 手把手教你用nodejs+SQL Server2012做增删改查

    1.开发工具WebStorm 10.0.4 2.打开WebStorm 10.0.4新建项目:

  6. C++中public、protected及private用法

    转自:http://www.jb51.net/article/54224.htm 初学C++的朋友经常在类中看到public,protected,private以及它们在继承中表示的一些访问范围,很容 ...

  7. Neutron 功能概述 - 每天5分钟玩转 OpenStack(65)

    从今天开始,我们将学习 OpenStack 的 Networking Service,Neutron.Neutron 的难度会比前面所有模块都大一些,内容也多一些.为了帮助大家更好的掌握 Neutor ...

  8. 浅谈requireJS

    项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requi ...

  9. mac使用终端运行mysql,mysql终端,mysql mac,mysql目录,mysql路径

    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/loc ...

  10. 1Z0-053 争议题目解析501

    1Z0-053 争议题目解析501 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 501.Note the output of the following query; SQL&g ...