demo.html 3.02 KB
<div id="horilistnav" class="page out" data-title="横向列表插件">
	<div id="horilistnav-header"></div>
	<div id="horilist-a-break"></div>
	<div id="horilist-a"></div>
	<div id="horilist-b-break"></div>
	<div id="horilist-b"></div>
</div>
<script>
require(["NavHeader", "ColumnBreak", "HoriList"], function(NavHeader, ColumnBreak, HoriList) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if (!hasClsPicker) {
		new NavHeader({
			el: "horilistnav-header",
			option: {
				title:"横向列表插件", 
				smallTitle:"horilist"
			}
		}).render();
		
		new ColumnBreak({
			el: "horilist-a-break",
			option: {
				content:"数据来源-查询列表", 
				align:"center"
			}
		}).render();

		new HoriList({
			el: "horilist-a",
			option: {
				sourceid : -999,//表单建模查询id
				pageSize : 10,
				contentSource: 2,
				normalview : {
					imgfield : {fieldid : 6544, fielddesc : "图片上传"},
					titlefield : {fieldid : 6528, fielddesc : "单行文本框"},
					otherfields : [
						[{fieldid : 6534, fielddesc : "人力资源浏览框"}],
						[{fieldid : -1, fielddesc : "{rlzyllk}"}],
						[{fieldid : 6542, fielddesc : "check框"}]
					]
				},
				options: {
					readonly : false //是否只读
				},
				callback: {
					click : function(data){
						console.log(data);
						$u("/mobilemode/mobile/demo/plugin/HoriList/detail.html?billid="+data.id, true);
					}
				}
			}
		}).render();
		
		new ColumnBreak({
			el: "horilist-b-break",
			option: {
				content:"数据来源-URL", 
				align:"center"
			}
		}).render();
	}

	new HoriList({
		el: "horilist-b",
		option: {
			sourceurl : "/mobilemode/mobile/demo/plugin/HoriList/data.jsp",
			pageSize : 5,
			normalview : {
				imgfield : "<img src='{avatar}'/>",
				titlefield : "{title}",
				otherfields : [
					"分类:{cat}",
					"日期:{date}"
				]
			},
			options: {
				readonly : false //是否只读
			},
			callback: {
				click : function(data){
					var title = encodeURIComponent(data.title);
					var cat = encodeURIComponent(data.cat);
					var content = encodeURIComponent(data.content);
					$u("/mobilemode/mobile/demo/plugin/HoriList/detail.html?billid="+data.id, true);
				}
			},
			dataload: function() {
				if (!hasClsPicker) return;

				_u.vetically("#horilist-b");

				clsPicker.golalSetting({
					container: ".wev-comp-HoriList",
					type: "HoriList"
				});
				
				new clsPicker({
					selector: ".wev-table-view-cell",
					text: ".wev-table-view-cell",
					lineYSkew: 50,
					skew: [10, -4],
					position: "top right"
				});	
				new clsPicker({
					selector: "img",
					text: " ",
					lineYSkew: 0,
					skew: ["", -3],
					position: "top right"
				});	
				new clsPicker({
					selector: ".wev-nowrap:first-child",
					text: " ",
					lineYSkew: 20,
					skew: [20, -0.7],
					position: "top right"
				});	
				new clsPicker({
					selector: ".wev-nowrap:nth-child(2)",
					text: " ",
					lineYSkew: 20,
					skew: [1.6, -0.5],
					position: "top right"
				});	
			}
		},
	}).render();
});
</script>