📄 mui.choosebox.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Mootools UI - choosebox demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../mootools.v1.1.js"></script>
<script type="text/javascript" src="../mui.text.js"></script>
<script type="text/javascript" src="../mui.choosebox.js"></script>
<script type="text/javascript"><!-- <![CDATA[
var box = new MUI.ChooseBox("countries", {many:true});
box.list = [
new MUI.Label().setText("israel"),
new MUI.Label().setText("usa"),
new MUI.Label().setText("uk")
];
box.addEvent("choose", function(item){
this.list[item].getParent().addClass("active");
});
box.addEvent("leave", function(item){
this.list[item].getParent().removeClass("active");
});
Window.addEvent("domready", function(){
box.render().injectInside(document.body);
});
// ]]> --></script>
<style type="text/css">/* <![CDATA[ */
body{background-color:white;}
body *{
padding:0;
margin:0;
}
.mui-choosebox{
width:200px;
background-color:#FFF;
text-align:center;
padding:1px;
}
.mui-choosebox div.mui-choosebox-title{
width:100%;
height:1.2em;
background-color:white;
}
.mui-choosebox ul{
list-style:none;
border:1px solid #CCC;
/*overflow:scroll;*/
height:4em;
}
.mui-choosebox ul li{
cursor:default;
width:100%;
}
.mui-choosebox li.active{
background-color:#0000BB;
color:white;
}
/* ]]> */</style>
</head>
<body>
<select multiple="multiple">
<option value="1">Israel</option>
<option value="2">UK</option>
<option value="2">UK</option>
<option value="2">UK</option>
<option value="2">UK</option>
<option value="2">UK</option>
<option value="3">USA</option>
</select>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -