<div id="navheader" class="page out" data-title="导航头插件">
	<div class="page-header" id="navheader_header"></div>
	<div class="page-content" id="navheader_content">
		<div id="navheader-header"></div>
		<div id="navheader-a"></div>
		<div id="navheader-nav"></div>
		<div id="navheader-b"></div>
		<div id="navheader-nav2"></div>
	</div>
	<div class="page-footer" id="navheader_footer"></div>
</div>
<script>
require(["NavHeader", "ColumnBreak"], function(NavHeader, ColumnBreak) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if(!hasClsPicker) {
		new NavHeader({
			el: "navheader-header",
			container : "#navheader",
			option: {
				isFixedTop : true, //固定到顶部
				title : "导航头插件", 
				smallTitle : "navheader"
			}
		}).render();

		new ColumnBreak({
			el: "navheader-a",
			option: {
				content	: "自定义头部点击事件,带按钮"
			}
		}).render();
	}

	new NavHeader({
		el: "navheader-nav",
		option: {
			title : "导航头控件", 
			smallTitle : "导航头控件demo", 
			btns : [
				{
					text : "编辑",
					click : function(){
						alert("点击编辑按钮");
					}
				},
				{
					icon : "/mobilemode/piclibrary/tbar/t28b2.png",
					click : function(){
						alert("点击图标按钮");
					}
				}
			],
			click : function(){
				alert("点击头部");
			}
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#navheader-nav");

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

		new clsPicker({
			selector: ".wev-comp-NavHeader",
			text: ".wev-comp-NavHeader",
			lineYSkew: 20,
			skew: [4, ""]
		});
		new clsPicker({
			selector: ".wev-navheader-small-title",
			text: ".wev-navheader-small-title",
			lineYSkew: 50,
			skew: [10, ""]
		});

		new clsPicker({
			selector: ".wev-navheader-title",
			text: ".wev-navheader-title",
			lineYSkew: 20,
			skew: [10, ""],
			position: "top right"
		});
		new clsPicker({
			selector: ".btn",
			text: ".btn",
			lineYSkew: 50,
			position: "top left"
		});
		new clsPicker({
			selector: "img.btn",
			text: ".btn",
			lineYSkew: 80,
			position: "top left"
		});
	});
	
	if(!hasClsPicker) {
		new ColumnBreak({
			el: "navheader-b",
			option: {
				content : "默认头部点击事件,不带按钮"
			}
		}).render();
		
		new NavHeader({
			el: "navheader-nav2",
			option: {
				title : "导航头控件"
			}
		}).render();
	}
});
</script>