<div id="segcontrol" class="page out" data-title="分段插件">
	<div id="segcontrol-header"></div>
	<div id="segcontrol-a"></div>
	<div id="segcontrol-urllist"></div>
</div>
<script>
require(["NavHeader", "SegControl", "UrlList"], function(NavHeader, SegControl, UrlList) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if(!hasClsPicker) {
		new NavHeader({
			el: "segcontrol-header",
			option: {
				title:"分段插件", 
				smallTitle:"segcontrol"
			}
		}).render();
	}

	new SegControl({
		el: "segcontrol-a",
		option: {
			segments : [
				{
					text : "综合新闻",
					active : true,
					click : function(){
						Mobile_NS.refreshList("segcontrol-urllist", "ctype=-1");
					}
				},
				{
					text : "签约新闻",
					remind : true,
					click : function(){
						Mobile_NS.refreshList("segcontrol-urllist", "ctype=0");
					}
				},
				{
					text : "人事新闻",
					click : function(){
						Mobile_NS.refreshList("segcontrol-urllist", "ctype=1");
					}
				},
				{
					text : "公司新闻",
					click : function(){
						Mobile_NS.refreshList("segcontrol-urllist", "ctype=2");
					}
				}
			],
			badge : [1]
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#segcontrol-a");

		clsPicker.golalSetting({
			container: ".wev-comp-SegControl",
			type: "SegControl"
		});

		new clsPicker({
			selector: ".wev-comp-SegControl",
			lineYSkew: 50,
			skew: [6, ""]
		});	
		new clsPicker({
			selector: ".wev-segmented-control",
			lineYSkew: 20,
			skew: [3, ""]
		});	

		new clsPicker({
			selector: ".wev-control-item.active",
			lineYSkew: 20,
			position: "top right"
		});	
	});

	if(!hasClsPicker) {
		new UrlList({
			el: "segcontrol-urllist",
			option: {
				url : "/mobilemode/mobile/demo/plugin/UrlList/data.jsp",
				pageSize : 5,
				normalview : {
					titlefield : "{title}",
					imgfield : "<img src='{avatar}' style='width:40px;height:40px;border-radius:40px;'/>",
					otherfields : [
						"内容:{content}",
						"分类:{cat}",
						"日期:{date}"
					]
				},
				hideSearch : false,//是否隐藏查询
				readonly : true, //是否只读
			}
		}).render();
	}
});
</script>