拓扑图jquery插件
IE9
ie8src/index-ie8.js
yarn add topology-jquery
// or
npm install topology-jquery --save
// css
<script src="/path/to/topology-jquery/dist/topology.css"></script>
// js
<script src="/path/to/topology-jquery/dist/topology.js"></script>
//
$('#topology').topology({
data: [...],
setType: (item) => item.type,
setClassName: item => 'customClassName',
showCloseBtn: item => item.label === '',
onClose: (item, data, elem) => {
console.info(item);
console.info(data);
console.info(elem);
}
});
git clone []
yarn
npm start
$('#topology').topology({
data: [
{
label: '',
children: [
{
label: ''
}
]
}
],
setType: (item) => item.type,
setClassName: item => 'customClassName',
showCloseBtn: item => item.label === '',
closeTitle: '',
onClose: (item, data, e) => {
console.info(item);
console.info(data);
console.info(e);
},
onClick: (item, data, e) => {
console.info(item);
console.info(data);
console.info(e);
},
onAdd: (item, callback, e) => {
console.info('', item);
// callback
callback([
{
label: '1'
},
{
label: '2'
}
])
}
});
$('#topology-custom').topology({
data: [
{
label: '',
children: [
{
label: '',
children: [
{
label: '',
children: [
{
label: '1'
},
{
label: '',
type: 'success'
},
{
label: '3',
children: [
{
label: ''
}
]
},
{
label: '3',
children: [
{
label: ''
}
]
},
{
label: '3'
},
{
label: '3',
children: [
{
label: ''
}
]
}
]
}
]
},
{
label: '2',
children: [
{
label: '',
type: 'error'
}
]
},
{
label: '1',
children: [
{
label: ''
},
{
label: '1'
},
{
label: '1'
},
{
label: '2'
}
]
},
{
label: '2'
}
]
}
],
renderLabel: item => `${item.label}`
});
name | type | default | description |
---|---|---|---|
data | array | [] | labelvaluechildren |
onClick | function | - | |
cursor | one of: default``pointer
|
'default' | |
renderLabel | function | - | item |
setType | function | - | errorsuccess |
setClassName | function | - | item |
showCloseBtn | function or boolean | false | boolfunc |
onClose | function | - | |
closeTitle | string | '' | |
collapsedTitle | string | '' | |
expandedTitle | string or function | item => item.children && item.children.length > 0 ? '' : '' |
/functionitem |
.ui-topology .item:first-child:before{
background: #ff6600!important; //
}
.ui-topology .item:last-child:after{
background: #ff6600!important; //
}