UXC.Form Class
Item Index
Methods
- disableButton static
- initAutoFill static
- initAutoFill.selectHasVal static
- initAutoSelect static
- initAutoSelect.getInstance static
- initAutoSelect.isSelect static
- initCheckAll static
- initNumericStepper static
Properties
- initAutoFill.decodeFunc static
- initAutoSelect.allChanged static
- initAutoSelect.beforeInited static
- initAutoSelect.change static
- initAutoSelect.dataFilter static
- initAutoSelect.hideEmpty static
- initAutoSelect.inited static
- initAutoSelect.processUrl static
- initAutoSelect.randomurl static
- initAutoSelect.triggerInitChange static
- initNumericStepper.onchange static
Methods
disableButton
-
_selector
-
_durationMs
禁用按钮一定时间, 默认为1秒
Parameters:
-
_selector
Selector要禁用button的选择器
-
_durationMs
Int禁用多少时间, 单位毫秒, 默认1秒
initAutoFill
-
_selector
-
_url
表单自动填充 URL GET 参数
只要引用本脚本, DOM 加载完毕后, 页面上所有带 class js_autoFillUrlForm 的 form 都会自动初始化默认值
requires: jQuery
Parameters:
-
_selector
Selector | Url string显示指定要初始化的区域, 默认为 document
-
_url
String显示指定, 取初始化值的 URL, 默认为 location.href
Example:
UXC.Form.initAutoFill( myCustomSelector, myUrl );
initAutoFill.selectHasVal
-
_select
-
_val
判断下拉框的option里是否有给定的值
Parameters:
-
_select
Selector -
_val
String要查找的值
initAutoSelect
-
_selector
初始化 级联下拉框
只要引用本脚本, 页面加载完毕时就会自动初始化级联下拉框功能
动态添加的 DOM 需要显式调用 AutoSelect( domSelector ) 进行初始化
要使页面上的级联下拉框功能能够自动初始化, 需要在select标签上加入一些HTML 属性
defaultselect: none, 该属性声明这是级联下拉框的第一个下拉框, 这是必填项,初始化时以这个为入口
selectvalue: string, 下拉框的默认选中值
selecturl: string, 下拉框的数据请求接口, 符号 {0} 代表下拉框值的占位符
selecttarget: selector, 下一级下拉框的选择器语法
defaultoption: none, 声明默认 option 选项, 更新option时, 有该属性的项不会被清除
数据格式: [ [id, name], [id, name] ... ]
如果获取到的数据格式不是默认格式,
可以通过 AutoSelect.dataFilter 属性自定义函数, 进行数据过滤
Parameters:
-
_selector
Selector要初始化的级联下拉框父级节点
Example:
<h2>AJAX 返回内容</h2>
<code>
<dd>
<select name='select102_1' defaultselect selecturl="data/shengshi_with_error_code.php?id=0" selecttarget="select[name=select102_2]">
<option value="-1" defaultoption>请选择</option>
</select>
<select name='select102_2' selecturl="data/shengshi_with_error_code.php?id={0}" selecttarget="select[name=select102_3]">
<option value="-1" defaultoption>请选择</option>
</select>
<select name='select102_3' selecturl="data/shengshi_with_error_code.php?id={0}">
<option value="-1" defaultoption>请选择</option>
</select>
</dd>
</code>
<script>
$.get( './data/shengshi_html.php?rnd='+new Date().getTime(), function( _r ){
var _selector = $(_r);
$( 'dl.def > dt' ).after( _selector );
UXC.Form.initAutoSelect( _selector );
});
UXC.Form.initAutoSelect.dataFilter =
function( _data, _select ){
var _r = _data;
if( _data && !_data.length && _data.data ){
_r = _data.data;
}
return _r;
};
</script>
initAutoSelect.getInstance
-
_selector
-
_ins
获取或设置 selector 的实例引用
Parameters:
-
_selector
Selector -
_ins
AutoSelectControlerInstance
Returns:
initAutoSelect.isSelect
-
_selector
判断 selector 是否为符合自动初始化联动框的要求
Parameters:
-
_selector
Selector
Returns:
initCheckAll
-
_selector
初始化 checkbox 全选反选功能
只要引用本脚本, 页面加载完毕时就会自动初始化全选反选功能
动态添加的 DOM 需要显式调用 UXC.Form.initCheckAll( domSelector ) 进行初始化
要使页面上的全选反选功能能够自动初始化, 需要在全选反选按钮上加入一些HTML 属性
checktype: all | inverse, all=全选/全不选, inverse=反选
checkfor: selector, 要全选/反选的 checkbox 选择器语法
checkall: selector, 全选按钮的选择器, 这个只有反选按钮需要, 反选时变更全选按钮的状态
Parameters:
-
_selector
Selector要初始化的全选反选的父级节点
Example:
<h2>AJAX data:</h2>
<dl class="def example24">
<dt>checkall example 24</dt>
<dd>
<input type="checkbox" id="checkall24" checktype="all" checkfor="dl.example24 input[type=checkbox]"><label for="checkall24">全选</label>
<input type="checkbox" id="checkall24_inverse" checktype="inverse" checkfor="dl.example24 input[type=checkbox]" checkall="dl.example24 input[checktype=all]"><label for="checkall24_inverse">反选</label>
</dd>
<dd>
<input type="checkbox" id="checkall24_1" value="" name="" checked />
<label for="checkall24_1">checkall24_1</label>
<input type="checkbox" id="checkall24_2" value="" name="" checked />
<label for="checkall24_2">checkall24_2</label>
<input type="checkbox" id="checkall24_3" value="" name="" checked />
<label for="checkall24_3">checkall24_3</label>
<input type="checkbox" id="checkall24_4" value="" name="" checked />
<label for="checkall24_4">checkall24_4</label>
<input type="checkbox" id="checkall24_5" value="" name="" checked />
<label for="checkall24_5">checkall24_5</label>
</dd>
</dl>
<script>
$(document).delegate( 'button.js_ajaxTest', 'click', function(){
var _p = $(this);
_p.prop('disabled', true);
setTimeout( function(){ _p.prop('disabled', false); }, 1000 );
$.get( './data/initCheckAll.php?rnd='+new Date().getTime(), function( _r ){
var _selector = $(_r);
$( $( 'body' ).children().first() ).before( _selector );
UXC.Form.initCheckAll( _selector );
});
});
</script>
initNumericStepper
-
_selector
文本框 值增减 应用
只要引用本脚本, 页面加载完毕时就会自动初始化 NumericStepper
所有带 class jsNStepperPlus, jsNStepperMinus 视为值加减按钮
目标文本框可以添加一些HTML属性自己的规则,
nsminvalue=最小值(默认=0), nsmaxvalue=最大值(默认=100), nsstep=步长(默认=1), nsfixed=小数点位数(默认=0)
nschangecallback=值变改后的回调
Parameters:
-
_selector
Selector要初始化的全选反选的父级节点
Example:
<dl class="def example1">
<dt>UXC.Form.initNumericStepper 默认值 0 - 100, step 1, fixed 0</dt>
<dd>
<button class="NS_icon NS_minus js_NStepperMinus" nstarget="input.js_ipt1" ></button>
<input type="text" value="0" class="js_ipt1" />
<button class="NS_icon NS_plus js_NStepperPlus" nstarget="input.js_ipt1" ></button>
</dd>
</dl>
<dl class="def example1">
<dt>UXC.Form.initNumericStepper -10 ~ 10, step 2, fixed 2</dt>
<dd>
<button class="NS_icon NS_minus js_NStepperMinus" nstarget="input.js_ipt2" ></button>
<input type="text" value="4" class="js_ipt2" nsminvalue="-10" nsmaxvalue="10" nsstep="2" nsfixed="2" />
<button class="NS_icon NS_plus js_NStepperPlus" nstarget="input.js_ipt2" ></button>
</dd>
</dl>
Properties
initAutoSelect.allChanged
Function
static
下拉框所有项数据变更后的回调
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectallchanged
Default: null
initAutoSelect.beforeInited
Function
static
下拉框初始化功能都是未初始化 数据之前的回调
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectbeforeInited
Default: null
initAutoSelect.change
Function
static
下拉框每个项数据变更后的回调
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectchange
Default: null
initAutoSelect.dataFilter
Function
static
级联下拉框的数据过滤函数
默认数据格式: [ [id, name], [id, name] ... ]
如果获取到的数据格式非默认格式, 可通过本函数进行数据过滤
注意, 这个是全局过滤, 如果要使用该函数进行数据过滤, 判断逻辑需要比较具体
如果要对具体 select 进行数据过滤, 可以使用HTML属性 selectdatafilter 指定过滤函数
Default: null
Example:
AutoSelect.dataFilter =
function( _data, _select ){
var _r = _data;
if( _data && !_data.length && _data.data ){
_r = _data.data;
}
return _r;
};
initAutoSelect.hideEmpty
Bool
static
是否自动隐藏空值的级联下拉框, 起始下拉框不会被隐藏
这个是全局设置, 如果需要对具体某个select进行处理, 对应的 HTML 属性 selecthideempty
Default: false
Example:
AutoSelect.hideEmpty = true;
initAutoSelect.inited
Function
static
下拉框第一次初始完所有数据的回调
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectinited
Default: null
initAutoSelect.processUrl
Function
static
处理 ajax url 的回调处理函数
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectprocessurl
Default: null
initAutoSelect.randomurl
Bool
static
ajax 请求数据时, 是否添加随机参数防止缓存
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectrandomurl
Default: true
initAutoSelect.triggerInitChange
Bool
static
第一次初始化所有联动框时, 是否触发 change 事件
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selecttriggerinitchange
Default: false
initNumericStepper.onchange
Function
static
文本框 值增减 值变改后的回调
这个是定义全局的回调函数, 要定义局部回调请在目标文本框上添加 nschangecallback=回调 HTML属性