jquery自定义组件开发
jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。
第一步要知道封装jquery组件的基本语法
(function ($) {
$.fn.ziDinYiZuJian = function () {
//ziDinYiZuJian 组件 要实现的功能代码
}
})(jQuery)
第二步调用自定义的组件
调用组件必须要引入在组件中用到的js包,然后调用
<div id="dom"></div>
$('#dom').ziDinYiZuJian();
注意有可能会报错:$(...).ziDinYiZuJian is not a function.
原因可能是 引入必要的js包的顺序有问题,如果是在子页面调用组件 如果母版页引入了相同js包可能会因为重复引用js包报错,所以最好把母版页的js包 都在页面一开始全引入
在封装自定义jquery组件的时候需要注意的细节问题:
1、组件的数据源只需要是具有某个特征的数据集就可以了
2、组件自己根据传入的控制参数相应的格式化数据
3、暴露出的事件所需要的参数一般是 对象+触发事件的对象
4、组件要尽量封装成可重用的组件
5、组件写好之后要整理一个组件使用文档(包括:需要传入的参数说明、暴露出来的事件、使用事例等等)
jquery自定义组件开发的更多相关文章
- Flex自定义组件开发之日周月日期选择日历控件
原文:Flex自定义组件开发之日周月日期选择日历控件 使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...
- 在Vue前端项目中,附件展示的自定义组件开发
在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&a ...
- 自定义组件开发:使用v-model封装el-pagination组件
1.前言 通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法 利用el-pag ...
- jQuery自定义组件——输入框设置默认提示文字
if (window.jQuery || window.Zepto) { /** * 设置输入框提示信息 * @param options * @author rubekid */ var setIn ...
- Flex自定义组件开发 - jackyWHJ
一般情况下需要组件重写都是由于以下2个原因: 1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展. 2.为了模块化设计或进一步重用,需要对FLEX组件进行组合. ...
- Flex自定义组件开发
一般情况下需要组件重写都是由于以下2个原因:1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展.2.为了模块化设计或进一步重用,需要对FLEX组件进行组合.而F ...
- React jQuery公用组件开发模式及实现
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- 使用vue的extend自定义组件开发
index.js import Vue from 'vue' import tip from './tip.vue' const Constructor = Vue.extend(tip); cons ...
- 微信小程序自定义组件实现
官方从 1.6.3 开始对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!,现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面 ...
随机推荐
- Codeforces Gym 101190 NEERC 16 .L List of Primes(递归)
ls特别喜欢素数,他总是喜欢把素数集合的所有子集写下来,并按照一定的顺序和格式.对于每一个子集,集合内 的元素在写下来时是按照升序排序的,对于若干个集合,则以集合元素之和作为第一关键字,集合的字典序作 ...
- BZOJ-3940:Censoring(AC自动机裸题)
Farmer John has purchased a subscription to Good Hooveskeeping magazine for his cows, so they have p ...
- HDU5692 Snacks
HDU5692 Snacks Problem Description 百度科技园内有n个零食机,零食机之间通过n−1条路相互连通.每个零食机都有一个值v,表示为小度熊提供零食的价值. 由于零食被频繁的 ...
- 【LeetCode】011 Container With Most Water
题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...
- final修饰变量
final修饰基本类型变量 当使用final修饰基本类型变量时,不能对基本类型变量重新赋值,因此基本类型变量不能被改变 final修饰引用类型变量 当使用final修饰引用类型变量时,它保存的仅仅是一 ...
- js 图片上传
可能很多不熟悉的图片上传的同学会觉得有点懵,其实做过一次你就会发现特别的简单. 只是一个formData格式的表单提交,把地址写到 action = "" 里面就可以了,当然你可以 ...
- Codeplus2017 11月赛T3——基因
题目:https://www.luogu.org/problemnew/show/P4059 DP,状态应分为空格或字母,可用0和1表示,据此转移,详见代码. 另:注意初始化,因为有负值所以要先把f数 ...
- [hdu6201]transaction transaction transaction(树形dp)
题意:某人在一棵树中在某处买物品,价格为i,在某处卖物品,价格为j,每单位距离花费价格1,求最大赚钱数. 解题关键:两次树形dp,分别求出每个点作为被减和被加情况下的最大值,最后取一下max即可. 该 ...
- jQuery命名空间和自定义插件的的多种方法
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- zoj 3640 Help Me Escape (概率dp 递归求期望)
题目链接 Help Me Escape Time Limit: 2 Seconds Memory Limit: 32768 KB Background If thou doest w ...