简单使用FilterMenu
Source
Output
QRCode
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>简单使用FilterMenu</title>
<link rel="stylesheet" type="text/css" href="assets/menu.css">
<link rel="stylesheet" type="text/css" href="assets/menuitem.css">
<link rel="stylesheet" type="text/css" href="assets/submenu.css">
<link rel="stylesheet" type="text/css" href="assets/filtermenu.css">
<style>
body{
background: #fff;
}
.hasChildren .ks-menuitem-content {
background: url("http://a.tbcdn.cn/apps/sell/1.0/img/ic_bg.png") no-repeat scroll 500px 500px transparent;
background-position: 100% -78px;
}
.ks-menuitem-selected {
background-color: #D6EDF4;
color: #1B4D91;
}
.ks-menuitem-hit {
font-weight: bold;
color: red;
}
.ks-menuitem {
padding-right: 10px;
}
</style>
<script type="text/javascript" src="//g.alicdn.com/kissy/k/5.0.1/seed.js"></script>
</head>
<body>
<div class="wrap" style="width:90%;margin:0 auto;">
<h1>简单使用FilterMenu</h1>
<h3>操作指南</h3>
<ol>
<li>可在输入框输入中文过滤</li>
<li>上下键过滤项间导航</li>
<li>输入字后，再输入 ，或, 根据当前高亮项进行自动补全</li>
<li>点击item可触发click事件</li>
</ol>
<h3>从已知元素生成，html结构需要符合规范结构</h3>
<div id="filterMenuExist"
class="ks-filter-menu ks-menu" style="width: 500px">
<div class='ks-filter-menu-input-wrap'>
<div class="ks-filter-menu-placeholder">请输入</div>
<input autocomplete="off" class="ks-filter-menu-input"/>
</div>
<div class="ks-filter-menu-content" style="height: 200px;overflow: auto;">
<div class="ks-menuitem-selectable ks-menuitem">女鞋1</div>
<div class="ks-menuitem-selectable ks-menuitem">家居服务2</div>
<div class="ks-menuitem-selectable ks-menuitem">手机3</div>
<div class="ks-menuitem-selectable ks-menuitem">女鞋4</div>
<div class="ks-menuitem-selectable ks-menuitem">家居服务5</div>
<div class="ks-menuitem-selectable ks-menuitem">手机6</div>
<div class="ks-menuitem-selectable ks-menuitem">女鞋7</div>
<div class="ks-menuitem-selectable ks-menuitem">家居服务8</div>
<div class="ks-menuitem-selectable ks-menuitem">手机9</div>
<div class="ks-menuitem-selectable ks-menuitem">女鞋10</div>
<div class="ks-menuitem-selectable ks-menuitem">家居服务11</div>
<div class="ks-menuitem-selectable ks-menuitem">手机12</div>
</div>
</div>
</div>
<script type="text/javascript">
require(['filter-menu'], function(FilterMenu){
/**
* 从 html 生成
*/
var filterMenu = new FilterMenu({
srcNode: '#filterMenuExist',
width: 200,
allowMultiple : true
});
filterMenu.render();
var selected = null;
filterMenu.on("click", function (e) {
if (selected != e.target) {
selected && selected.set("selected", false);
selected = e.target;
alert("selected : " + selected.get("content"));
}
});
})
</script>
</body>
</html>