开发者新闻
首先访问谷歌代码 (http://code.google.com/p/jqueryxoops/downloads/list) 并下载教程12. 这个压缩包包含了您需要的所有文件。它们来自我之前的教程。
第一部分 - 圆角
让我们从圆角开始。打开test.php并替换所有代码为
以下是更改内容
第2行 - 我创建了一个名为"myformDiv"的新ID样式，并为其设置了背景颜色、宽度及高度
第8行- 加载我们的圆角插件。
第13行- 这是设置圆角的地方。我将/jquery的"corners"插件绑定到了选择器myformDiv。您会注意到空括号。您可以设置角半径，甚至可以设置您想要圆角处理哪些角。1、2、3或所有4个（本例中）都是可能的。
第22行和第29行 - 我在我表中创建了一个div。这是被圆角处理的区域。
容易吧？让我们继续。
第二部分 - 验证
表单验证是最好用JavaScript去实现的事情之一。为什么要返回服务器检查用户是否填写了必要字段呢？现在，为了使表单验证也可以与AJAX一起工作，我们必须结合起来。用以下内容替换test.php中的所有代码
第4行 - 将围绕任何必要但未填写的表单元素创建红色边框
第5行 - 使错误消息红色
第18行- 我对我的上一个示例进行了一些小的修改。为了使AJAX和验证能够友好地共存，我现在将"form1"的提交按钮绑定。
第19行 - 将对"form1"中的所有元素执行验证。
第20行 - 如果验证失败，意味着有必要的字段为空，则它将停止执行此点之后的所有内容并返回。如果验证为真，则它将继续处理此函数内部剩余的代码。
第30行和第35行 - 我用具有类"required-field"的元素（可以是div等）包装我想要的必要字段
由于我现在使用2个文本字段，因此我将它们命名为不同，所以myserv.php中的改动。接下来。
第3部分 - 传递变量
我们接下来将创建一个允许用户点击并通过AJAX将信息传递到服务器的文本列表。使用JavaScript而不是PHP的一个优点是我们可以利用HTML代码，这意味着什么？打开test.php并将所有代码替换为以下内容
第一部分 - 圆角
让我们从圆角开始。打开test.php并替换所有代码为
<style type="text/css">
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:200px; height:70px;}
style>
<script type="text/javascript" src="firebug.js">
<script language="javascript" src="jquery-1.3.2.min.js">
<script language="javascript" src="jquery.corner.js">
<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$('#myformDiv').corner(); // Rounds corners of selected div. In this example "myformDiv"
$("#subBut").click(function(event) {
var formContent = $("#form1").serialize();
$("#box").load('myserv.php',formContent);
});
});
script>
<div id="myformDiv">
<form name="form1" id="form1" method="post" action="">
<label>Name
<input type="text" name="textfield" id="textfield">
label>
<input type="button" name="subBut" id="subBut" value="Submit">
form>
div>
<br />
<div id="box">Ajax calldiv> 以下是更改内容
第2行 - 我创建了一个名为"myformDiv"的新ID样式，并为其设置了背景颜色、宽度及高度
第8行- 加载我们的圆角插件。
第13行- 这是设置圆角的地方。我将/jquery的"corners"插件绑定到了选择器myformDiv。您会注意到空括号。您可以设置角半径，甚至可以设置您想要圆角处理哪些角。1、2、3或所有4个（本例中）都是可能的。
第22行和第29行 - 我在我表中创建了一个div。这是被圆角处理的区域。
容易吧？让我们继续。
第二部分 - 验证
表单验证是最好用JavaScript去实现的事情之一。为什么要返回服务器检查用户是否填写了必要字段呢？现在，为了使表单验证也可以与AJAX一起工作，我们必须结合起来。用以下内容替换test.php中的所有代码
<style type="text/css">
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:300px; height:170px;}
.error-highlight {border: 2px solid #f00;}
.errMissFld {color: #f00;}
style>
<script type="text/javascript" src="firebug.js">
<script language="javascript" src="jquery-1.3.2.min.js">
<script language="javascript" src="jquery.corner.js">
<script language="javascript" src="jquery.validation.js">
<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$('#myformDiv').corner(); // Rounds corners of selected div. In this example "myformDiv"
$('#form1').bind('submit', function() {
tst= $(this).validation();
if(tst==false){return tst;}
var formContent = $("#form1").serialize();
$("#box").load('myserv.php',formContent);
return false;
});
});
script>
<div id="myformDiv">
<form name="form1" id="form1" method="post" action="">
<p class="required-field">
<label>Name
<input type="text" name="name" id="name">
label>
p>
<p class="required-field">
<label>Name
<input type="text" name="address" id="address">
label>
p>
<input type="submit" name="subBut" id="subBut" value="Submit">
form>
<div class="errMissFld">
div>
div>
<br />
<div id="box">Ajax calldiv> 第4行 - 将围绕任何必要但未填写的表单元素创建红色边框
第5行 - 使错误消息红色
第18行- 我对我的上一个示例进行了一些小的修改。为了使AJAX和验证能够友好地共存，我现在将"form1"的提交按钮绑定。
第19行 - 将对"form1"中的所有元素执行验证。
第20行 - 如果验证失败，意味着有必要的字段为空，则它将停止执行此点之后的所有内容并返回。如果验证为真，则它将继续处理此函数内部剩余的代码。
第30行和第35行 - 我用具有类"required-field"的元素（可以是div等）包装我想要的必要字段
请注意，这并不是原始的jQuery.validation插件。已被我修改以执行此方式。
打开myserv.php并将所有代码替换为以下内容
echo "hello world! My name is " . $_GET['name'];
?> 由于我现在使用2个文本字段，因此我将它们命名为不同，所以myserv.php中的改动。接下来。
第3部分 - 传递变量
我们接下来将创建一个允许用户点击并通过AJAX将信息传递到服务器的文本列表。使用JavaScript而不是PHP的一个优点是我们可以利用HTML代码，这意味着什么？打开test.php并将所有代码替换为以下内容
//假设我有许多可选的电台。我将使用这个列表。
$vals=array();
for ($i = 1; $i <= 6; $i++) {
$vals[$i]['id']=$i;
$vals[$i]['name']='Radio Station Name:'.$i;
}
?>
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:300px; height:170px;}
.error-highlight {border: 2px solid #f00;}
.errMissFld {color: #f00;}
$(document).ready(function() { //在处理任何JavaScript之前完成整个页面的加载
$('#myformDiv').corner(); // 圆角选项 div 的边缘。在本例中为 "myformDiv"。
$('#form1').bind('submit', function() {
tst= $(this).validation();
if(tst==false){return tst;}
var formContent = $("#form1").serialize();
$("#box").load('myserv.php',formContent);
return false;
});
$(".mylink").bind("click", function() {
var hol=$(this).attr('myval');
var formContent ="action=radio&link="+hol;
$("#box").load('myserv.php',formContent);
});
});
这是我的首选电台
foreach ($vals as $val) { // 创建一个电台列表
?> echo $val['id']; ?>">echo $val['name']; ?>
} ?>
Ajax调用 现在打开myserv.php并替换所有内容为以下内容
如果 $_GET['action']=="radio"){
echo "我偏好的单选按钮是:".$_GET['link'];
} else {
echo "hello world! 我的名字是 " . $_GET['name'];
}
?> 现在让我们逐行地查看所有更改，从 test.php 开始
1 到 9 - 我创建了一个 PHP 循环填充一个列表。
第 36 行到 41 行 - 我又创建了一个点击函数。这个函数将所有具有 "mylink" 类的 链接绑定起来。你会注意到这里有个新的地方，我有一个名为 "hol" 的 JavaScript 变量，用于获取一个名为 "myval" 的 HTML 属性的内容。你可以创建尽可能多的属性来将信息传回给服务器。在第 38 行，你也可以看到我正在创建 formContent，并向其中添加更多信息。在 PHP 中，连接符号是 "."，而在 JavaScript 中是 "+"。
第 67 行 - 你可以看到我的链接的单一示例。注意 myval="12"
第 70 行到 74 行 - 一个 PHP 循环来填充更多链接。由于大多数人已经理解了 PHP，我将不会进行解释。
现在转到文件 myserv.php
第 1 行- 这是一个简单的 PHP IF 语句。你也可以用它来运行函数。这样你就可以为每个 AJAX 调用创建一个 PHP 函数。
希望这有所帮助。我还有一些其他的工作正在进行的 :)
|
|
Login
Search
Recent Comments
Who's Online
Donat-O-Meter
| Stats | |
| Goal: | $100.00 |
| Due Date: | Aug 31 |
| Gross Amount: | $0.00 |
| Net Balance: | $0.00 |
| Left to go: | $100.00 |
 |
|