mirror of
https://github.com/owncloudarchive/contacts.git
synced 2025-01-19 08:52:22 +01:00
228 lines
10 KiB
HTML
228 lines
10 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html lang="en-US">
|
||
|
|
<head>
|
||
|
|
<!-- TODO: Prepare better demo page -->
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>jQuery Combobox Plugin: Demo page</title>
|
||
|
|
<link href="css/combobox.css" rel="stylesheet" type="text/css">
|
||
|
|
<script src="components/jquery/jquery.min.js"></script>
|
||
|
|
<script src="combobox.js"></script>
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.themed').combobox();
|
||
|
|
|
||
|
|
$('#select1').combobox();
|
||
|
|
$('#select2').combobox({
|
||
|
|
listMaxHeight: 180,
|
||
|
|
forceScroll: true,
|
||
|
|
filter: function(name, value) {
|
||
|
|
switch (name) {
|
||
|
|
case 'selected':
|
||
|
|
value = '-- ' + value;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
}/*,
|
||
|
|
hideSelected: true*/
|
||
|
|
});
|
||
|
|
$('#select3').combobox({});
|
||
|
|
$('#select4').combobox({});
|
||
|
|
|
||
|
|
$('#select5').combobox({}).bind('update_position', function(e, offset) {
|
||
|
|
offset.left += 5;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#select6').combobox({
|
||
|
|
btnWidth: 20,
|
||
|
|
hoverEnabled: true,
|
||
|
|
listMaxHeight: 134,
|
||
|
|
forceScroll: true
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#select-dynamic').combobox({
|
||
|
|
width: 250
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#dynamic-select-update').click(function() {
|
||
|
|
var $select = $('#select-dynamic');
|
||
|
|
option = '<option value="' + $select.children().length + '">' + $select.children().length + '</option>';
|
||
|
|
|
||
|
|
$select.html($select.html() + option);
|
||
|
|
|
||
|
|
$select.get(0).combobox.rebuild();
|
||
|
|
});
|
||
|
|
$('#edit-submitted-prefix').combobox().change(function() {});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form action="post.php" method="post">
|
||
|
|
<input type="text" value="Lorem ipsum" />
|
||
|
|
|
||
|
|
<select id="edit-submitted-prefix" name="prefix" class="form-select"><option value="Mr">Mr</option><option value="Mme">Mme</option><option value="Mlle">Mlle</option></select>
|
||
|
|
|
||
|
|
<select name="select-1" id="select1" disabled="disabled">
|
||
|
|
<option value='123'>Lorem</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
text
|
||
|
|
|
||
|
|
<select name="select-2" id="select2">
|
||
|
|
<option value='123'>Lorem</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
<option>Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<select name="select-3[]" id="select3" multiple="multiple">
|
||
|
|
<option value='123'>Lorem</option>
|
||
|
|
<option value="b">Ipsum</option>
|
||
|
|
<option>Dolor</option>
|
||
|
|
<option>Dolor sit amet</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<select name="select-4[]" id="select4" multiple="multiple">
|
||
|
|
<optgroup label="group1">
|
||
|
|
<option selected="selected">group1 option1</option>
|
||
|
|
<option selected="selected">group1 option2</option>
|
||
|
|
<option>group1 option3</option>
|
||
|
|
</optgroup>
|
||
|
|
<optgroup label="group2">
|
||
|
|
<option>group2 option1</option>
|
||
|
|
<option>group2 option2</option>
|
||
|
|
<option>group2 option3</option>
|
||
|
|
</optgroup>
|
||
|
|
<option>simple option1</option>
|
||
|
|
<option selected="selected">simple option2</option>
|
||
|
|
<option selected="selected">simple option3</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<select name="select-5" id="select5">
|
||
|
|
<optgroup label="group1">
|
||
|
|
<option>group1 option1</option>
|
||
|
|
<option>group1 option2</option>
|
||
|
|
<option>group1 option3</option>
|
||
|
|
</optgroup>
|
||
|
|
<optgroup label="group2">
|
||
|
|
<option>group2 option1</option>
|
||
|
|
<option>group2 option2</option>
|
||
|
|
<option>group2 option3</option>
|
||
|
|
</optgroup>
|
||
|
|
<option>simple option1</option>
|
||
|
|
<option>simple option2</option>
|
||
|
|
<option>simple option3</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<select name="select-6" id="select6">
|
||
|
|
<option value="1900">1900</option><option value="1901">1901</option><option value="1902">1902</option><option value="1903">1903</option><option value="1904">1904</option><option value="1905">1905</option><option value="1906">1906</option><option value="1907">1907</option><option value="1908">1908</option><option value="1909">1909</option><option value="1910">1910</option><option value="1911">1911</option><option value="1912">1912</option><option value="1913">1913</option><option value="1914">1914</option><option value="1915">1915</option><option value="1916">1916</option><option value="1917">1917</option><option value="1918">1918</option><option value="1919">1919</option><option value="1920">1920</option><option value="1921">1921</option><option value="1922">1922</option><option value="1923">1923</option><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option value="1954">1954</option><option value="1955">1955</option><option value="1956">1956</option><option value="1957">1957</option><option value="1958">1958</option><option value="1959">1959</option><option value="1960">1960</option><option value="1961">1961</option><option value="1962">1962</option><option value="1963">1963</option><option value="1964">1964</option><option value="1965">1965</option><option value="1966">1966</option><option value="1967">1967</option><option value="1968">1968</option><option value="1969">1969</option><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option><option value="1975">1975</option><option value="1976">1976</option><option value="1977">1977</option><option value="1978">1978</option><option value="1979">1979</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option selected="selected" value="2011">2011</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<input type="submit" />
|
||
|
|
<input type="reset" />
|
||
|
|
|
||
|
|
|
||
|
|
<select name="dynamic" id="select-dynamic"></select>
|
||
|
|
<input id="dynamic-select-update" type="button" value="Add">
|
||
|
|
<!-- ////////////////////////////////// -->
|
||
|
|
<div class="theme-green block-1">
|
||
|
|
<div class="theme-blue block-2">
|
||
|
|
<select name="" class="themed">
|
||
|
|
<option value="1">TEST</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="theme-pink block-3">
|
||
|
|
<select name="" class="themed">
|
||
|
|
<option value="1">TEST</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<div class="theme-red theme-blue block-4">
|
||
|
|
<select name="" class="themed">
|
||
|
|
<option value="1">TEST</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function(){
|
||
|
|
$('select').each(function() {
|
||
|
|
var list, $parents, themeStack = [ ];
|
||
|
|
|
||
|
|
if (!this.combobox) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$parents = $(this).parents();
|
||
|
|
|
||
|
|
$parents.each(function() {
|
||
|
|
var matches = this.className.match(/theme\-\w+/g);
|
||
|
|
|
||
|
|
if (matches) {
|
||
|
|
$.each(matches.reverse(), function(i, c) {
|
||
|
|
themeStack.unshift(c);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (themeStack.length == 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
list = this.combobox.list;
|
||
|
|
|
||
|
|
$.each(themeStack, function(i, className) {
|
||
|
|
list.addClass(className);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|