241 lines
5.4 KiB
HTML
241 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></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>
|
|
<body>
|
|
|
|
<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>
|
|
|
|
|
|
<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(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(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,
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
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',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|