注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

拥有自己的梦想,跟随心的召唤

平凡是福

 
 
 

日志

 
 

富文本输入框的使用  

2012-09-07 14:22:54|  分类: bc |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
(BC内部开发文档资料)
富文本输入框是在 jQueryUI  AutoComplete 组件基础上的封装,除拥有 AutoComplete 组件原有的所有功能外,附加封装了如下功能:
1)可以不用写js自动实现 AutoComplete 组件的初始化
2)可以简单的添加回调函数处理
3)支持Ajax动态模糊查询

页面相关的配置详细说明如下:
<input type="text" name="rt1" 
data-maxHeight="150px"
data-source="path/to/yourFindDataAction"
data-cfg='{
"delay":100, // 控制用户输入信息后延时多长时间才相应,单位为毫秒
"minLength":2, // 控制用户输入多少个字符后才产生响应
"labelMapping":"[{{status}}] {{name}}", // 显示值渲染模板
"valueMapping":"{{id}}", // 隐藏值渲染模板
"itemMapping":"TPL.BS.CAR_SELECT_ITEM", // 下拉项渲染模板
"callback":"yourNamespace.callbackFunctionName"
}'
/>
主要是配置data-source、data-cfg、data-maxheight三个属性,各自的说明如下:(实现代码在toolbar.js中$document.delegate(".bc-select:not(.ignore)","click", ...)
1)data-cfg
平台会使用$input.data("cfg")的方式获取data-cfg的配置,并做相应处理后直接作为 AutoComplete  组件的参数使用,如$input.autocomplete(option)”。其中有特殊处理时事件参数的定义,因为平台需要将字符串标识的函数名转换为真正定义的函数,包括的事件函数有change、focus和select,详细参考 AutoComplete 组件的开发文档。另外平台附加封装了一些特殊的参数方便程序的自动处理:
labelMapping - [可选] 控制用户从下拉列表中选择相应选项后,信息如何映射到文本输入框中显示
valueMapping [可选] 控制用户从下拉列表中选择相应选项后,信息如何映射到隐藏域中显示
itemMapping [可选] 控制下拉列表中各项的渲染模板,平台使用 Mustache.js 模板引擎对模执行渲染,可以直接配置模板的内容,也可以配置模板的键值,当使用键值时,其键必须以字符“TPL.”开头,营运子系统的常用模板配置在bs.js文件内,如:
TPL.BS.CAR_SELECT_ITEM='<a><table cellspacing="0" cellpadding="0" style="width:100%;border:0;"><tr><td style="text-align:left">{{plateType}}.{{plateNo}}</td><td style="text-align:right">[{{motorcadeName}} {{statusCN}}]</td></tr></table></a>';
注:模板中用到的key必须是data-source中相应元素的key或url请求返回数据中元素包含的key。
callback - [可选] 用户选中选项后的回调函数名称,函数的上下文参数与 AutoComplete 组件的 select 事件函数相同。

2)data-source
此配置也可以直接在data-cfg内配置,这里抽出来配置是为了简化和方便阅读,其配置的值与 AutoComplete 组件的规范保持一致,可以配置为静态的数组数据,也可以配置指定 url 动态获取数据。当配置为url时,每当用户输入信息,就会使用此url产生请求从服务器获取数据,用户输入的信息将使用参数 term 传递到服务器。
当使用静态数组数据时,最简单的数据格式参考如:data-source=‘[“java”,"c","c++"]'
较复杂一些的数据格式参考如:data-source=‘[{"id": 1, "type": “java”}, {"id": 2, "type": “c”} , {"id": 3, "type": “c++”} ]'

3)data-maxheight
这是平台额外附加的参数,用于控制下拉框的最大高度值,没有配置时,默认为自动高度。
  评论这张
 
阅读(941)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017