从微信公众平台扒下来的dropdown组件

微信公众平台使用了seajs开源框架,发现几乎都实现了组件化,比如:下拉菜单、富文本编辑器(虽然也是用的ueditor但是看起来更简单美观)、弹出层、图片上传等等。先实现了一个简单的下拉菜单,以后有时间试着把其他组件也扒下来。。。主要是所有js都压缩处理了,所以扒下来的js变量名都是各种abc,读起来非常蛋疼。

如果需要的话,我再把所有代码分享到云盘。。。


目录结构

从微信公众平台扒下来的dropdown组件_第1张图片

展示效果

从微信公众平台扒下来的dropdown组件_第2张图片

index.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

		<link rel="stylesheet" href="css/base.css" />
		
		<link rel="stylesheet" href="css/dropdown.css" />

		<script type="text/javascript" src="js/sea.js"></script>

		<script type="text/javascript" src="js/common/jquery-1.10.2.min.js"></script>
		
		<script type="text/javascript" src="js/common/template-2.0.1.js"></script>

		<script type="text/javascript">
			seajs.use("main");
		</script>
	</head>

	<body>
		<div id="js_sex" class="dropdown_menu">
		</div>
		<button id="okbtn">确定</button>
	</body>

</html>

main.js

define("main.js", ["dropdown/dropdown.js"], function(require) {
	
	var a = require("dropdown/dropdown.js");
	
	var x = new a({
		container: "#js_sex",
		data: [{
			name: "全部",
			value: "0"
		}, {
			name: "男",
			value: "1"
		}, {
			name: "女",
			value: "2"
		}],
		callback: function() {}
	});
	x.selected(0);
	
	$("#okbtn").click(function(){
		alert(x.value);
		alert(x.name);
	});
});


你可能感兴趣的:(seajs)