mirror of
https://github.com/owncloudarchive/contacts.git
synced 2025-01-19 08:52:22 +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
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>
|