mirror of
https://github.com/owncloudarchive/contacts.git
synced 2024-12-12 23:09:15 +01:00
8c3d7ccdba
Remove old combobox user bower for onfontresize Add jcrop + md5 Add files to scrutinizer ignore list Remove misplaced text Selected the right MultiSelect library via bower Move bower dependencies to correct location
68 lines
2.5 KiB
HTML
68 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>jQuery MultiSelect Widget Demo</title>
|
|
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
|
|
<link rel="stylesheet" type="text/css" href="assets/style.css" />
|
|
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
|
|
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
|
|
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
|
|
<script type="text/javascript" src="assets/prettify.js"></script>
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
|
|
$("select").multiselect({
|
|
selectedList: 4
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body onload="prettyPrint();">
|
|
|
|
<h2>Displaying options in a list</h2>
|
|
|
|
<h3>Using the <code>selectedList</code> Parameter</h3>
|
|
<p>The selectedList parameter is a boolean/numeric value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter.</p>
|
|
<pre class="prettyprint">
|
|
$("select").multiselect({
|
|
selectedList: 4 // 0-based index
|
|
});
|
|
</pre>
|
|
<form>
|
|
<p>
|
|
<select name="example-list" multiple="multiple" style="width:400px">
|
|
<option value="option1">Option 1</option>
|
|
<option value="option2">Option 2</option>
|
|
<option value="option3">Option 3</option>
|
|
<option value="option4">Option 4</option>
|
|
<option value="option5">Option 5</option>
|
|
<option value="option6">Option 6</option>
|
|
<option value="option7">Option 7</option>
|
|
</select>
|
|
</p>
|
|
</form>
|
|
|
|
<h3>Passing a Function to <code>selectedText</code></h3>
|
|
<p>Passing a function to the <code>selectedText</code> option gives you low-level control of what the widget displays. The function receives three arguments:
|
|
the number of checkboxes checked, the total number of checkboxes, and an array of the checkboxes (DOM elements) that were checked. Example usage:</p>
|
|
|
|
<pre class="prettyprint">
|
|
$("select").multiselect({
|
|
selectedText: function(numChecked, numTotal, checkedItems){
|
|
return numChecked + ' of ' + numTotal + ' checked';
|
|
}
|
|
});
|
|
</pre>
|
|
|
|
<p>The <code>selectedList</code> option is simply a convenience method for the <code>selectedText</code> option.</p>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|