取得一組 radio 的值

$(“input[name=’myradio’]:checked”).val()

動態組成一個 select

$(“#myselect”).html(“”);

for (var i = 0; i < selectOptions.length; i++) {

$(“#myselect”).append($(“<option></option>”).val(selectOptions[i]).html(selectOptions[i]));

}

存取 select 的每一個 option

$(‘#myselect option’).each(function (i,v) {

}

將文字輸入欄位設定為唯讀

$(‘#myinput’).attr(“readonly”,true);

顯示 html 元件

$(‘#mytable’).show

隱藏 html 元件

$(‘#mybutton’).hide()

勾選一個 checkbox

$(‘#mycheckbox’).attr(“checked”,true);

接下來這個就有點離題了，我都不知道 <p> tag 可以用來印表時換頁，看到了順便記一下

<p style=’page-break-after:always’>

(No Ratings Yet)

Loading...

軟體的部份需要 jquery 及 jQuery plugin: Validation。

首先假設頁面上有以下的 form

<form id=”myform”>

<input type=”text” name=”userid” id=”userid”>

</form>

要進行輸入欄位檢核時在頁面加入以下的 javascript code

$(document).ready( function() {

$(‘#myform’).validate({

invalidHandler: function(form, validator) {

},

errorPlacement: function(error, element) {

}

});
});

invalidHandler、errorPlacement 用於檢核有誤時進行處理，請自行定義，接著加入檢核的 rule

$(‘#userid’).rules(‘add’, {

required6digits: true,

messages:{required6digits:”必須為6位數數值!”}    });

以上的 code 為 userid 欄位加入檢核項目 required6digits，plugin 提供了一些預設的檢核功能，這個例子我們是自行定義檢核欄位必須為6個數字，在 document ready 時加入以下 code

jQuery.validator.addMethod(“required6digits”, function(value, element, params) {

var regEx = /\d{6}/;

return regEx.test(value);

});

從以上的例子我們可以做出自行定義的檢核規則，最後利用以下 code 進行 form 的檢核

$(‘#myform’).valid()

如果傳回 true 即是檢核成功，如果傳回 false 即是檢核有誤

(No Ratings Yet)

Loading...

最近要為一個頁面上的所有 input 欄位加上 tooltip，採用的 plugin 網址。作法如下：

首先頁面 include plugin 的 javascript 及 css

<script type=”text/javascript” src=”jquery.tooltip.min.js”></script>

<link href=”jquery.tooltip.css” rel=”stylesheet” type=”text/css”>

tooltip 的內容這次是藏在 div 內，再由 javascript 取出顯示，當然很容就可以修改成將內容放在資料庫內

<div id=”price_tooltip” style=”display:none”>

這是售價欄位說明

</div>

接下來在 document ready 時設定 input 檔位的 tooltip，以 input 欄位的 id 加上 _tooltip 字串，取出對應 div 的內容

$(“:input”).tooltip({

delay: 0,

showURL: false,

bodyHandler: function() {

var id=this.id;

var tooltip_id=id+”_tooltip”;

return $(“#”+tooltip_id).html();

}

});

(No Ratings Yet)

Loading...