However, i still give my first version now.
(I do not give a packed for the example because not one need it, no one wants it.)
jqtransform-dev-2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/js/jqtransform/jquery.jqtransform.js"></script>
<link rel="stylesheet" href="/js/jqtransform/jqtransform.css" />
<link rel="stylesheet" href="/js/jqtransform/jqtransform-theme.css" />
<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>
<br/>
<form class="jqtransform" id="form1">
<div class="rowElem">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
</div>
<div class="rowElem">
<label for="nickname">Nickname:</label>
<input type="text" id="nickname" name="nickname" value="Raymond" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
</div>
<div class="rowElem">
<label>Gender:</label>
<input type="radio" id="gender_m" name="gender" value="m" checked="checked" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
<label class="radiovalue" for="gender_m">M</label>
<input type="radio" id="gender_f" name="gender" value="f" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
<label class="radiovalue" for="gender_f">F</label>
</div>
<div class="rowElem">
<label>Interest In:</label>
<input type="checkbox" id="programming" name="programming" value="programming" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
<label class="checkboxvalue" for="programming">programming</label>
<input type="checkbox" id="hiking" name="hiking" value="hiking" checked="checked" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
<label class="checkboxvalue" for="hiking">hiking</label>
</div>
<div class="rowElem">
<input type="button" id="button" value="Button" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
</div>
<div class="rowElem"></div>
</form>
<br/><br/><br/><br/>
<form id="form2">
<div class="rowElem">
<label for="fullname2">Full Name:</label>
<input type="text" id="fullname2" name="fullname2" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
</div>
<div class="rowElem">
<label for="nickname2">Nickname:</label>
<input type="text" id="nickname2" name="nickname2" value="Raymond" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
</div>
<div class="rowElem">
<label>Gender:</label>
<input type="radio" id="gender_m2" name="gender2" value="m" checked="checked" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
<label class="radiovalue" for="gender_m2">M</label>
<input type="radio" id="gender_f2" name="gender2" value="f" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
<label class="radiovalue" for="gender_f2">F</label>
</div>
<div class="rowElem">
<label>Interest In:</label>
<input type="checkbox" id="programming2" name="programming2" value="programming" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
<label class="checkboxvalue" for="programming2">programming</label>
<input type="checkbox" id="hiking2" name="hiking2" value="hiking" checked="checked" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
<label class="checkboxvalue" for="hiking2">hiking</label>
</div>
<div class="rowElem">
<input type="button" id="button2" value="Button" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
</div>
<div class="rowElem"></div>
</form>
<br/>
<br/>
</body>
</html>
 |
| jqTransformed form |
 |
| Before jqTransform |
And here is the jqTransform js file.
I wont give explanation this time, since it is not perfect. Some code may need big change in the future versions.
