为什么要自定义控件？html的select 不是可以用么？以前我就是这么想的，当我接到特殊需求时，需要我自己写一个下拉控件。
这个需求就是将图表横向放大，由于H5不能控制设备转向，所以我将图表通过css控制顺时针旋转90度。这时设备还是竖屏的，所以即使你将select空间旋转90度，当你点击下拉选项时，会发现选项是竖屏展示的。（不管是Android还是ios 均对h5的select 进行优化，即不在是网页那种显示方式，而是下方出现选项的弹框）这样就不合适了。需要你去写个select 组件了。
由于我使用的是Angularjs ，所以组件需要使用指定（directive） 来完成，
angular.module('app')
.directive('dropDown', [function () {
return {
restrict : 'EA',
replace : true,
transclude : true,
scope : {
selecttitle : '=', //// 默认选中值
lidata:'=lidata', //// 数据集如['张三','李四','王五']
clickChange:'&', //// 选项变化时事件
disabled:'@' //// 是否显示，支持表达式
},
template:'<div class="ddl" ng-show="disabled">'
+'<div class="ddlTitle" ng-click="toggle()"><span ng-bind="selecttitle"></span><i class="fa fa-angle-down ddli"></i></div>'
+'<ul ng-show="showMe">'
+' <li ng-repeat="data in lidata" ng-click="clickLi(\'{{data}}\')">{{data}}</li>'
+'</ul>'
+'</div>',
link: function ($scope, $element, $attrs) {
$scope.showMe = false;
$scope.disabled = true;
$scope.toggle = function toggle() {
$scope.showMe = !$scope.showMe;
};
$scope.clickLi=function clickLi(data_){
$scope.selecttitle=data_;
$scope.showMe = !$scope.showMe;
};
$scope.$watch('selecttitle', function(value) {
$scope.clickChange();
});
/*$scope.$watch( function() {
return $scope.$eval($attrs.setNgAnimate, $scope);
}, function(valnew, valold){
$animate.enabled(!!valnew, $element);
});*/
}
};
}]);
Angularjs 控制器代码
app.controller('***Ctl',[function(){
$scope.currentEnttiy={};
$scope.currentMetric="";
$scope.initPage = function() {
......
$scope.changeSelect();
}
//// 下拉选项变化时触发
$scope.changeSelect=function(){
......
}
$scope.initPage();
}];
Html代码
<html>
<head>
<title>hello jackical</title>
</head>
<body> <drop-down selecttitle="currentMetric" lidata="currentEnttiy.metricNameList" click-Change="changeSelect()"></drop-down> </body>
</html>
css 样式
.ddl{
position: relative;
padding:2px;
cursor: pointer;
background-color: #FAFAFA;
width:254px;
float: left;
}
.ddlTitle{
height: 40px;
line-height: 35px;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
border: solid #cccccc 1px;
font-size: 13px;
}
.ddlTitle span{
margin-right: 10px;
color: #58D0E1;
padding-left: 5px;
}
.ddl ul li{
list-style:none;
border-top: dotted #cccccc 1px;
line-height: 40px;
padding-left: 5px;
}
.ddl ul{
position:absolute;
top:40px;
width:250px;
left:2px;
border: solid #cccccc 1px;
z-index:;
background-color: white;
padding:2px;
}
.ddli{
font-size: 20px;
float: right;
margin-top: 5px;
}
以上为实现代码片段。
附效果图：
转载请注明出处：http://www.cnblogs.com/jackicalSong/
OK ，代码己贴完。