<div id="columnbreak" class="page out" data-title="分栏插件">
	<div id="columnbreak-header"></div>
	<div id="columnbreak-a"></div>  
	<div id="columnbreak-b"></div>  
	<div id="columnbreak-c"></div>  
	<div id="columnbreak-d"></div>
	<div id="columnbreak-e"></div>
</div>
<script>
require(["NavHeader", "ColumnBreak"], function(NavHeader, ColumnBreak) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if(!hasClsPicker) {
		new NavHeader({
			el: "columnbreak-header",
			option: {
				title:"分栏插件", 
				smallTitle:"columnbreak"
			}
		}).render();
	}	
	new ColumnBreak({
		el: "columnbreak-a",
		option: {
			content : "我是居左样式分栏",
			align   : "left",
			btn: {
				enabled: true,
				text: "更多",
				click: function(){
					console.log("1");
				}
			}
		}
	}).render().then(function() {
		if(!hasClsPicker) return;

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

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

		new clsPicker({
			selector: ".wev-comp-ColumnBreak",
			text: ".wev-comp-ColumnBreak",
			lineYSkew: 50,
			skew: [8, ""],
			position: "top right"
		});
		new clsPicker({
			selector: ".css-left",
			text: ".css-left",
			lineYSkew: 20,
			position: "top right"
		});
	});

	if (!hasClsPicker) {
		new ColumnBreak({
			el: "columnbreak-b",
			option: {
				content : "我是居中样式分栏",
				align   : "center"
			}
		}).render();
		
		new ColumnBreak({
			el: "columnbreak-c",
			option: {
				content  : "我是字号加大样式",
				fontSize : 20
			}
		}).render();
		
		new ColumnBreak({
			el: "columnbreak-d",
			option: {
				content    : "我是加粗样式",
				fontweight : "bold"
			}
		}).render();
		
		new ColumnBreak({
			el: "columnbreak-e",
			option: {
				content : "我是字体颜色样式",
				color : "#cc00ff"
			}
		}).render();
	}
});
</script>