theluyuan/xm-select
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v1.0.0.0727

Browse Source 
1. 新增单选模式, {radio: true|false}
2. 新增重复选模式, {repeat: true|false}
3. 新增配置, 可以控制是否自动关闭下拉框, {clickClose: true|false}
4. 新增on方法, 可以监听已选择数据, data: {arr, item, selected}
This commit is contained in:
maplemei
2019-07-27 16:26:05 +08:00
parent ba563c67c4
commit d54aa08565
22 changed files with 1706 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
index.html
View File

@@ -1,348 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xm-select</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
body{padding-bottom: 300px;}
</style>
</head>
<link rel="stylesheet" type="text/css" href="docs/highlighter/shCore.css"/>
<link rel="stylesheet" type="text/css" href="docs/highlighter/shThemeEclipse.css"/>
<link rel="stylesheet" type="text/css" href="docs/fathom/fathom.sample.css"/>
<link rel="stylesheet" type="text/css" href="docs/index.css"/>
</head>
<body>
<div id="content"></div>
<div id="header"></div>
<h1>
源码地址
<a href="https://gitee.com/maplemei/xm-select">https://gitee.com/maplemei/xm-select</a>
</h1>
<h3>这是一个多选</h3>
<div id="demo1"></div>
<h3>这是一个国际版多选</h3>
<div id="demo2"></div>
<h3>有基础数据</h3>
<div id="demo3"></div>
<h3>有选中, 禁用的</h3>
<div id="demo4"></div>
<h3>自定义key</h3>
<div id="demo5"></div>
<h3>使用template自己构建选项1</h3>
<div id="demo6"></div>
<h3>使用template自己构建选项2</h3>
<div id="demo7"></div>
<h3>简单的展示形式1</h3>
<div id="demo8"></div>
<h3>简单的展示形式2</h3>
<div id="demo9"></div>
<h3>自定义展示</h3>
<div id="demo10"></div>
<h3>多余的用 +隐藏</h3>
<div id="demo11"></div>
<h3>不显示删除图标</h3>
<div id="demo12"></div>
<h3>换一个主题</h3>
<div id="demo13"></div>
<h3>开启搜索模式</h3>
<div id="demo14"></div>
<script src="docs/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="docs/highlighter/shCore.js" type="text/javascript" charset="utf-8"></script>
<script src="docs/highlighter/shBrushJScript.js" type="text/javascript" charset="utf-8"></script>
<script src="docs/highlighter/shBrushXml.js" type="text/javascript" charset="utf-8"></script>
<script src="docs/fathom/fathom.min.js" type="text/javascript" charset="utf-8"></script>
<h3>自定义搜索方法</h3>
<div id="demo15"></div>
<h3>自定义搜索延迟 和 提示</h3>
<div id="demo16"></div>
<h3>1000条数据测试</h3>
<div id="demo17"></div>
<h3>自动判断下拉方向</h3>
<div id="demo18"></div>
<h3>只会往下</h3>
<div id="demo19"></div>
<h3>只会往上</h3>
<div id="demo20"></div>
<h3>自定义style样式</h3>
<div id="demo21"></div>
<script src="./dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var demo1 = xmSelect.render({
el: '#demo1',
language: 'zn',
isShow: true,
})
var demo2 = xmSelect.render({
el: '#demo2',
language: 'en'
})
var demo3 = xmSelect.render({
el: '#demo3',
data: [
{name: '水果', value: 1},
{name: '蔬菜', value: 2},
{name: '桌子', value: 3},
]
})
var demo4 = xmSelect.render({
el: '#demo4',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
]
})
var demo5 = xmSelect.render({
el: '#demo5',
data: [
{label: '水果', val: 1, sel: true, dis: true},
{label: '蔬菜', val: 2, sel: true},
{label: '桌子', val: 3, dis: true},
{label: '北京', val: 4},
],
prop: {
name: 'label',
value: 'val',
selected: 'sel',
disabled: 'dis'
}
})
var demo6 = xmSelect.render({
el: '#demo6',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
template: function(item, sels, name, value){
return name + '<span style="color: red; margin-left: 20px;">'+value+'</span>'
}
})
var demo7 = xmSelect.render({
el: '#demo7',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
template: function(item, sels, name, value){
return name + '<span style="position: absolute; right: 10px; color: red">'+value+'</span>'
}
})
var demo8 = xmSelect.render({
el: '#demo8',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
model: {
label: {
type: 'text',
text: {
left: '<',
right: '>',
separator: ', ',
},
}
}
})
var demo9 = xmSelect.render({
el: '#demo9',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
model: {
label: {
type: 'count',
count: {
template: function(data, sels){
return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
}
}
}
}
})
var demo10 = xmSelect.render({
el: '#demo10',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
model: {
label: {
type: 'count',
count: {
template: function(data, sels){
return "我是自定义的... 已选中 " + sels.length + " 项, 共 " + data.length + " 项"
}
}
}
}
})
var demo11 = xmSelect.render({
el: '#demo11',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
model: {
label: {
type: 'block',
block: {
showCount: 1,
showIcon: true,
}
}
}
})
var demo12 = xmSelect.render({
el: '#demo12',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
model: {
label: {
type: 'block',
block: {
showCount: 1,
showIcon: false,
}
}
}
})
var demo13 = xmSelect.render({
el: '#demo13',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
theme: {
color: 'red',
},
})
var demo14 = xmSelect.render({
el: '#demo14',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
})
var demo15 = xmSelect.render({
el: '#demo15',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
filterMethod: function(val, item, index, prop){
if(!val) return true;
return item[prop.name].indexOf(val) != -1;
},
})
var demo16 = xmSelect.render({
el: '#demo16',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
delay: 2000,
searchTips: '搜索呀 搜索呀...',
})
var startTime = Date.now();
var demo17 = xmSelect.render({
el: '#demo17',
data: ''.padEnd(1000, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
filterable: true, //开启搜索
})
console.log('1000条数据渲染耗时: ' + (Date.now() - startTime) + 'ms');
var demo18 = xmSelect.render({
el: '#demo18',
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
filterable: true, //开启搜索
direction: 'auto',
})
var demo19 = xmSelect.render({
el: '#demo19',
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
filterable: true, //开启搜索
direction: 'down',
})
var demo20 = xmSelect.render({
el: '#demo20',
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
filterable: true, //开启搜索
direction: 'up',
})
var demo21 = xmSelect.render({
el: '#demo21',
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
filterable: true, //开启搜索
style: {
width: '200px',
marginLeft: '20px',
}
})
</script>
</body>
<script src="dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script src="docs/data.js" type="text/javascript" charset="utf-8"></script>
<script src="docs/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>