142 lines
15 KiB
HTML
142 lines
15 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" />
|
||
|
|
|
||
|
|
<!-- plain css skin -->
|
||
|
|
<link href="../css/plain/plain.css" rel="stylesheet" type="text/css" />
|
||
|
|
<!-- uiCss skin; extras not provided by uiCss -->
|
||
|
|
|
||
|
|
<!-- 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-off"></script>
|
||
|
|
<script type="text/javascript" src="js/ui.core.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>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
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>
|
||
|
|
-->
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>UFD event propagation demonstration page</h1>
|
||
|
|
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>the master select tag: inside UFD</h2>
|
||
|
|
<script type="text/javascript" >
|
||
|
|
$(function () {
|
||
|
|
var master = $("#eventEg");
|
||
|
|
var log = $("#masterLog").attr("tabindex", -10);
|
||
|
|
|
||
|
|
// add/remove from http://ejohn.org/blog/flexible-javascript-events/ thanks
|
||
|
|
var addEvent = function( obj, type, fn ) {
|
||
|
|
if ( obj.attachEvent ) {
|
||
|
|
obj['e'+type+fn] = fn;
|
||
|
|
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
|
||
|
|
obj.attachEvent( 'on'+type, obj[type+fn] );
|
||
|
|
} else
|
||
|
|
obj.addEventListener( type, fn, false );
|
||
|
|
};
|
||
|
|
|
||
|
|
var masterEvent = function(event){
|
||
|
|
log.prepend("event: " + event.type + "; masterVal: " + master.val() + "<br/>");
|
||
|
|
};
|
||
|
|
|
||
|
|
var masterEvent = function(event){
|
||
|
|
log.prepend("jq-event: " + event.type + "; masterVal: " + master.val() + "<br/>");
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// listen for events on master old skool
|
||
|
|
addEvent(master[0], "blur", masterEvent);
|
||
|
|
addEvent(master[0], "focus", masterEvent);
|
||
|
|
addEvent(master[0], "change", masterEvent);
|
||
|
|
|
||
|
|
|
||
|
|
// listen for events on master new skool
|
||
|
|
master.bind("blur focus change", masterEvent);
|
||
|
|
|
||
|
|
$("#destroy").bind("click", function() {
|
||
|
|
master.ufd("destroy");
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#create").bind("click", function() {
|
||
|
|
master.ufd();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
#masterLog {
|
||
|
|
overflow: scroll;
|
||
|
|
position: absolute;
|
||
|
|
left: 400px;
|
||
|
|
top: 20px;
|
||
|
|
width: 400px;
|
||
|
|
height: 100px;
|
||
|
|
border: 1px solid blue;
|
||
|
|
background: white;
|
||
|
|
color: blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
This is a normal select-dropdown. The log to the right shows events when fired. Try changing the value ...
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
The UFD widget can be initialized and destroyed without disturbing these event handlers, and
|
||
|
|
events can be bound and removed independant to UFD. When a select is wrapped, UFD triggers some but not all,
|
||
|
|
events on the original: namely the focus, change and blur events. Initialize the UFD, then try changing the value again.</p>
|
||
|
|
|
||
|
|
<div id="container">
|
||
|
|
<p>
|
||
|
|
<label for="eventEg">Please choose a country:</label>
|
||
|
|
<br/>
|
||
|
|
<select id="eventEg" name="eventEg">
|
||
|
|
<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><
|
||
|
|
</select>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<button id="create" type="button">initialize as UFD</button>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<button id="destroy" type="button">revert to native (destroy)</button>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div id="masterLog"></div>
|
||
|
|
</div>
|
||
|
|
<hr/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|