sbadmin表单事件
Form表单
自定义表单
<from action="" method="'><!--- 这里可以用表单组件快速生成表单元素哦 ---></form>
生成后我们必须引入表单事件才能使有的表单组件正确显示(一般用的是Form.api.bindevent("form[role=form]");
进行组件初始化)
引入表单js模块
//直接引入
require(['form'], function(Form){}); //当我们在新建了项目在/public/assets/js/控制器名.js中引入:(模块化加载的依赖引入)
define(['jquery', 'bootstrap', 'backend', 'form'], function ($, undefined, Backend, Form) { });
上面说我们一般用的是Form.api.bindevent("form[role=form]");
进行组件初始化 它包含了几乎所有的表单组件事件(即调用它就可以生成组件里的所有组件)
如果我们只生成个别表单不想绑定表单总事件则我们可以用下列的事件:
文件上传 Form.events.plupload($("form")); 渲染并绑定form中的上传组件
动态下拉列表 Form.events.selectpage($("form")); 渲染并绑定form中的Selectpage组件
表单验证 Form.events.validator($("form")); 渲染并绑定form中的表单验证
城市选择 Form.events.citypicker($("form")); 渲染并绑定form中的城市选择组件
日期时间 Form.events.datetimepicker($("form")); 渲染并绑定form中的日期时间组件
下拉列表 Form.events.selectpicker($("form")); 渲染并绑定form中的Selectpicker组件
附件选择 Form.events.faselect($("form")); 渲染并绑定form中的选择附件组件
键值配置 Form.events.fieldlist($("form")); 渲染并绑定form中的选择键值配置组件
除了上面的表单组件可以快速生成表单元素,还有其他快速生成的方式:
如:图片上传:
<div class="form-group">
<label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-avatar" data-rule="" class="form-control" size="50" name="avatar" type="text" value="img/101010.jpg">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上传</button></span>
<span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
</div>
<span class="msg-box n-right" for="c-avatar"></span>
</div>
<ul class="row list-inline plupload-preview" id="p-avatar"></ul>
</div>
</div>
//无需表单事件?
该表单事件定义在require.form.js
变量、方法:
Form.config.fieldlisttpl
方法:(!为Form.api.bindevent("form[role=form]");总事件对象调用的)
events:
Form.events.validator ! 渲染并绑定form中的表单验证
Form.events.selectpicker !下拉列表(友好)非多选
Form.events.selectpage ! 渲染并绑定form中的Selectpage组件
Form.events.cxselect ! 联动
Form.events.citypicker ! 渲染并绑定form中的城市选择组件
Form.events.datetimepicker ! 渲染并绑定form中的日期时间组件
Form.events.daterangepicker
Form.events.plupload ! 渲染并绑定form中的上传组件
Form.events.faselect ! 渲染并绑定form中的选择附件组件
Form.events.fieldlist ! 渲染并绑定form中的选择键值配置组件
Form.events.switcher ! 开关组件
Form.events.bindevent !
api
Form.api.submit
Form.api.bindevent
Form.api.custom={}//表单自定义事件存储对象
Form.api.bindevent("form[role=form]");
包含了:Form.events下的这些事件 events.bindevent(form); events.validator(form, success, error, submit); events.selectpicker(form); events.daterangepicker(form); events.selectpage(form); events.cxselect(form); events.citypicker(form); events.datetimepicker(form); events.plupload(form); events.faselect(form); events.fieldlist(form); events.switcher(form);
sbadmin表单事件的更多相关文章
- $().each 和表单事件的坑
在用each循环时 1.想结束循环 return false 2.想跳过某循环 return 3.想跳出function 不行,请切换成其他循环如 for 使用form表单事件 1.必须要有submi ...
- oninput等表单事件
oninput等表单事件 过去我们常使用keydown和keyup辅助表单元素的处理,这要求处理时,表单元素必须处于激活(聚焦)状态.oninput事件可以实时监听文本框的输入变化. 现代浏览器支 ...
- Day050--jQuery表单事件 轮播图 插件库 ajax
表单控件的事件 change()表单元素发生改变时触发事件 select()文本元素发生改变时触发事件 submit()表单元素发生改变时触发事件 .focus() 获取焦点 .blur() 释放焦点 ...
- (96)Wangdao.com_第二十九天_表单事件
表单事件 input 事件 select 事件 change 事件 invalid 事件 reset 事件 submit 事件 ...
- javascript中的常用表单事件用法
下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...
- jQuery-3.事件篇---表单事件
jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的 ...
- 测试开发之前端——No5.HTML5中的表单事件
表单事件 由 HTML 表单内部的动作触发的事件. 适用于所有 HTML 5 元素,不过最常用于表单元素中: 属性 值 描述 onblur script 当元素失去焦点时运行脚本 onchange s ...
- jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- jQuery学习- 表单事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Magento 目录基本介绍
Magento 目录基本介绍 app; 与Magento 1一样,该文件夹包含主要的Magento代码; adminhtml和 frontend;/ app / design / adminhtml和 ...
- Java【第三篇】基本语法之--选择结构
Java分支语句分类 分支语句根据一定的条件有选择地执行或跳过特定的语句,分为两类: if-else 语句 switch 语句 if-else语句语法格式 if(布尔表达式){ 语句或语句块; } i ...
- Java基础 -- 访问控制权限
一 包:库单元 假设我们存在两个类名相同的类,如果没有一定的措施对其进行区分,就会无法区别到底使用的是哪一个类.因此java引入了包来进行名字空间管理. 包(类库)包含有一组类,这些类在单一的名字空 ...
- IDEA或Webstorm设置Terminal终端字体大小
File---Settings
- 3.24网络攻防选拔题部分write up
20175221 3.24网络攻防选拔题部分write up Q1:百度一下,你就知道 解压题目得到一个文件夹和一个网址 打开文件夹,有三张图片 用winhex和stegsolve查看三张图片,没有 ...
- codeforces-1138 (div2)
想法题是硬伤,面对卡题和卡bug的情况应对能力太差 A.求两个前缀和以及两个后缀和,相邻最小值的最大值. #include<iostream> using namespace std; ; ...
- $\be$-QGE 的弱强唯一性
在 [Zhao, Jihong; Liu, Qiao. Weak-strong uniqueness criterion for the $\beta$-generalized surface qua ...
- [再寄小读者之数学篇](2014-05-27 矩阵的迹与 Jacobian)
(from MathFlow) 设 $A=(a_{ij})$, 且定义 $$\bex \n_A f(A)=\sex{\cfrac{\p f}{\p a_{ij}}}. \eex$$ 试证: (1) $ ...
- [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.3 位移梯度张量与无穷小应变张量
1. 位移向量 $$\bex {\bf u}={\bf y}-{\bf x}. \eex$$ 2. 位移梯度张量 $$\bex \n_x{\bf u}={\bf F}-{\bf I}. \eex$ ...
- AngularJS DI(依赖注入)实现推测
AngularJS DI(依赖注入) http://www.cnblogs.com/whitewolf/archive/2012/09/11/2680659.html 回到angularjs:在框架中 ...