In this article, I will first give a HTML for demonstrating the jqTransform on a simple form with input elements including
textfield, radio button , checkbox and
button.
I also attach labels for those input elements, since jqTransform plugin also implement the label as what in html native label does.
For the
select box, it is the most complicated part in jqTransform and it will be scheduled to be improved at the last stage.
For this stage, I focus on the event handled in jqTransfrom because this part is not fully implemented in the original source code.
Here is a testing HTML file to test the events(
foucs , click , change and blur) handled in input elements (
textfield, radio button , checkbox and
button):
Test Demo
<html>
<head>
<script src="/js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/js/jqtransform/jquery.jqtransform.js" type="text/javascript"></script>
<link href="/js/jqtransform/jqtransform.css" rel="stylesheet"></link>
<link href="/js/jqtransform/jqtransform-theme.css" rel="stylesheet"></link>
<script type="text/javascript">
$(function(){
$('form.jqtransform').jqTransform({imgPath:'/js/jqtransform/img/'});
});
function onFocusHandler(elem, e){
elem = $(elem);
console.log('onFocusHandler - id: ' + elem.attr('id'));
}
function onClickHandler(elem, e){
elem = $(elem);
console.log('onClickHandler - id: ' + elem.attr('id'));
}
function onChangeHandler(elem, e){
elem = $(elem);
console.log('onChangeHandler - id: ' + elem.attr('id'));
}
function onBlurHandler(elem, e){
elem = $(elem);
console.log('onBlurHandler - id: ' + elem.attr('id'));
}
</script>
</head>
<body style="padding: 20px;">
<h1>
jqTransform - enhancement</h1>
<form class="jqtransform" id="form1">
<div class="rowElem">
<label for="fullname">Full Name:</label>
<input id="fullname" name="fullname" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="text" />
</div>
<div class="rowElem">
<label for="nickname">Nickname:</label>
<input id="nickname" name="nickname" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="text" value="Raymond" />
</div>
<div class="rowElem">
<label>Gender:</label>
<input checked="checked" id="gender_m" name="gender" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="radio" value="m" />
<label class="radiovalue" for="gender_m">M</label>
<input id="gender_f" name="gender" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="radio" value="f" />
<label class="radiovalue" for="gender_f">F</label>
</div>
<div class="rowElem">
<label>Interest In:</label>
<input id="programming" name="programming" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="checkbox" value="programming" />
<label class="checkboxvalue" for="programming">programming</label>
<input checked="checked" id="hiking" name="hiking" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="checkbox" value="hiking" />
<label class="checkboxvalue" for="hiking">hiking</label>
</div>
<div class="rowElem">
<input id="button" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="button" value="Button" />
</div>
<div class="rowElem">
</div>
</form>
<form id="form2">
<div class="rowElem">
<label for="fullname2">Full Name:</label>
<input id="fullname2" name="fullname2" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="text" />
</div>
<div class="rowElem">
<label for="nickname2">Nickname:</label>
<input id="nickname2" name="nickname2" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="text" value="Raymond" />
</div>
<div class="rowElem">
<label>Gender:</label>
<input checked="checked" id="gender_m2" name="gender2" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="radio" value="m" />
<label class="radiovalue" for="gender_m2">M</label>
<input id="gender_f2" name="gender2" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="radio" value="f" />
<label class="radiovalue" for="gender_f2">F</label>
</div>
<div class="rowElem">
<label>Interest In:</label>
<input id="programming2" name="programming2" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="checkbox" value="programming" />
<label class="checkboxvalue" for="programming2">programming</label>
<input checked="checked" id="hiking2" name="hiking2" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="checkbox" value="hiking" />
<label class="checkboxvalue" for="hiking2">hiking</label>
</div>
<div class="rowElem">
<input id="button2" onblur="onBlurHandler(this,event);" onchange="onChangeHandler(this,event);" onclick="onClickHandler(this,event);" onfocus="onFocusHandler(this,event);" type="button" value="Button" />
</div>
<div class="rowElem">
</div>
</form>
</body>
</html>
Test Result
And here is the test result run in Chrome version 31.0:
Textfield
| Actions: |
1. mouse click inside textfield |
| 2. enter some text |
| 3. mouse click outside textfield |
| jqTransformed |
| onFocusHandler - id: fullname |
| onClickHandler- id: fullname |
| onChangeHandler- id: fullname |
| onBlurHandler- id: fullname |
|
| Normal |
| onFocusHandler - id: fullname2 |
| onClickHandler- id: fullname2 |
| onChangeHandler- id: fullname2 |
| onBlurHandler- id: fullname2 |
|
As mentioned before, jqTransform will wrap a
<div> element around the input element and apply CSS style to the
<div>. For a textfield input element, the original input element needs not to be hidden and can be do styling on the wrapper directly. Therefore, the events handling in jqTransfromed input element against mouse and keyboard events are the same as native input element.
Radio Button
| Actions: |
1. mouse click on unchecked radio button |
| 2. mouse click outside radio button |
| jqTransformed |
| onClickHandler- id: gender_f |
| onChangeHandler- id: gender_f |
| onChangeHandler- id: gender_f |
| onChangeHandler- id: gender_m |
|
| Normal |
| onFocusHandler- id: gender_f2 |
| onChangeHandler- id: gender_f2 |
| onClickHandler- id: gender_f2 |
| onBlurHandler- id: gender_f2 |
|
For radio button, the original radio button will be hidden and overlayed in place by the wrapper as a overlay. Therefore, the events have to be handled properly on the wrapper elements, however, it is not implemented properly on the wrapper. Lets put in out to-do list to fix the events on the jqTransfromed radio button.
Checkbox
| Actions: |
1. mouse click on unchecked checkbox |
| 2. mouse click outside checkbox |
| jqTransformed |
| onClickHandler- id: programming |
| onChangeHandler- id: programming |
| onChangeHandler- id: programming |
|
| Normal |
| onFocusHandler- id: programming2 |
| onChangeHandler- id: programming2 |
| onClickHandler- id: programming2 |
| onBlurHandler- id: programming2 |
|
For the jqTransformed checkbox, it is similar case to the radio button. We can fixed the events in the same way as what we will do to the radio button.
Button
| Actions: |
1. mouse click on unchecked button |
| 2. mouse click outside button |
|
|
| Normal |
| onFocusHandler- id: button2 |
| onClickHandler- id: button2 |
| onBlurHandler- id: button2 |
|
In jqTransform, there is not events handling for button at all. So we need to write it in our own.
No comments:
Post a Comment