439 lines
104 KiB
HTML
439 lines
104 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>UFD 0.6 demonstration index</title>
|
||
|
|
|
||
|
|
<!-- css for demonstrations / examples -->
|
||
|
|
<link href="example.css" rel="stylesheet" type="text/css" />
|
||
|
|
|
||
|
|
<!-- base structure css -->
|
||
|
|
<link href="../css/ufd-base.css" rel="stylesheet" type="text/css" />
|
||
|
|
|
||
|
|
<!-- sexy css skin -->
|
||
|
|
<link href="../css/sexy/sexy.css" rel="stylesheet" type="text/css" />
|
||
|
|
<!-- plain css skin -->
|
||
|
|
<link href="../css/plain/plain.css" rel="stylesheet" type="text/css" />
|
||
|
|
<!-- uiCss skin; extras not provided by uiCss -->
|
||
|
|
<link href="../css/uiCss/uiCss.css" rel="stylesheet" type="text/css" />
|
||
|
|
<!-- custom css skin; basic pure CSS for you to build from -->
|
||
|
|
<link href="../css/custom/custom.css" rel="stylesheet" type="text/css" />
|
||
|
|
|
||
|
|
<!-- required dependency -->
|
||
|
|
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
|
||
|
|
<!-- <script type="text/javascript" src="js/ui.core.js"></script> -->
|
||
|
|
<script type="text/javascript" src="js/jquery-ui-1.8.js"></script>
|
||
|
|
<!-- if you want iE6 not to poke select boxes thru your dropdowns, you need ... -->
|
||
|
|
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Plugin source development location, distribution location: only 1 of 2 is there.. -->
|
||
|
|
<script type="text/javascript" src="../src/jquery.ui.ufd.js"></script>
|
||
|
|
<script type="text/javascript" src="../jquery.ui.ufd.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="js/themeswitchertool.js"></script>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Firebug lite for iE:
|
||
|
|
Useful to see logging in iE. Can also create a DOM node matching the logSelector option.
|
||
|
|
|
||
|
|
<script type='text/javascript'
|
||
|
|
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
||
|
|
-->
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>UFD base demonstration page</h1>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function(){
|
||
|
|
$('#uiTheme').themeswitcher();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div id="uiTheme"></div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>uiCss combo</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
$("#uiCss-combo").ufd({useUiCss:true, log: false});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p>This show the jQuery UI CSS (themeroller) support. You will need to pick a skin above to see it properly.</p>
|
||
|
|
|
||
|
|
<label for="uicss-combo">Choose a country:</label>
|
||
|
|
<br />
|
||
|
|
|
||
|
|
|
||
|
|
<select id="uiCss-combo" name="uiCss-combo">
|
||
|
|
<option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="Brunei Darussalam">Brunei Darussalam</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo">Congo</option><option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option><option value="Cook Islands">Cook Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote D'ivoire">Cote D'ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern Territories">French Southern Territories</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><o
|
||
|
|
</select>
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>basic combo</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
$("#basic-combo").ufd();
|
||
|
|
$("#basic-combo-prefix").ufd({infix:false});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<p>Try this basic example usecase for <em>UFD</em>. It works like a normal dropdown, but you can start typing to filter.</p>
|
||
|
|
<label for="basic-combo">Infix search; choose a country:</label>
|
||
|
|
<br />
|
||
|
|
|
||
|
|
|
||
|
|
<select id="basic-combo" name="basic-combo">
|
||
|
|
<option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="Brunei Darussalam">Brunei Darussalam</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo">Congo</option><option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option><option value="Cook Islands">Cook Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote D'ivoire">Cote D'ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern Territories">French Southern Territories</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><o
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
|
||
|
|
<label for="basic-combo-prefix">Prefix search; c hoose a country:</label>
|
||
|
|
<br />
|
||
|
|
<select id="basic-combo-prefix" name="basic-combo-prefix">
|
||
|
|
<option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="Brunei Darussalam">Brunei Darussalam</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo">Congo</option><option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option><option value="Cook Islands">Cook Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote D'ivoire">Cote D'ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern Territories">French Southern Territories</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><o
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div >
|
||
|
|
<h2>width control</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
$("select.sizeDemo1").ufd();
|
||
|
|
$("select.sizeDemo2").ufd({minWidth: 100});
|
||
|
|
$("select.sizeDemo3").ufd({manualWidth: 100});
|
||
|
|
$("select.sizeDemo4").ufd({maxWidth: 100});
|
||
|
|
$("select.sizeDemo5").ufd({maxWidth: 100, listWidthFixed: false});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Sizing defaults to autosize.
|
||
|
|
UFD sets the exact same width as the master select, unless the original is below the "minWidth" option,
|
||
|
|
or manualWidth is set.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<label>default: match original width (autosize)</label>
|
||
|
|
<br/>
|
||
|
|
<select class="sizeDemo1">
|
||
|
|
<option value="1">The same width as the original select would be if it wasn't wrapped</option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<label>Content less then minWidth of 100px</label>
|
||
|
|
<br/>
|
||
|
|
<select style="width: 100px;">
|
||
|
|
<option value=""></option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<select class="sizeDemo2">
|
||
|
|
<option value=""></option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<label>manualWidth @ 100px</label>
|
||
|
|
<br/>
|
||
|
|
<select style="width: 100px;">
|
||
|
|
<option value="AL">a</option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<select class="sizeDemo3">
|
||
|
|
<option value="AL">a</option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<label>Content more than maxWidth of 100px</label>
|
||
|
|
<br/>
|
||
|
|
<select style="width: 100px;">
|
||
|
|
<option value="AL">supercalifragilisticexpialadocious?</option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<select class="sizeDemo4">
|
||
|
|
<option value="AL">supercalifragilisticexpialadocious?</option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<label>maxWidth of 100px and listWidthFixed = false</label>
|
||
|
|
<br/>
|
||
|
|
<select class="sizeDemo5">
|
||
|
|
<option value="AL">supercalifragilisticexpialadocious?</option>
|
||
|
|
<option value="AL">short</option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<br/> <hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>Free text</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(document).ready(function () {
|
||
|
|
$("#freetext-combo").ufd( {submitFreeText:true, log: true} );
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p>This combobox below allows freetext, submitting <em>text</em> back using the original selects' name.
|
||
|
|
All change, focus, blur events are still propagated back to the (renamed) master. Exact text matches,
|
||
|
|
cursor and mouse selection will update the master also. Note that the ENTER key has slightly different
|
||
|
|
behavior; it doesn select the first matched item, enabling free-text to work. Cursor or mouse to select partial matches.</p>
|
||
|
|
|
||
|
|
<label for="freetext-combo">Choose a country:</label><br />
|
||
|
|
<select id="freetext-combo" name="basic-freetext">
|
||
|
|
<option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="Brunei Darussalam">Brunei Darussalam</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo">Congo</option><option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option><option value="Cook Islands">Cook Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote D'ivoire">Cote D'ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern Territories">French Southern Territories</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><o
|
||
|
|
</select>
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>Functions</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
var s1 = $("#functions-combo");
|
||
|
|
var disabled = false;
|
||
|
|
|
||
|
|
$("#disableToggle").bind("click", function() {
|
||
|
|
/* not needed unless polling is off
|
||
|
|
if(disabled) s1.ufd("enable");
|
||
|
|
else s1.ufd("disable");*/
|
||
|
|
|
||
|
|
disabled = !disabled;
|
||
|
|
s1[0].disabled = disabled;
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#changeOptions").bind("click", function() {
|
||
|
|
var msec = new Date().toString();
|
||
|
|
var newoption = '<option value="'+msec+'">'+msec+'</option>';
|
||
|
|
|
||
|
|
s1.prepend(newoption);
|
||
|
|
s1.ufd("changeOptions");
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#destroy").bind("click", function() {
|
||
|
|
s1.ufd("destroy");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#create").bind("click", function() {
|
||
|
|
s1.ufd({ log: true});
|
||
|
|
});
|
||
|
|
|
||
|
|
var shCont = $("#shContainer");
|
||
|
|
$("#showHide").toggle(
|
||
|
|
function(){ shCont.hide(); },
|
||
|
|
function(){ shCont.show(); }
|
||
|
|
);
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
This shows the useful functions you can call on widgets. There are duplicate labels,
|
||
|
|
so you can't filter to a single value. The original order is preserved, and you can create and
|
||
|
|
destroy multiple times to confirm that the correct instance is selected in each case.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<button id="create" type="button">initialize as UFD</button><br/>
|
||
|
|
<button id="destroy" type="button">revert to native (destroy)</button><br/>
|
||
|
|
<button id="disableToggle" type="button">Toggle (disable|enable)</button><br/>
|
||
|
|
<button id="changeOptions" type="button">add new option & reload (changeOptions)</button><br/>
|
||
|
|
<button id="showHide" type="button">Toggle visiblity of container </button><br/>
|
||
|
|
|
||
|
|
<div id="shContainer">
|
||
|
|
|
||
|
|
<label for="functions-combo">Choose a country:</label><br />
|
||
|
|
<select id="functions-combo" name="functions-combo">
|
||
|
|
<option value="Afghanistan">Afghanistan</option>
|
||
|
|
<option value="Albania">Albania</option>
|
||
|
|
<option value="Algeria">Algeria</option>
|
||
|
|
<option value="American Samoa">American Samoa</option>
|
||
|
|
<option value="Andorra">Andorra</option>
|
||
|
|
<option value="Angola">Angola</option>
|
||
|
|
<option value="Anguilla">Anguilla</option>
|
||
|
|
<option value="2Afghanistan">Afghanistan</option>
|
||
|
|
<option value="2Albania">Albania</option>
|
||
|
|
<option value="2Algeria">Algeria</option>
|
||
|
|
<option value="2American Samoa">American Samoa</option>
|
||
|
|
<option value="2Andorra">Andorra</option>
|
||
|
|
<option value="2Angola">Angola</option>
|
||
|
|
<option value="2Anguilla">Anguilla</option>
|
||
|
|
<option value="3Afghanistan">Afghanistan</option>
|
||
|
|
<option value="3Albania">Albania</option>
|
||
|
|
<option value="3Algeria">Algeria</option>
|
||
|
|
<option value="3American Samoa">American Samoa</option>
|
||
|
|
<option value="3Andorra">Andorra</option>
|
||
|
|
<option value="3Angola">Angola</option>
|
||
|
|
<option value="3Anguilla">Anguilla</option>
|
||
|
|
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
|
||
|
|
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>Skins, emphasis and homeEndForCursor</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
var s1 = $("#skin1-combo").ufd({skin:"sexy", log: true, addEmphasis: true, homeEndForCursor: true});
|
||
|
|
var s2 = $("#skin2-combo").ufd({skin:"plain", addEmphasis: true, homeEndForCursor: true});
|
||
|
|
var s3 = $("#skin3-combo").ufd({skin:"custom", addEmphasis: true, homeEndForCursor: true});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p> the 3 skins bundled with UFD. Each has the (experimental) addEmphasis option.
|
||
|
|
The last one is a CSS only template to help you markup your own needs. </p>
|
||
|
|
<p>These dropdowns have the option "homeEndForCursor: true" set, making the home and end key work on the cursor location, not the list selection.</p>
|
||
|
|
|
||
|
|
<label for="skin1-combo">sexy skin: choose a country:</label><br />
|
||
|
|
<select id="skin1-combo" name="skin1-combo">
|
||
|
|
<option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="Brunei Darussalam">Brunei Darussalam</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo">Congo</option><option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option><option value="Cook Islands">Cook Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote D'ivoire">Cote D'ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern Territories">French Southern Territories</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><o
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<label for="skin2-combo">plain skin: choose a country:</label><br />
|
||
|
|
<select id="skin2-combo" name="skin2-combo">
|
||
|
|
<option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="Brunei Darussalam">Brunei Darussalam</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo">Congo</option><option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option><option value="Cook Islands">Cook Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote D'ivoire">Cote D'ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern Territories">French Southern Territories</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><o
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<label for="skin3-combo">custom skin: choose a country:</label><br />
|
||
|
|
<select id="skin3-combo" name="skin3-combo">
|
||
|
|
<option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="Brunei Darussalam">Brunei Darussalam</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo">Congo</option><option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option><option value="Cook Islands">Cook Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote D'ivoire">Cote D'ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern Territories">French Southern Territories</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><o
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>Special characters and emphasis</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
$("#regexpEmp").ufd({log: true, addEmphasis: true});
|
||
|
|
$("#regexp").ufd({log: true});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<label for="regexp">Regexp chars and a tag</label><br />
|
||
|
|
<select id="regexp" name="regexp">
|
||
|
|
<option value="1">([\\\^\$*+[\]?{}.=!:(|)])([\\\^\$*+[\]?{}.=!:(|)])</option>
|
||
|
|
<option value="2"> ( [ \ \ \ ^ \ $ * + [ \ ] ? { } . = ! : ( | ) ] ) </option>
|
||
|
|
<option value="3"> <tag> "</option>
|
||
|
|
<option value="4">([\\\^\$*+[\]?{}.=!:(|)])([\\\^\$*+[\]?{}.=!:(|)])</option>
|
||
|
|
<option value="5"> ( [ \ \ \ ^ \ $ * + [ \ ] ? { } . = ! : ( | ) ] ) </option>
|
||
|
|
<option value="6"> <tag> & </option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
|
||
|
|
<label for="regexpEmp">Emphasis with regexp chars and a tag</label><br />
|
||
|
|
<select id="regexpEmp" name="regexpEmp">
|
||
|
|
<option value="1">([\\\^\$*+[\]?{}.=!:(|)])([\\\^\$*+[\]?{}.=!:(|)])</option>
|
||
|
|
<option value="2"> ( [ \ \ \ ^ \ $ * + [ \ ] ? { } . = ! : ( | ) ] ) </option>
|
||
|
|
<option value="3"> <tag> "</option>
|
||
|
|
<option value="4">([\\\^\$*+[\]?{}.=!:(|)])([\\\^\$*+[\]?{}.=!:(|)])</option>
|
||
|
|
<option value="5"> ( [ \ \ \ ^ \ $ * + [ \ ] ? { } . = ! : ( | ) ] ) </option>
|
||
|
|
<option value="6"> <tag> & </option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
|
||
|
|
<label for="raw">Raw Select tag</label><br />
|
||
|
|
<select id="raw" name="raw">
|
||
|
|
<option value="1">([\\\^\$*+[\]?{}.=!:(|)])([\\\^\$*+[\]?{}.=!:(|)])</option>
|
||
|
|
<option value="2"> ( [ \ \ \ ^ \ $ * + [ \ ] ? { } . = ! : ( | ) ] ) </option>
|
||
|
|
<option value="3"> <tag> "</option>
|
||
|
|
<option value="4">([\\\^\$*+[\]?{}.=!:(|)])([\\\^\$*+[\]?{}.=!:(|)])</option>
|
||
|
|
<option value="5"> ( [ \ \ \ ^ \ $ * + [ \ ] ? { } . = ! : ( | ) ] ) </option>
|
||
|
|
<option value="6"> <tag> & </option>
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
|
||
|
|
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>Empty select</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
$("#null").ufd({log: true, addEmphasis: true}).html("").ufd("changeOptions");
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p> </p>
|
||
|
|
|
||
|
|
<label for="null">Nothing!</label><br />
|
||
|
|
<select id="null" name="null">
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
|
||
|
|
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>zIndex correction on iE6</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
$("#zindex").ufd({log:true});
|
||
|
|
$("#zindex").ufd("changeOptions");
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p>The combobox works over select input, working around the iE6 zindex problem using bgiframe.</p>
|
||
|
|
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<label for="zindex">Choose a country:</label>
|
||
|
|
<br />
|
||
|
|
example
|
||
|
|
<select id="zindex" name="zindex" title="This is the title" tabindex="50">
|
||
|
|
<option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="Brunei Darussalam">Brunei Darussalam</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo">Congo</option><option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option><option value="Cook Islands">Cook Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote D'ivoire">Cote D'ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern Territories">French Southern Territories</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><o
|
||
|
|
</select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<select><option>Example Example Example Example Example Example Example </option></select>
|
||
|
|
<br/>
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Log</h2>
|
||
|
|
<div id="log" style="margin-top: 50px;"></div>
|
||
|
|
<hr/>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|