11月
28
Posted by YuanYuan under
Css
We can easy to set css styles for html element, but when you want set some css(maybe background…) for input type=”file”, oh No, no good way to do this.
but some people fix this problem.
css way(+ a little javascript)
Styling File Upload Input Box in CSS
example here.
jQuery way
File Style
example here.
I think this jQuery plugin get a little position bug, need to fix. maybe I’ll do it.
Flash way
flash is good way to upload file(s) more than html, but you need install flash Player. SWFUpload is a small JavaScript/Flash library to get the best of both worlds. you can try it.
10月
30
Posted by YuanYuan under
jQueryPlugins
My colleague do a project, need a form dynamic append and validate the form element filed.
The form elements have text, select, datepicker, an identification card number(Taiwan), add/del row button.
How to do this with jQuery ?
Ready, we can start now!
step1. structure html - cool set template way
good template set
- <textarea style="display:none" id="template">
- <tr class="prop">
- <td valign="top" class="value"><input type="text" id="name_{0}" name="name_{0}" value="" class="nameRequired" /></td>
- <td valign="top" class="value">
- <select name="groupId_{0}" class="selectRequired">
- <option value="">請選擇</option>
- <option value="0">配偶</option>
- <option value="1">直系尊親屬</option>
- <option value="2">子女</option>
- <option value="3">同胞兄弟姐妹</option>
- <option value="4">其他親屬或家屬</option>
- </select>
- </td>
- <td valign="top" class="value"><input type="text" id="title_{0}" name="title_{0}" value="" class="required" /></td>
- <td valign="top" class="value"><input type="text" id="birthday_{0}" name="birthday_{0}" value="" class="required date-pick" />
- </td>
- <td valign="top" class="value"><input type="text" id="personId_{0}" name="personId_{0}" value="" class="idRequired" /></td>
- <td valign="top" class="value"><input type="text" id="address_{0}" name="address_{0}" value="" class="required" /></td>
- <td valign="top" class="value"><input type="text" id="condition_{0}" name="condition_{0}" value="1" class="required" /></td>
- <td valign="top"><input type="button" value="delete" id="add_button" onclick="deleteRow(this);" /></td>
- <td><input type="hidden" id="id" name="id" value="41" /></td>
- </tr>
- </textarea>
table :
- <form action="" method="post" id="myForm">
- <div class="list">
- <table>
- <thead>
- <tr><th class="sortable" >Emp_id</th></tr>
- </thead>
- <tbody>
- <tr>
- <td>12345</td>
- <td><input type="hidden" id="masterId" name="masterId" value="1" /></td>
- </tr>
- </tbody>
- </table>
- </div>
- <br>
-
- <div class="list">
- <table id="table1">
- <thead>
- <tr>
- <th class="sortable">姓名</th>
- <th class="sortable">groupId</th>
- <th class="sortable">title</th>
- <th class="sortable">birthday</th>
- <th class="sortable">personId</th>
- <th class="sortable">address</th>
- <th class="sortable">condition</th>
- </tr>
- </thead>
- <tbody>
- <!-- add dynamic row over here -->
- </tbody>
- </table>
-
- </div>
-
- <div>
- <span class="button"><input type="button" id="add" value="add" /></span>
- <span class="button"><input class="save" type="submit" value="Save" /></span>
- </div>
- </form>
step2. add some css
- input.error {border: 1px solid red;display: block;}
step3. add some javascript.
- <script type="text/javascript">
- <!--
- $(document).ready(function(){
- $("#myForm").validate({
- errorPlacement: function(error, element) {
- error.appendTo( element.parent() );
- },
- submitHandler: function() {
- alert("Submitted, thanks!");
- }
- });
-
- $.validator.messages.required = "請輸入內容.";
- $.validator.addMethod("nameRequired", function(value, element) {
- return !this.optional(element);
- }, "請輸入姓名.");
-
- $.validator.addMethod("selectRequired", function(value, element) {
- return !this.optional(element);
- }, "請選擇身份.");
-
- $.validator.addMethod("idRequired", function(value, element) {
- return $(element).checkId();
- }, "請輸入正確的ID.");
-
- //super template
- var template = jQuery.format($("#template").val());
-
- function addRow() {
- $(template(i++)).appendTo("#myForm #table1 tbody");
- //showOn + onClose fix with validation plugin.
- $(".date-pick").datepicker({ dateFormat:"yy-mm-dd", showOn: 'button', buttonText:'選', onClose: function(){
- this.focus();
- } });
-
- //format id , date
- $(".idRequired").mask("a999999999");
- $(".date-pick").mask("9999-99-99");
- }
-
- //made dynamic row easy
- var i = 1;
- $("#add").click(addRow);
- });
-
- function deleteRow(d){
- $(d).parents("tr:first").remove();
- }
- </script>
OK, done.
but we find some problem with Validation+datepicker, so I made some change, I set show button, and onClose focus. If you don’t this, the date-pick show not correct, you always need to click twince, I really don’t why.
- //showOn + onClose fix with validation plugin.
- $(".date-pick").datepicker({ changeFirstDay: false, showOn: 'button', buttonText:'選', onClose: function(){
- this.focus();
- } });
My colleague find the organizer idcheck function have some error (so why my id sometime is wrong). she fix this error.
part.1 - very Important , most of people write worng sequence, the correct is w=32, x=30, y=31 not w=30, x=31, y=32, I don’t why ?
- case 'W':
- str[0] = "3";
- str[1] = "2";
- break;
- case 'X':
- str[0] = "3";
- str[1] = "0";
- break;
- case 'Y':
- str[0] = "3";
- str[1] = "1";
- break;
part.2
- if((moduleCnt - (sum % moduleCnt)) == parseInt(inputId.substring(moduleCnt-1,moduleCnt))){
- return true;
- }else if(sum % moduleCnt==parseInt(inputId.substring(moduleCnt-1,moduleCnt))){
- return true;
- }else{
- return false;
- }
and that’s all.
If you take these script code, let’s me know, thanks and good luck.
10月
30
Posted by YuanYuan under
jQueryPlugins
Sometimes, when we made web pages, we need to explain title, subject or word. How to do this ? OK, mostly, we use tooltips to do this.
with jQuery, tooltips makd so easy. use the plugin.
you don’t need write much javascript. you just know how to use it.
ok, I find some tooltips, easy and cool.
Smashing magasine collect many tips effect, use css or javascript. tooltips-scripts-ajax-javascript-css-dhtml/ go to take a look, find what you want.
good luck.