PHP玩偶: 2012/06

2012年6月22日

夾心餅乾好吃不好當

夾心餅乾好吃不好當…鬱悶內傷

2012年6月2日

使用 jQuery 外掛做表單驗證

Form validation – with jQuery validation plugin
下載位址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
在表單的 input element 加上一些 class，定義好這個欄位該有什麼樣的值。例如：required, email, url, etc. (查看完整列表)

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.7.1.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-validation-1.9.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.9.0/localization/messages_tw.js"></script>
<script type="text/javascript" charset="utf-8">
 $(document).ready( function(){
  $('#commentForm').validate();
  });
</script>

<form id="commentForm" class="cmxform" method="POST" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>

資料來源：http://brooky.cc/2011/08/04/using-jquery-validation-plugin-for-form-validation/

2012年6月1日

使用 jQuery

官方網站：http://jquery.com/
檔案下載：
Minified http://code.jquery.com/jquery-1.7.1.min.js
Uncompressed http://code.jquery.com/jquery-1.7.1.js
兩個版本是一樣的 Uncompressed 是把內容中的空格、換行拿掉，節省一點空間
使用方法：

<html>
  <head>
    <title>jQuery Tutorial 1</title>
    <script type="text/javascript" src="jquery-1.7.1.js"></script><!--jquery 的路徑-->
    <script type="text/javascript">
      function showMsg() {// 取得 id 為 msg 的物件, 然後再物件裡放入 Hello
    $('#btn').attr('disabled', true);
    if ($('#msg').html().length == 0) {//jQuery 裡 html 函式若是沒有傳參數進去的話，它就會回傳該 DOM 元件下的 HTML 字串，所以若回傳的字串長度等於 0 的時候才塞 HTML 進去
        $('#msg').html('<h1>Hello</h1>');
    }
    $('#msg').fadeIn();//淡入show()
    setTimeout(function(){//使得字樣出現的 3000 毫秒（也就是 3 秒）後，用了 jQuery 的 hide 方法把字隱藏起來
     $('#msg').fadeOut();//淡出hide()
     $('#btn').attr('disabled', false);
    }, 3000);
   } 
    </script>
  </head>
  <body>
    <div id="msg"></div>
    <input type="button" value="Click Me" onclick="showMsg()" id="btn"/>
  </body>
</html>

資料來源：http://blog.ericsk.org/archives/834