/bower_components/bootstrap-tagsinput/examples/assets/app.css |
@@ -0,0 +1,67 @@ |
.icon-github { |
background: no-repeat url('../img/github-16px.png'); |
width: 16px; |
height: 16px; |
} |
|
.bootstrap-tagsinput { |
width: 100%; |
} |
|
.accordion { |
margin-bottom:-3px; |
} |
|
.accordion-group { |
border: none; |
} |
|
.twitter-typeahead .tt-query, |
.twitter-typeahead .tt-hint { |
margin-bottom: 0; |
} |
|
.twitter-typeahead .tt-hint |
{ |
display: none; |
} |
|
.tt-menu { |
position: absolute; |
top: 100%; |
left: 0; |
z-index: 1000; |
display: none; |
float: left; |
min-width: 160px; |
padding: 5px 0; |
margin: 2px 0 0; |
list-style: none; |
font-size: 14px; |
background-color: #ffffff; |
border: 1px solid #cccccc; |
border: 1px solid rgba(0, 0, 0, 0.15); |
border-radius: 4px; |
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); |
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); |
background-clip: padding-box; |
cursor: pointer; |
} |
|
.tt-suggestion { |
display: block; |
padding: 3px 20px; |
clear: both; |
font-weight: normal; |
line-height: 1.428571429; |
color: #333333; |
white-space: nowrap; |
} |
|
.tt-suggestion:hover, |
.tt-suggestion:focus { |
color: #ffffff; |
text-decoration: none; |
outline: 0; |
background-color: #428bca; |
} |
/bower_components/bootstrap-tagsinput/examples/assets/app_bs2.js |
@@ -0,0 +1,74 @@ |
$('.example_typeahead > > input').tagsinput({ |
typeahead: { |
source: function(query) { |
return $.getJSON('assets/citynames.json'); |
} |
} |
}); |
|
$('.example_objects_as_tags > > input').tagsinput({ |
itemValue: 'value', |
itemText: 'text', |
typeahead: { |
source: function(query) { |
return $.getJSON('assets/cities.json'); |
} |
} |
}); |
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }); |
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" }); |
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" }); |
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" }); |
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" }); |
|
$('.example_tagclass > > input').tagsinput({ |
tagClass: function(item) { |
switch (item.continent) { |
case 'Europe' : return 'label label-info'; |
case 'America' : return 'label label-danger label-important'; |
case 'Australia': return 'label label-success'; |
case 'Africa' : return 'label'; |
case 'Asia' : return 'label label-warning'; |
} |
}, |
itemValue: 'value', |
itemText: 'text', |
typeahead: { |
source: function(query) { |
return $.getJSON('assets/cities.json'); |
} |
} |
}); |
$('.example_tagclass > > input').tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }); |
$('.example_tagclass > > input').tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" }); |
$('.example_tagclass > > input').tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" }); |
$('.example_tagclass > > input').tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" }); |
$('.example_tagclass > > input').tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" }); |
|
angular.module('AngularExample', ['bootstrap-tagsinput']) |
.controller('CityTagsInputController', |
function CityTagsInputController($scope, $http) { |
// Init with some cities |
$scope.cities = [ |
{ "value": 1 , "text": "Amsterdam" , "continent": "Europe" }, |
{ "value": 4 , "text": "Washington" , "continent": "America" }, |
{ "value": 7 , "text": "Sydney" , "continent": "Australia" }, |
{ "value": 10, "text": "Beijing" , "continent": "Asia" }, |
{ "value": 13, "text": "Cairo" , "continent": "Africa" } |
]; |
|
$scope.queryCities = function(query) { |
return $http.get('assets/cities.json'); |
}; |
|
$scope.getTagClass = function(city) { |
switch (city.continent) { |
case 'Europe' : return 'label label-info'; |
case 'America' : return 'label label-danger label-important'; |
case 'Australia': return 'label label-success'; |
case 'Africa' : return 'label'; |
case 'Asia' : return 'label label-warning'; |
} |
}; |
} |
); |
/bower_components/bootstrap-tagsinput/examples/assets/app_bs3.js |
@@ -0,0 +1,95 @@ |
var citynames = new Bloodhound({ |
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), |
queryTokenizer: Bloodhound.tokenizers.whitespace, |
prefetch: { |
url: 'assets/citynames.json', |
filter: function(list) { |
return $.map(list, function(cityname) { |
return { name: cityname }; }); |
} |
} |
}); |
citynames.initialize(); |
|
var cities = new Bloodhound({ |
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'), |
queryTokenizer: Bloodhound.tokenizers.whitespace, |
prefetch: 'assets/cities.json' |
}); |
cities.initialize(); |
|
/** |
* Typeahead |
*/ |
var elt = $('.example_typeahead > > input'); |
elt.tagsinput({ |
typeaheadjs: { |
name: 'citynames', |
displayKey: 'name', |
valueKey: 'name', |
source: citynames.ttAdapter() |
} |
}); |
|
/** |
* Objects as tags |
*/ |
elt = $('.example_objects_as_tags > > input'); |
elt.tagsinput({ |
itemValue: 'value', |
itemText: 'text', |
typeaheadjs: { |
name: 'cities', |
displayKey: 'text', |
source: cities.ttAdapter() |
} |
}); |
|
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }); |
elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" }); |
elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" }); |
elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" }); |
elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" }); |
|
/** |
* Categorizing tags |
*/ |
elt = $('.example_tagclass > > input'); |
elt.tagsinput({ |
tagClass: function(item) { |
switch (item.continent) { |
case 'Europe' : return 'label label-primary'; |
case 'America' : return 'label label-danger label-important'; |
case 'Australia': return 'label label-success'; |
case 'Africa' : return 'label label-default'; |
case 'Asia' : return 'label label-warning'; |
} |
}, |
itemValue: 'value', |
itemText: 'text', |
// typeaheadjs: { |
// name: 'cities', |
// displayKey: 'text', |
// source: cities.ttAdapter() |
// } |
typeaheadjs: [ |
{ |
hint: true, |
highlight: true, |
minLength: 2 |
}, |
{ |
name: 'cities', |
displayKey: 'text', |
source: cities.ttAdapter() |
} |
] |
}); |
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }); |
elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" }); |
elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" }); |
elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" }); |
elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" }); |
|
// HACK: overrule hardcoded display inline-block of typeahead.js |
$(".twitter-typeahead").css('display', 'inline'); |
/bower_components/bootstrap-tagsinput/examples/assets/cities.json |
@@ -0,0 +1,16 @@ |
[ { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }, |
{ "value": 2 , "text": "London" , "continent": "Europe" }, |
{ "value": 3 , "text": "Paris" , "continent": "Europe" }, |
{ "value": 4 , "text": "Washington" , "continent": "America" }, |
{ "value": 5 , "text": "Mexico City" , "continent": "America" }, |
{ "value": 6 , "text": "Buenos Aires", "continent": "America" }, |
{ "value": 7 , "text": "Sydney" , "continent": "Australia" }, |
{ "value": 8 , "text": "Wellington" , "continent": "Australia" }, |
{ "value": 9 , "text": "Canberra" , "continent": "Australia" }, |
{ "value": 10, "text": "Beijing" , "continent": "Asia" }, |
{ "value": 11, "text": "New Delhi" , "continent": "Asia" }, |
{ "value": 12, "text": "Kathmandu" , "continent": "Asia" }, |
{ "value": 13, "text": "Cairo" , "continent": "Africa" }, |
{ "value": 14, "text": "Cape Town" , "continent": "Africa" }, |
{ "value": 15, "text": "Kinshasa" , "continent": "Africa" } |
] |