📄 mui.combobox.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Mootools UI - combobox 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.combobox.js"></script>
<script type="text/javascript"><!-- <![CDATA[
/*var combo = new MUI.CompleteAbleInput(null, {animate:true, writeable:true});
combo.data.set("lang", "HTML");
combo.data.set("lang1", "JS");
combo.data.set("lang2", "CSS");*/
Window.addEvent("domready", function(){
//combo.injectInside(document.body);
$("cb1").makeAsCompleteAble();
});
// ]]> --></script>
<style type="text/css">/* <![CDATA[ */
div.mui-combobox{
width:200px;
height:1em;
cursor: default;
position:relative;
}
.mui-combobox-chosen-item{
display:block;
background-color: #EFEFEF;
width:99%;
height:1em;
border-bottom:1px solid #E0E0E0;
font-weight:bold;
padding:0.2em;
}
div.mui-combobox ul{
list-style:none;
display:block;
margin:0;
padding:0.2em;
position:absolute;
left:0;
width:100%;
background-color:#FFF;
border:1px solid #E0E0E0;
overflow:auto;
height:2em;
}
div.mui-combobox ul li{
display:block;
cursor: default;
width:98%;
padding:0.1em 1%;
border-bottom:1px solid #E0E0E0;
}
div.mui-combobox ul li:hover{
background-color: #EAEAEA;
}
.mui-combobox-resizer{
position:absolute;
display:none;
z-index:100;
text-align:right;
opacity:0.4;
border:1px solid black;
width:20px;
height:20px;
}
/* ]]> */</style>
</head>
<body>
<div class="mui-combobox" id="cb1">
<input type="text" class="mui-combobox-chosen-item" />
<ul>
<li realvalue="1">israel</li>
<li realvalue="2">usa</li>
<li realvalue="3">uk</li>
</ul>
<input type="hidden" name="num" value="1" />
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -