optionList带操作选项的列表组件

实现列表项可向左滑动后右侧显示隐藏内容，点击可进行自定义操作（此组件依赖最新的appcan.js及引擎支持）

依赖

• appcan.js
• appcan.control.js
• appcan.optionList.js
• appcan.control.css

UI展示

JS对象

函数

appcan.optionList({参数})

1. selector:   /*选择器*/,
2. type:   hiddenLine /*隐藏类型*/,
3. multiShow :   false,/*滑动是否可显示多行隐藏的内容*/
4. duration :   300ms /*滑动显示隐藏动画时间*/,

方法

set(data)

1. data:JSON:   对象数组，用于存储列表条目显示的文字图片等信息。
2. data.content:   /*列表内容*/
3. data.height:   /*列表高度，默认为内容区域撑开高度*/
4. data.onLongTap:  /*列表长按事件回调函数*/
5. data.hideOption.content:   string/数组 /*隐藏区域内容*/
6. data.hideOption.style.fontSize:   /*隐藏区域字体大小*/
7. data.hideOption.style.background:   /*隐藏区域背景颜色*/
8. data.hideOption.onClick(e,index,length):  /*点击隐藏区域的回调函数*/   ;
9. e:供操作的event,
10. index:列表序列索引，
11. length:列表长度

add(data,dir)

1. data: JSON 对象数组，用于存储列表条目显示的文字图片等信息。
2. dir: 0 or 1   用于设定数据是在列表前部添加还是后不。0为前部添加。默认为1
3. on(e,index,length)
4. e:供操作的event,
5. index:列表序列索引，
6. length:列表长度

例如

HTML5代码

1. <div id="listview" >
2. </div>

JS代码demo下载

1. appcan.ready(function() {
2. var updateData = [{
3. content : "这是一个带操作选项的optionList的demo",
4. height:"5em",
5. hideOption : {
6. content : ["操作1","操作2"],
7. style :{
8. fontSize : "2em",
9. background : "red"
10. },
11. onClick:function(e,index,length){
12. console.log(e);
13. console.log(e.currentTarget);
14. console.log(e.target);
15. console.log(index);
16. console.log(length);
17. }
18. },
19. onLongTap:function(e,index){
20. console.log(e);
21. console.log(index);
22. }
23. }, {
24. content : '
25. 这是一个带操作选项的optionList的demo

27. ',
28. height:"3em",
29. hideOption : {
30. content : "
31. 11111111

33. 222222

35. ",
36. style :{
37. fontSize : "1.5em",
38. background : "red"
39. },
40. onClick:function(e,index,length){
41. alert(2);
42. }
43. }
44. }];
45. var lv1 = appcan.optionList({
46. selector : "#listview",
47. type : "hiddenLine",
48. id : 1,
49. duration :"300ms",
50. multiShow : false
51. });
52. lv1.set(updateData);
53. lv1.on("click",function(e){
54. alert(e);
55. })
56. })