API Docs for: 0.1
Show:

UXC.Form Class

表单常用功能类 UXC.Form

requires: jQuery

UXC Project Site | API docs | demo link

Methods

disableButton

(
  • _selector
  • _durationMs
)
static

禁用按钮一定时间, 默认为1秒

Parameters:

  • _selector Selector

    要禁用button的选择器

  • _durationMs Int

    禁用多少时间, 单位毫秒, 默认1秒

initAutoFill

(
  • _selector
  • _url
)
static

表单自动填充 URL GET 参数
只要引用本脚本, DOM 加载完毕后, 页面上所有带 class js_autoFillUrlForm 的 form 都会自动初始化默认值

requires: jQuery

UXC Project Site | API docs

Parameters:

  • _selector Selector | Url string

    显示指定要初始化的区域, 默认为 document

  • _url String

    显示指定, 取初始化值的 URL, 默认为 location.href

Example:

 UXC.Form.initAutoFill( myCustomSelector, myUrl );

initAutoFill.selectHasVal

(
  • _select
  • _val
)
private static

判断下拉框的option里是否有给定的值

Parameters:

  • _select Selector
  • _val String

    要查找的值

initAutoSelect

(
  • _selector
)
static

初始化 级联下拉框
只要引用本脚本, 页面加载完毕时就会自动初始化级联下拉框功能

动态添加的 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
)
static

获取或设置 selector 的实例引用

Parameters:

  • _selector Selector
  • _ins AutoSelectControlerInstance

Returns:

AutoSelectControlerInstance

initAutoSelect.isSelect

(
  • _selector
)
static

判断 selector 是否为符合自动初始化联动框的要求

Parameters:

  • _selector Selector

Returns:

bool

initCheckAll

(
  • _selector
)
static

初始化 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
)
static

文本框 值增减 应用
只要引用本脚本, 页面加载完毕时就会自动初始化 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

initAutoFill.decodeFunc

Function static

自定义 URI decode 函数

Default: null

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属性