Skip to content

Added form field name and id attributes and improved README. #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alsoicode wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added form field name and id attributes and improved README. #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1420a56
Added ability to set form field name and id attributes.
iambrandontaylor May 9, 2013
eaaeb88
Remove un-necessary comments.
May 9, 2013
fb3967a
Fixed missing semi-colons and trailing whitespace.
iambrandontaylor May 9, 2013
45abe72
Prevented default actions for add / remove links
iambrandontaylor May 9, 2013
e0bc570
Renamed img folder to images.
iambrandontaylor May 10, 2013
99a7e33
Added images directory.
iambrandontaylor May 10, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 58 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,16 @@ Welcome to bootstrapTransfer. This is a two-column transfer multi-select widget.
inspired by Django admin module's similar widget. The look and feel is designed to blend with
twitter bootstrap (2.0+), jQuery 1.7+ is assumed.

Usage :
###Usage

First, in your html create a div and give it some id:
You will need to reference jQuery and Twitter Bootstrap's CSS and JavaScript files somewhere in your
templating *before* invoking bootstrapTransfer.

It is recommended that you load these resources from a CDN, such as <http://www.bootstrapcdn.com/>.
Using FontAwesome: <http://fortawesome.github.io/Font-Awesome/> as a replacement for Bootstrap's GIF-based
icons is also recommended.

In your html create a div and give it some id:

<div id="test"></div>

Expand All @@ -25,11 +32,11 @@ Now call bootstrapTransfer on the corresponding jquery object and add some value
...
var t = $('#test').bootstrapTransfer();
t.populate([
{value:"1", content:"Apple"},
{value:"2", content:"Orange"},
{value:"3", content:"Banana"},
{value:"4", content:"Peach"},
{value:"5", content:"Grapes"}
{value:'1', content:'Apple'},
{value:'2', content:'Orange'},
{value:'3', content:'Banana'},
{value:'4', content:'Peach'},
{value:'5', content:'Grapes'}
]);
...
});
Expand All @@ -40,26 +47,55 @@ You can get the selected values any time:

Setting new values is straightforward:

t.set_values(["2", "4"]);
t.set_values(['2', '4']);

Alternatively, you can access the plugin object directly from the selector:

$('#test').data().bootstrapTransfer.get_values()
$('#test').data().bootstrapTransfer.set_values(["2", "4"])

Note that the order of the items at population time is allways preserved in both get_values and set_values.

Options are:

target_id : the id of the internal select element, useful for wiring events and such
height : the height of the select columns, default value is '10em'
hilite_selection: if true will hilite the moved items between the columns, default value is true
$('#test').data().bootstrapTransfer.set_values(['2', '4'])

Note that the order of the items at population time is always preserved in both get_values and set_values.

###Options

<table>
<tr>
<th style="text-align:left; vertical-align:top;">target_id</th>
<td style="text-align:left;">The "id" attribute of the internal select element, useful for wiring events and such.</td>
</tr>
<tr>
<th style="text-align:left; vertical-align:top;">height</th>
<td style="text-align:left;">The height of the select columns, default value is '10em'.</td>
</tr>
<tr>
<th style="text-align:left; vertical-align:top;">hilite_selection</th>
<td style="text-align:left; vertical-align:top;">If true will hilite the moved items between the columns. Defaults to true.</td>
</tr>
<tr>
<th style="text-align:left; vertical-align:top;">remaining_select_id</th>
<td style="text-align:left; vertical-align:top;">The "id" attribute of the remaining choices select element (on left). Defaults to "remaining_select".</td>
</tr>
<tr>
<th style="text-align:left; vertical-align:top;">remaining_select_name</th>
<td style="text-align:left; vertical-align:top;">The "name" attribute of the remaining choices select element. Defaults to "remaining_select".</td>
</tr>
<tr>
<th style="text-align:left; vertical-align:top;">target_select_id</th>
<td style="text-align:left; vertical-align:top;">The "id" attribute of the target choices select element (on left). Defaults to "target_select".</td>
</tr>
<tr>
<th style="text-align:left; vertical-align:top;">target_select_name</th>
<td style="text-align:left; vertical-align:top;">The "name" attribute of the target choices select element. Defaults to "target_select".</td>
</tr>
</table>

Example:
###Example:

$('#test').bootstrapTransfer(
{'target_id': 'multi-select-input'
'height': '15em',
'hilite_selection': false});
{
'target_id': 'multi-select-input'
'height': '15em',
'hilite_selection': false
});

I hope you find this widget useful.
I hope you find this widget useful.
20 changes: 8 additions & 12 deletions css/bootstrap-transfer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.bootstrap-transfer-container {
/* min-width: 280px; */
}

.bootstrap-transfer-container select {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
Expand All @@ -22,11 +18,11 @@
}

.bootstrap-transfer-container .selector-available h2 {
background: white url("../img/bootstrap-transfer-nav-bg.gif") bottom left repeat-x;
background: white url(../images/bootstrap-transfer-nav-bg.gif) bottom left repeat-x;
}

.bootstrap-transfer-container .selector-chosen h2 {
background: white url("../img/bootstrap-transfer-default-bg.gif") bottom left repeat-x;
background: white url(../images/bootstrap-transfer-default-bg.gif) bottom left repeat-x;
color: white;
}

Expand All @@ -47,7 +43,7 @@
}

.bootstrap-transfer-container .selector-available input {
width: 100%;
width: 99%;
margin: -1px -8px -1px;
height: 10px;
}
Expand Down Expand Up @@ -83,11 +79,11 @@
}

.bootstrap-transfer-container a.selector-chooseall {
background: url("../img/bootstrap-transfer-selector-addall.gif") left center no-repeat;
background: url(../images/bootstrap-transfer-selector-addall.gif) left center no-repeat;
}

.bootstrap-transfer-container a.selector-clearall {
background: url("../img/bootstrap-transfer-selector-removeall.gif") left center no-repeat;
background: url(../images/bootstrap-transfer-selector-removeall.gif) left center no-repeat;
}

.bootstrap-transfer-container .selector-chooser {
Expand All @@ -98,12 +94,12 @@
}

.bootstrap-transfer-container .selector-add {
background: url(../img/bootstrap-transfer-selector-add.gif) top center no-repeat;
background: url(../images/bootstrap-transfer-selector-add.gif) top center no-repeat;
margin-bottom: 3px;
}

.bootstrap-transfer-container .selector-remove {
background: url(../img/bootstrap-transfer-selector-remove.gif) top center no-repeat;
background: url(../images/bootstrap-transfer-selector-remove.gif) top center no-repeat;
}

.bootstrap-transfer-container .selector-add, .selector-remove {
Expand All @@ -121,7 +117,7 @@
display: inline-block;
width: 16px;
height: 16px;
background: url(../img/bootstrap-transfer-selector-add.gif) top center no-repeat;
background: url(../images/bootstrap-transfer-selector-add.gif) top center no-repeat;
}


Expand Down
Loading