| Multi-Select Drop Down Lists - Check out the awesome HTML5 Multi-Select Drop Down Lists Format INPUT alternative widgets. Example: View Code Demo |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>HTML5 Multi-Select Drop Down Lists Format Inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://w2ui.com/web/css/bootstrap.css" rel="stylesheet">
<script src="http://w2ui.com/web/js/jquery-1.9.1.min.js"></script>
<script src="http://w2ui.com/web/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://w2ui.com/web/js/CodeMirror/lib/codemirror.css">
<script src="http://w2ui.com/web/js/CodeMirror/lib/codemirror.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/javascript.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/htmlmixed.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/css.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/xml.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-fields-1.0.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-fields-1.0.min.js"></script>
<script src="http://w2ui.com/web/pages/code-mirror.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://w2ui.com/web/js/font-awesome/font-awesome.css" />
<style>
/* Begin HTML5 Multi-Select Drop Down Lists Format Inputs */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
.w2ui-label {float:left; margin-top:6px; margin-bottom:3px; width:100px; padding:0px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; min-height:20px;}
.w2ui-field {margin-bottom:3px; margin-left:108px; padding:3px; min-height:20px;}
span.legend {padding-left:20px; color:#888;}
</style>
</head>
<body>
<div id="content">
<h2>Multi-Select Drop Down Lists</h2>
<div class="w2ui-label"> Multi-Select: </div>
<div class="w2ui-field"> <input id="enum" style="width: 540px"/> </div>
<div class="w2ui-label"> Max 2 Items: </div>
<div class="w2ui-field"> <input id="enum-max" style="width: 540px;"/> </div>
<div class="w2ui-label"> Custom: </div>
<div class="w2ui-field"> <input id="enum-custom" style="width: 540px"/> </div>
<div style="height: 30px;"></div>
<script>
var pstyle = 'padding-right: 3px; color: #828AA7; text-shadow: 1px 1px 3px white;';
var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin VanBuren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'];
$('#enum').w2field('enum', {
items: people,
selected: [{ id: 0, text: 'John Adams' }, { id: 0, text: 'Thomas Jefferson' }]
});
$('#enum-max').w2field('enum', {
items: people,
max: 2
});
$('#enum-custom').w2field('enum', {
items: people,
onAdd: function (event) {
if (Math.random() > 0.8) {
event.item.bgColor = 'rgb(255, 232, 232)';
event.item.border = '1px solid red';
}
},
itemRender: function (item, index, remove) {
var html =
'<li style="'+ (item.bgColor ? 'background-color: '+ item.bgColor + ';' : '') +
(item.border ? 'border: '+ item.border + ';' : '') +'" index="'+ index +'">'+
remove +
'<span class="fa-trophy" style="'+ pstyle +'; margin-left: -4px;"></span>' +
item.text +
'</li>';
return html;
},
render: function (item, options) {
return '<span class="fa-star" style="'+ pstyle +'"></span>' + item.text;
}
});
</script>
<br /><br />
<div id="code">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_169.html">HTML5 Multi-Select Drop Down Lists Format Inputs Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll