Posts
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
// add row button
$('.append_button').click(function(){
var row = $('<div class="lister">'+new Date()+' <input type="button" class="row_button" value="click me!" /></div>');
row.appendTo('.container');
});
// delegate for append button
$('.container').delegate('.lister input:button', 'click', function(){
alert('delegate ok!');
});
// delegate for append button (falied, because .lister was not found on delegate action)
$('.container .lister').delegate('input:button', 'click', function(){
alert('delegate, again!');
});
});
</script>
</head>
<body>
<div class="container">
<input type="button" class="append_button" value="Add" />
</div>
</body>
</html>
/*
* 在validate呼叫valid()驗證方法式, 加上focusInValid的動件
*/
(function($) {
$.extend($.fn, {
valid2 : function() {
var valid = true;
var validator;
if ($(this[0]).is('form')) {
validator = this.validate();
valid = this.validate().form();
} else {
validator = $(this[0].form).validate();
this.each(function() {
valid &= validator.element(this);
});
}
if (!valid)
validator.focusInvalid();
return valid;
}
});
// 新增一個 regex 的驗證方式
$.validator.methods.regex = function(value, element, param) {
return this.optional(element) || ((typeof(param) == 'function' && typeof(param.test) == 'function') ? param.test(value) : new RegExp(param).test(value));
};
$.validator.messages.regex = 'Please enter a valid value.';
})(jQuery);
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Recursive call when post request</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
$(function() {
var count = 0;
$('input:button').click(function() {
// identity
count++;
var tick = count;
// post url
var url = '${contextPath}/';
// post param
var param = $(this).data();
console.log(param);
$('<div>(' + tick + ') Post to : ' + url + '</div>').appendTo(document.body);
$.post(url, param, function(data) {
$('<div style="color:blue;">(' + tick + ') Ajax works successfully.</div>').appendTo(document.body);
});
});
});
</script>
</head>
<body>
<input type="button" value="click to post" data-action="test" data-name="bruce" data-age="31" />
</body>
</html>
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var check = false;
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
$("textbox").rules("add", { regex: "^[a-zA-Z'.\s]{1,40}$" })
action = '/controller/action/id/';
target = 'upload_iframe';
enctype = 'multipart/form-data';
$('#form1').attr("action",action);
$('#form1').attr("target",target);
$('#form1').attr("enctype",enctype);
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(document).ready(function(){
var data = $("#message").metadata();
var i;
for(i in data){
$("#message").append("<div>"+i+"="+data[i]+"</div>");
}
});
<div id="message" class="mess {firstName:'Bruce',lastName:'Tsai'}"></div>
(function(){
$("#form01").validate({
debug: true // 除錯模式
});
$("#form02").validate({
rules: {
cellphone: { // form.name
required: true,
digits: true,
minlength: 5
}
},
messages: {
cellphone: { // form.name
required: "請填寫電話!",
digits: "請填寫電話號碼!",
minlength: $.format("至少填入 {0} 個數值") // 對應驗證的參數
}
},
debug: true
});
$("#form03").validate({
submitHandler: function(form){
alert("Age1 value : " + $("#age1").val());
form.submit();
//$(form).ajaxSubmit();
},
invalidHandler: function(form, validator){
var errors = validator.numberOfInvalids();
alert($.format("錯誤數 : {0}", errors));
}
});
$("#form04").validate();
$("#testemail1").rules("add", {required:true});
$("#form05").validate();
// 新增驗證規則, 作法一
$.validator.methods.lessThanSquare = function(value, element, param){
// @value 輸入的值
// @element 驗證的目標元件
// @param 設定規則時的參數
return value * value < param;
};
// 新增驗證規則, 作法二
$.validator.addMethod("testSocialId", function(value, element, param){
return /\w\d{9}/.test(value);
}, "身份證號驗證錯誤");
$("#form06").validate({
rules: {
number2: {
required: true,
digits: true,
lessThanSquare: 100
},
socialid: {
required: true,
testSocialId: true
}
},
messages: {
number2: {
lessThanSquare: "數值錯誤"
}
}
});
$("#form07").validate({
rules: {
address: {
required: "#requiredaddresscheck:checked"
}
}
});
})();
<textarea id="editor" class="ckeditor"></textarea>implement way 2 : use javascript
<textarea id="editor"></textarea>
<script type="text/javascript">
// default
CKEDITOR.replace("editor");
// with settings
CKEDITOR.replace("editor", {skin:"office2003", toolbar:"Basic"});
</script>
implement way 3 : use jQuery
<textarea id="editor"></textarea>
<script type="text/javascript">
// default
$("#editor").ckeditor();
// with settings
$("#editor").ckeditor(
function(){
// callback code
},
{
uiColor: "pink",
skin: "kama",
toolbar: [
["Source", "Preview"],
"/", // line break
["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "Print", "SpellChecker", "Scayt"]
]
}
);
</script>
| "Source" | ||||||||
| "Save" | "NewPage" | "Preview" | "Templates" | |||||
| "Cut" | "Copy" | "Paste" | "PasteText" | "PasteFromWord" | "Print" | "SpellChecker" | "Scayt" | |
| "Undo" | "Redo" | "Find" | "Replace" | "SelectAll" | "RemoveFormat" | |||
| "Form" | "Checkbox" | "Radio" | "TextField" | "Textarea" | "Select" | "Button" | "ImageButton" | "HiddenField" |
| "Bold" | "Italic" | "Underline" | "Strike" | "Subscript" | "Superscript" | |||
| "NumberedList" | "BulletedList" | "Outdent" | "Indent" | "Blockquote" | ||||
| "JustifyLeft" | "JustifyCenter" | "JustifyRight" | "JustifyBlock" | |||||
| "Link" | "Unlink" | "Anchor" | ||||||
| "Image" | "Flash" | "Table" | "HorizontalRule" | "Smiley" | "SpecialChar" | "PageBreak" | ||
| "Styles" | "Format" | "Font" | "FontSize" | |||||
| "TextColor" | "BGColor" | |||||||
| "Maximize" | "ShowBlocks" | "About" |