一.概述
现在的软件开发都追求组件化的思想,特别是前端开发,目前有很多前端的组件我们可以方便的使用来满足一些需求,比如图片的轮播,TAB切换等等。其实基本原理都是使用了jquery的ui组件,下面我们来自己动手基于jquery的ui组件来开发组件。这只是一个小例子,主要目的是演示如何写jquery的ui组件开发代码。
二.代码
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script>
('timer' in jQuery.fn) ||(function($){
$.widget('ui.timer', {
options: {},
// _init && _create 自动被调用
_init:function(){
console.log("_init");
// 把客户端传递给组件的参数打印出来
console.log(this.options.from);
console.log(this.options.to);
console.log(this.options.format);
},
_create:function(){
console.log("_create")
}
});
})(jQuery);
// 测试刚才的小组件
jQuery(function($){
$('<div></div>').timer({
from:'fromDate',
to:'toDate',
format:'yyyy-MM-DD-HH-MM-SS'
});
});
</script>
输出结果:
_create
_init
fromDate
toDate
yyyy-MM-DD-HH-MM-SS
注意这里的_init&&_create都是被jquery自己调用,不需要我们去调用。先调用_create再调用_init
三.随便写写
其实软件开发和框架开发都要遵循的是模块化,模块和模块之间的耦合度要低,模块本身的内聚度要高,这样就不会造成修改模块A后,其他模块也要修改。jquey的ui和jquery本身的api分开,这样ui组件大家可以随意去增加,这不会影响jquery的核心api.
分享到:
相关推荐
组件间相对独立,可按需加载,避免浪费带宽拖慢网页打开速度。 标准先进 支持 WAI-ARIA,通过标准 XHTML 代码提供渐进增强,保证低端环境可访问性。 美观多变 提供近 20 种预设主题,并可自定义多达 60 项...
日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码,同时一些现有组件无法满足需求的情况下,需要对现有组件进行扩展,本文使用一套基于jquery ui 的扩展js组件—jtable ...
Armrack基于avalon的ui组件库当前进度:编写MD编辑器文档编写上传组件的文档已完成:tip系统提示组件modal弹出框组件MDEditor编辑器组件图片上传组件文件上传组件计划执行:日期选择组件css3基础动效库标签页组件...
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要...
能够在 Vue、JQuery或者其他现有项目中配合使用 丰富的组件和功能,满足大部分网站场景 细致、漂亮的 UI 事无巨细的文档 安装 使用 npm,你将需要使用TypeScript,并在ts文件里编写和使用代码。 请确保你了解过...
一个基于Javascript并使用Typescript编写的轻量级UI插件库 目前项目仍处于制作阶段,随后将会更新更多的组件,制作更加详细的文档介绍和官网详情页面 特性 优雅,简洁,与庞大且臃肿让人看了眼花缭乱的结构 不依赖...
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。通过jQuery EasyUI开发者不需要编写复杂的javascript,也不需要对css样式有深入的...
Vanilla JavaScript UI控件 编写的自定义UI控件没有任何供应商库依赖,例如jQuery 请注意,浏览器支持会因控件而异。
这个资源是一个基于vue2和element-ui实现的自定义分页表格组件,是将element-ui的表格组件和分页组件封装成了一个组件,可以指定接口地址,快速实现分页表格的渲染,减少前端代码的编写。使用的技术:vue2.6.14、...
语义UI Angular集成,以纯Angular编写-无需JQuery 。 介绍 Angular和jQuery不兼容-这是该库的基本原理。 它提供了语义UI模块的Angular组件版本,因此您无需在应用程序中添加jQuery。 请注意,此处仅重新创建了使用...
jQuery Energize 是一个基于 jQuery 库构建的 javascript 组件,可轻松创建*智能* *可扩展* UI 组件。 特征: 支持数据属性覆盖配置参数 轻松公开组件的公共方法。 使用noConflict避免覆盖现有组件 通过使用原型...
可选增强扩展模块,比如 jQueryUI。 1.1.3 jQuery的历史 2006年年初,开发人员John Resig在BarCamp NYC(http://barcamp.org)首次公布自己的研究成果jQuery。他在自己的网站上说,之所以创建 jQuery是因为他对...
AngularUI团队使用纯AngularJS编写的Bootstrap组件。 UI Bootstrap基于Bootstrap的标记和CSS提供了一组本地AngularJS指令。 结果,不需要依赖jQuery或BootstrapJavaScript。 所有指令的构建文件都以多种形式分布:...
jQuery + jQueryUI 该系统使用jQuery中的Javascript脚本库,并使用jQuery提供的功能函数来完成编码逻辑,实现业务功能,并解决多个浏览器的兼容性问题。 该系统在jQuery UI和动画效果中使用了许多插件,例如用于在...
它提供了Fomantic UI模块的Angular组件版本,因此您无需在应用程序中添加jQuery。 请注意,此处仅重新创建了使用jQuery的Fomantic UI元素-不包括那些纯粹用CSS编写的元素,因为它们已经可以在Angular应用中使用。 ...
所有的 HTML 和 CSS 都已编写完毕,您只需要添加自己的 jQuery(和 jQuery UI)风格的 JavaScript。 模型项目和列表 您的工作是弄清楚如何为这个应用程序的每个组件建模,并提供一个优雅的、面向对象的解决方案。 ...
myPagination是一个灵活的web分页组件,压缩后只有几KB。 优雅灵活的接口 myPagination很用心的设计了她的接口,她拥有丰富的配置参数控制初始化状态,并且每次调用后还会返回一些实用的内部控制接口,你可以先用...
wicket-js 使在组件和行为中编写和处理自定义 JavaScript 和变得容易。 它有助于将 Wicket Ajax Behavior 侦听器与实际客户端 UI 功能分开,同时保持与 Wicket 组件的耦合。 它提供了一个(基本的),允许您在 ...
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解...
基于TypeScript编写的高质量简洁UI组件库,一切都是纯原生JS。 适用与后端人员或者没学过jQuery与前端三大框架但又不想学的人,想要简单的搭建一个页面并且需要一些组件来辅助,不想使用boostrap这类框架; 在线文档...