155 lines
5.8 KiB
HTML
155 lines
5.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
|
||
|
|
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
|
||
|
|
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
|
||
|
|
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<title>Selectize.js Demo</title>
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
|
||
|
|
<link rel="stylesheet" href="css/normalize.css">
|
||
|
|
<link rel="stylesheet" href="css/stylesheet.css">
|
||
|
|
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
|
||
|
|
<script src="js/jquery.js"></script>
|
||
|
|
<script src="../dist/js/standalone/selectize.js"></script>
|
||
|
|
<script src="js/index.js"></script>
|
||
|
|
<style type="text/css">
|
||
|
|
.selectize-control.contacts .selectize-input > div {
|
||
|
|
padding: 1px 10px;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: normal;
|
||
|
|
-webkit-font-smoothing: auto;
|
||
|
|
color: #f7fbff;
|
||
|
|
text-shadow: 0 1px 0 rgba(8,32,65,0.2);
|
||
|
|
background: #2183f5;
|
||
|
|
background: -moz-linear-gradient(top, #2183f5 0%, #1d77f3 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2183f5), color-stop(100%,#1d77f3));
|
||
|
|
background: -webkit-linear-gradient(top, #2183f5 0%,#1d77f3 100%);
|
||
|
|
background: -o-linear-gradient(top, #2183f5 0%,#1d77f3 100%);
|
||
|
|
background: -ms-linear-gradient(top, #2183f5 0%,#1d77f3 100%);
|
||
|
|
background: linear-gradient(to bottom, #2183f5 0%,#1d77f3 100%);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2183f5', endColorstr='#1d77f3',GradientType=0 );
|
||
|
|
border: 1px solid #0f65d2;
|
||
|
|
-webkit-border-radius: 999px;
|
||
|
|
-moz-border-radius: 999px;
|
||
|
|
border-radius: 999px;
|
||
|
|
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
|
||
|
|
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
|
||
|
|
box-shadow: 0 1px 1px rgba(0,0,0,0.15);
|
||
|
|
}
|
||
|
|
.selectize-control.contacts .selectize-input > div.active {
|
||
|
|
background: #0059c7;
|
||
|
|
background: -moz-linear-gradient(top, #0059c7 0%, #0051c1 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0059c7), color-stop(100%,#0051c1));
|
||
|
|
background: -webkit-linear-gradient(top, #0059c7 0%,#0051c1 100%);
|
||
|
|
background: -o-linear-gradient(top, #0059c7 0%,#0051c1 100%);
|
||
|
|
background: -ms-linear-gradient(top, #0059c7 0%,#0051c1 100%);
|
||
|
|
background: linear-gradient(to bottom, #0059c7 0%,#0051c1 100%);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0059c7', endColorstr='#0051c1',GradientType=0 );
|
||
|
|
border-color: #0051c1;
|
||
|
|
}
|
||
|
|
.selectize-control.contacts .selectize-input > div .email {
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
.selectize-control.contacts .selectize-input > div .name + .email {
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.selectize-control.contacts .selectize-input > div .email:before {
|
||
|
|
content: '<';
|
||
|
|
}
|
||
|
|
.selectize-control.contacts .selectize-input > div .email:after {
|
||
|
|
content: '>';
|
||
|
|
}
|
||
|
|
.selectize-control.contacts .selectize-dropdown .caption {
|
||
|
|
font-size: 12px;
|
||
|
|
display: block;
|
||
|
|
color: #a0a0a0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="wrapper">
|
||
|
|
<h1>Selectize.js</h1>
|
||
|
|
<div class="demo">
|
||
|
|
<h2>Email Contacts</h2>
|
||
|
|
<p>An example showing how you might go about creating contact selector like those used in Email apps.</p>
|
||
|
|
<div class="control-group">
|
||
|
|
<label for="select-to">To:</label>
|
||
|
|
<select id="select-to" class="contacts" placeholder="Pick some people..."></select>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
// <select id="select-to"></select>
|
||
|
|
|
||
|
|
var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
|
||
|
|
'(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
|
||
|
|
|
||
|
|
var formatName = function(item) {
|
||
|
|
return $.trim((item.first_name || '') + ' ' + (item.last_name || ''));
|
||
|
|
};
|
||
|
|
|
||
|
|
$('#select-to').selectize({
|
||
|
|
persist: false,
|
||
|
|
maxItems: null,
|
||
|
|
valueField: 'email',
|
||
|
|
labelField: 'name',
|
||
|
|
searchField: ['first_name', 'last_name', 'email'],
|
||
|
|
sortField: [
|
||
|
|
{field: 'first_name', direction: 'asc'},
|
||
|
|
{field: 'last_name', direction: 'asc'}
|
||
|
|
],
|
||
|
|
options: [
|
||
|
|
{email: 'nikola@tesla.com', first_name: 'Nikola', last_name: 'Tesla'},
|
||
|
|
{email: 'brian@thirdroute.com', first_name: 'Brian', last_name: 'Reavis'},
|
||
|
|
{email: 'someone@gmail.com'}
|
||
|
|
],
|
||
|
|
render: {
|
||
|
|
item: function(item, escape) {
|
||
|
|
var name = formatName(item);
|
||
|
|
return '<div>' +
|
||
|
|
(name ? '<span class="name">' + escape(name) + '</span>' : '') +
|
||
|
|
(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
|
||
|
|
'</div>';
|
||
|
|
},
|
||
|
|
option: function(item, escape) {
|
||
|
|
var name = formatName(item);
|
||
|
|
var label = name || item.email;
|
||
|
|
var caption = name ? item.email : null;
|
||
|
|
return '<div>' +
|
||
|
|
'<span class="label">' + escape(label) + '</span>' +
|
||
|
|
(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
|
||
|
|
'</div>';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
createFilter: function(input) {
|
||
|
|
var regexpA = new RegExp('^' + REGEX_EMAIL + '$', 'i');
|
||
|
|
var regexpB = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
|
||
|
|
return regexpA.test(input) || regexpB.test(input);
|
||
|
|
},
|
||
|
|
create: function(input) {
|
||
|
|
if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
|
||
|
|
return {email: input};
|
||
|
|
}
|
||
|
|
var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
|
||
|
|
if (match) {
|
||
|
|
var name = $.trim(match[1]);
|
||
|
|
var pos_space = name.indexOf(' ');
|
||
|
|
var first_name = name.substring(0, pos_space);
|
||
|
|
var last_name = name.substring(pos_space + 1);
|
||
|
|
|
||
|
|
return {
|
||
|
|
email: match[2],
|
||
|
|
first_name: first_name,
|
||
|
|
last_name: last_name
|
||
|
|
};
|
||
|
|
}
|
||
|
|
alert('Invalid email address.');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|