+<!DOCTYPE html>
<html>
- <head>
- <script src='../dist/jquery.js' type='text/javascript'></script>
- <style>
- .red {
- background-color: red;
- border: solid 3px red;
- }
- </style>
- </head>
- <body>
- <h2>Change Tests</h2>
- <table>
- <tr>
- <td>
- Change each:
- </td>
- <td>
- <select class='select_test'>
- <option value='one'>change me 1</option>
- <option value='two'>change me 2</option>
- <option value='three'>change me 3</option>
- </select>
- <select class='select_test'>
- <option value='one'>change me 1</option>
- <option value='two' selected="selected">change me 2</option>
- <option value='three'>change me 3</option>
- </select>
- </td>
- <td>
- <select class='mselect_test' multiple="multiple">
- <option value='one'>change me 1</option>
- <option value='two'>change me 2</option>
- <option value='three'>change me 3</option>
- </select>
- </td>
- <td>
- <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
- <label for="checkbox1">Checkbox 1</label><br/>
- <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
- <label for="checkbox2">Checkbox 2</label><br />
- <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
- <label for="checkbox3">Checkbox 3</label>
- </td>
- <td>
- <button class="button_test" name="mybutton1" id="button1">Button</button><br />
- <button class="button_test" name="mybutton1" id="button1"><span>Button w/ child</span></button><br />
- <button class="button_test" name="mybutton1" id="button1" disabled="disabled">Button Disabled</button><br />
- <button class="button_test" name="mybutton1" id="button1" disabled="disabled"><span disabled="disabled">Button w/ child Dis.</span></button><br />
- </td>
- <td>
- <input type="radio" class="radio_test" name="myradio" id="radio1"/>
- <label for="radio1">Radio1</label><br/>
- <input type="radio" class="radio_test" name="myradio" id="radio2"/>
- <label for="radio2">Radio2</label><br />
- <input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
- <label for="radio3">Radio3</label>
- </td>
- <td>
- <input class="file_test" id="file1" type="file"/>
- <td>
- <input class='test' value='' id='input' size='10' />
- <input class='test' value='test' id='input2' size='10' readonly="readonly" />
- </td>
- <td>
- <textarea rows='2'></textarea>
- </td>
- </td>
- <td>$(document).bind('change')<br />
- $(document).bind('click')
- </td>
- </tr>
- <tr>
- <td>Live:</td>
- <td id='select' class="red">SELECT</td>
- <td id='mselect' class="red">MULTI</td>
- <td id='checkbox' class="red">CHECKBOX</td>
- <td id='button' class="red">BUTTON</td>
- <td id='radio' class="red">RADIO</td>
- <td id='file' class="red">FILE</td>
- <td id='text' class="red">TEXT</td>
- <td id='textarea' class="red">TEXTAREA</td>
- <td id='boundChange' class="red">DOCUMENT</td>
- </tr>
- <tr>
- <td>Bind:</td>
- <td id='selectbind' class="red">SELECT</td>
- <td id='mselectbind' class="red">MULTI</td>
- <td id='checkboxbind' class="red">CHECKBOX</td>
- <td id='buttonbind' class="red">BUTTON</td>
- <td id='radiobind' class="red">RADIO</td>
- <td id='filebind' class="red">FILE</td>
- <td id='textbind' class="red">TEXT</td>
- <td id='textareabind' class="red">TEXTAREA</td>
- </tr>
- <tr>
- <td>Focusin:</td>
- <td id='selectfocus' class="red">SELECT</td>
- <td id='mselectfocus' class="red">MULTI</td>
- <td id='checkboxfocus' class="red">CHECKBOX</td>
- <td id='buttonfocus' class="red">BUTTON</td>
- <td id='radiofocus' class="red">RADIO</td>
- <td id='filefocus' class="red">FILE</td>
- <td id='textfocus' class="red">TEXT</td>
- <td id='textareafocus' class="red">TEXTAREA</td>
- <td id='boundFocus' class="red">DOCUMENT</td>
- </tr>
- <tr>
- <td>Focusout:</td>
- <td id='selectblur' class="red">SELECT</td>
- <td id='mselectblur' class="red">MULTI</td>
- <td id='checkboxblur' class="red">CHECKBOX</td>
- <td id='buttonblur' class="red">BUTTON</td>
- <td id='radioblur' class="red">RADIO</td>
- <td id='fileblur' class="red">FILE</td>
- <td id='textblur' class="red">TEXT</td>
- <td id='textareablur' class="red">TEXTAREA</td>
- <td id='boundBlur' class="red">DOCUMENT</td>
- </tr>
- <tr>
- <td>Live Focus:</td>
- <td id='selectlfocus' class="red">SELECT</td>
- <td id='mselectlfocus' class="red">MULTI</td>
- <td id='checkboxlfocus' class="red">CHECKBOX</td>
- <td id='buttonlfocus' class="red">BUTTON</td>
- <td id='radiolfocus' class="red">RADIO</td>
- <td id='filelfocus' class="red">FILE</td>
- <td id='textlfocus' class="red">TEXT</td>
- <td id='textarealfocus' class="red">TEXTAREA</td>
- </tr>
- <tr>
- <td>Live Blur:</td>
- <td id='selectlblur' class="red">SELECT</td>
- <td id='mselectlblur' class="red">MULTI</td>
- <td id='checkboxlblur' class="red">CHECKBOX</td>
- <td id='buttonlblur' class="red">BUTTON</td>
- <td id='radiolblur' class="red">RADIO</td>
- <td id='filelblur' class="red">FILE</td>
- <td id='textlblur' class="red">TEXT</td>
- <td id='textarealblur' class="red">TEXTAREA</td>
- </tr>
- <tr>
- <td>Live Click:</td>
- <td id='selectlclick' class="red">SELECT</td>
- <td id='mselectlclick' class="red">MULTI</td>
- <td id='checkboxlclick' class="red">CHECKBOX</td>
- <td id='buttonlclick' class="red">BUTTON</td>
- <td id='radiolclick' class="red">RADIO</td>
- <td id='filelclick' class="red">FILE</td>
- <td id='textlclick' class="red">TEXT</td>
- <td id='textarealclick' class="red">TEXTAREA</td>
- <td id='boundClick' class="red">DOCUMENT</td>
- </tr>
- </table>
+<head>
+<title>Change Tests</title>
+<script>
+var version = location.search && location.search.substr(1);
+if ( version ) {
+ version = "http://code.jquery.com/jquery-"+version+".js";
+} else {
+ version = "../dist/jquery.js";
+}
+document.write('<script src="'+version+'"><'+'/script>');
+</script>
+<style>
+table {
+ border-collapse: collapse;
+ empty-cells: show;
+}
+th {
+ text-align: left;
+}
+thead td {
+ width: 11%;
+}
+tbody td {
+ background: #fed;
+}
+th, td {
+ border: 1px solid #bbb;
+}
+</style>
+</head>
+<body>
+<h2>Delegate Tests (<span id="version">BAD FILE IN URL</span>, <span id="fileversion">x</span>)</h2>
+
+<table id="changes">
+<thead>
+ <tr>
+ <th>
+ Controls:
+ </th>
+ <td id="select-one">
+ <select>
+ <option value='one1'>one1</option>
+ <option value='one2'>one2</option>
+ <option value='one3'>one3</option>
+ </select>
+ <select>
+ <option value='two1'>two1</option>
+ <option value='two2' selected="selected">two2</option>
+ <option value='two3'>two3</option>
+ </select>
+ </td>
+ <td id="select-mult">
+ <select multiple="multiple">
+ <option value='multi1'>multi1</option>
+ <option value='multi2'>multi2</option>
+ <option value='multi3'>multi3</option>
+ </select>
+ </td>
+ <td id="checkbox">
+ <input type="checkbox" name="mycheckbox" id="check1"/>
+ <label for="check1">check1</label><br/>
+ <input type="checkbox" name="mycheckbox" id="check2"/>
+ <label for="check2">check2</label><br />
+ <input type="checkbox" name="mycheckbox" id="check3" disabled="disabled"/>
+ <label for="check3">check3</label>
+ </td>
+ <td id="button">
+ <button name="mybutton1" id="button1">Button</button><br />
+ <button name="mybutton2" id="button2"><span>Button w/ child</span></button><br />
+ <button name="mybutton3" id="button3" disabled="disabled">Button Disabled</button><br />
+ <button name="mybutton4" id="button4" disabled="disabled"><span disabled="disabled">Button, child Disabled</span></button><br />
+ </td>
+ <td id="radio">
+ <input type="radio" name="myradio" id="radio1"/>
+ <label for="radio1">Radio1</label><br/>
+ <input type="radio" name="myradio" id="radio2"/>
+ <label for="radio2">Radio2</label><br />
+ <input type="radio" name="myradio" id="radio3" disabled="disabled"/>
+ <label for="radio3">Radio3</label>
+ </td>
+ <td id="file">
+ <input class="file_test" id="file1" type="file"/>
+ </td>
+ <td id="text">
+ <input class='test' value='' id='input' size='10' />
+ <input class='test' value='test' id='input2' size='10' readonly="readonly" />
+ </td>
+ <td id="textarea">
+ <textarea rows='2'></textarea>
+ </td>
+
+ </tr>
+</thead>
+<tbody>
+</tbody>
+</table>
+<p>NOTE: Only IE supports beforeactivate/beforedeactivate; buttons do not support change events.</p>
+
<h2>Submit Tests</h2>
<table>
<tr>
</tr>
</table>
- <ul id="log"></ul>
-
- <script type='text/javascript'>
- jQuery.fn.addChangeClickTest = function( id, prevent ) {
- this.bind("focusin", function(){
- jQuery(id + "focus").blink();
- }).bind("focusout", function(){
- jQuery(id + "blur").blink();
- });
-
- this.bind("focus", function(){
- jQuery(id + "lfocus").blink();
- }).bind("blur", function(){
- jQuery(id + "lblur").blink();
- });
-
- return this.bind("change", function(e){
- jQuery(id + "bind").blink();
- }).live("change", function(e){
- if ( prevent ) {
- e.preventDefault();
- }
-
- jQuery(id).blink();
- }).live("click", function(e){
- jQuery(id + "lclick").blink();
- });
- };
+<script type='text/javascript'>
+$("#version").text(version);
+$("#fileversion").text($.fn.jquery);
- jQuery.fn.addSubmitTest = function( id, prevent ) {
- return this.live("submit", function(e){
- if ( prevent ) {
- e.preventDefault();
- }
-
- jQuery(id).blink();
- });
- };
-
- jQuery.fn.blink = function(){
- return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
- jQuery(this).css("backgroundColor","");
- next();
- });
+// Events we want to track in row-order
+var events = "bind-change live-change live-beforeactivate live-focusin bind-focus live-keydown live-beforedeactivate live-focusout bind-blur live-click".split(" "),
+ counter = 0;
+ blinker = function(event){
+ if ( !counter ) {
+ $("#changes tbody td").text("");
+ }
+ var $els = event.data,
+ prev = $els.text();
+ prev = prev? prev +" | " : "";
+ return $els
+ .text(prev + ++counter+" " + (this.value.replace(/^on$/,"") || this.id || this.checked || ""))
+ .css("backgroundColor","#0f0")
+ .delay(1000)
+ .queue(function(next){
+ $els.css("backgroundColor","#afa");
+ --counter;
+ next();
+ });
};
- $(document).bind("focusin", function() {
- jQuery("#boundFocus").blink();
- });
-
- $(document).bind("focusout", function() {
- jQuery("#boundBlur").blink();
- });
+for ( var i=0; i < events.length; i++ ) {
+ var m = events[i].split("-"),
+ api = m[0],
+ type = m[1],
+ $row = $("<tr><th>"+type+" "+api+"</th></tr>");
- $(document).bind("click", function() {
- jQuery("#boundClick").blink();
- });
-
- $("td.red").live("hover", function(e) {
- if ( e.type === "mouseenter" ) {
- $(this).css("backgroundColor","green");
+ $("#changes thead td").each(function(){
+ var id = "#"+this.id,
+ $cell = $('<td></td>');
+ if ( api == "bind" ) {
+ $(this).find("input, button, select, textarea").bind(type, $cell, blinker);
} else {
- $(this).css("backgroundColor","");
+ $(id+" input,"+id+" button,"+id+" select,"+id+" textarea").live(type, $cell, blinker);
}
+ $row.append($cell);
});
+ $("#changes tbody").append($row);
+}
+// Buttons don't fire change events so show the cell as gray
+$("#changes tbody").find("tr:eq(0), tr:eq(1)").find("td:eq(3)").css("background", "#eee");
- $(".select_test").addChangeClickTest("#select");
- $(".mselect_test").addChangeClickTest("#mselect");
- $(".checkbox_test").addChangeClickTest("#checkbox");
- $(".radio_test").addChangeClickTest("#radio");
- $(".file_test").addChangeClickTest("#file");
- $('textarea').addChangeClickTest("#textarea");
- $('#input').addChangeClickTest("#text");
- $('button').addChangeClickTest("#button");
- $(document).bind("change", function(){
- jQuery("#boundChange").blink();
+jQuery.fn.blink = function(){
+ return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
+ jQuery(this).css("backgroundColor","");
+ next();
});
+};
- $("#text_submit").addSubmitTest("#textSubmit", true);
- $("#password_submit").addSubmitTest("#passwordSubmit", true);
- $("#submit_submit").addSubmitTest("#submitSubmit", true);
- $(document).bind("submit", function(){
- jQuery("#boundSubmit").blink();
+jQuery.fn.addSubmitTest = function( id, prevent ) {
+ return this.live("submit", function(e){
+ if ( prevent ) {
+ e.preventDefault();
+ }
+ jQuery(id).blink();
});
+};
+
+$("#text_submit").addSubmitTest("#textSubmit", true);
+$("#password_submit").addSubmitTest("#passwordSubmit", true);
+$("#submit_submit").addSubmitTest("#submitSubmit", true);
+$(document).bind("submit", function(){
+ jQuery("#boundSubmit").blink();
+});
- </script>
- </body>
+</script>
+</body>
</html>
projects / jquery.git / commitdiff