Introduction
A jQuery plugin that is a shuttle box.
Preview
options
| option | description | type | default |
|---|---|---|---|
| itemName | The name of each item in the data | string | item |
| groupItemName | The name of each group in the data | string | groupItem |
| groupArrayName | The name of the data array for each group | string | groupArray |
| valueName | The value name of each item in the data | string | value |
| tabNameText | The left tab text | string | items |
| rightTabNameText | The right tab text | string | selected items |
| searchPlaceholderText | The searcher's placeholder text | string | search |
| dataArray | items data array | array | |
| groupDataArray | grouping item data array | array |
Usage
grouping
var groupDataArray = [
{
groupItem: "China",
groupArray: [
{
item: "Beijing",
value: 1
},
{
item: "Shanghai",
value: 2
}
]
},
{
groupItem: "Japan",
groupArray: [
{
item: "Tokyo",
value: 6
}
]
}
];
var settings = {
groupDataArray: groupDataArray,
callable: function (items) {
// your code
}
};
var transfer = $(".transfer").transfer(settings);
// get selected items
transfer.getSelectedItems();no grouping
var dataArray = [
{
item: "Beijing",
value: 1
},
{
item: "Shanghai",
value: 2
},
{
item: "Tokyo",
value: 6
}
];
var settings = {
dataArray: dataArray,
callable: function (items) {
// your code
}
};
var transfer = $(".transfer").transfer(settings);
// get selected items
transfer.getSelectedItems();selected data
var dataArray = [
{
item: "Beijing",
value: 1,
selected: true
},
{
item: "Shanghai",
value: 2
},
{
item: "Tokyo",
value: 6
}
];disabled data
var dataArray = [
{
item: "Beijing",
value: 1,
disabled: true
},
{
item: "Shanghai",
value: 2
},
{
item: "Tokyo",
value: 6
}
];