jQuery插件实战：slider.js/jquery.validate/jRating介绍
最后更新于：2022-04-01 10:28:40
下面给大家介绍三个最近在学也比较实用的jquery插件
1、slider.js
slider.js必须创建一个Slider对象实例，建议在第一个单独的.js文件中实例化Slider对象
var slider = new Slider($(‘#sliderContainer’));
其中#sliderContainer是用来放置图片幻灯片的DIV容器，对应HTML代码：
~~~
<div id=”slideContainer”></div>
使用示例
$(function(){
var slider = new Slider(“#slider”).setDuration(3000);
slider.setSize(600,400);//设置大小
slider.fetchJson(‘photos.json’);//从photo.json本地json文件中加载幻灯片图像
var transitions = [‘squaree’,’circles’,’circle’,’diamond’,’verticalSunblind’,’verticalOpen’]
//以上定义一个转场数组
setInterval(function(){
var transition = transitions[Math.floor(Math.random()*transitions.length)];
if(SliderTransitionFunctions[transition])
slider.setTransitionFunction(SliderTransitionFunctions[transition]) //设置Canvas转场效果
else slider.setTransition(transition); //设置CSS转场效果
},5555);
});
~~~
photos.json文件一般格式
[
{“src”:”images/pic1.jpg”,”name”:”风景”,”link”:”http://www.baidu.com/”},
......
]
2、jquery.validate
使用jquery.validate实现ajax方式的表单
~~~
$(document).ready(function(e)(
$(‘#myform’).ajaxForm(function(){
alert(“success!”);
});
));
~~~
使用jquery.validate添加客户端验证规则
~~~
$(document).ready(function(e){
$(“guestform”).validate({
rules:{
ipt_title:{
required:true, //设置不能为空
maxlength:20, //设置最大长度
minlength:20, //设置最小长度
}，
......
}
})
})
~~~
这里的ipt_title对应html代码中的name属性，如：
<input class=”contact” type=”text” name=”ipt_title” value=””/>
3、jRating
jRating
HTML部分
~~~
<div class=”example”>
<div class=”basic” data-average=”12” data-id=”1”></div>
<div class=”basic” data-average=”8” data-id=”2”</div>
</div>
~~~
//data-average表示当前评分的比例值，data-id指定当前的行
Js部分
~~~
$(document).ready(function(){
$(“.basic”).jRating();//最简单的调用形式
$(“.basic”).jRating({
step:true,
length:20,
onSuccess:function(){
alert(‘success!’);
}
});
$(“.basic”).jRating({
canRateAgain:true,//是否可以重复评分
nbRates:3//可重复评分的次数
})
})
~~~
利用jRating和php搭建一个评分系统
首先创建一个保存评论信息的表
CREATE TABLE IF NOT EXISTS ‘rating’(
‘rating_id’ int(11) NOT NULL AUTO_INCREMENT,//每个评论设定一个自动增长的编号
‘rating_title’ varchar(200) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
‘rating_value’ int(11) NOT NULL,//评分值
‘rating_content’ varchar(2000) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (‘rating_id’)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT=’评分表’ AUTO_INCREMENT
=6;
数据库php配置文件
~~~
<?php
define(‘DB_USER’,’root’);
define(‘DB_PWD’,’root’);
define(‘DB_CHARSET’,’utf-8’);
...//配置各种信息
?>
~~~
网络配置文件
~~~
<?php
header(‘Content-Type:text/html’;charset=utf-8’);
require_once ‘database.inc.php’;//数据库配置文件
require_once ‘db_mysql.php’;//数据库操作类
$db = new db_mysql();//构建数据库操作对象实例
$db->connect(DB_HOST,DB_PWD,DB_NAME,DB_CHARSET);
?>
~~~
保存表单数据
~~~
<?php
sesstion_start();//打开会话设置
header(‘Content-Type:text/html’;charset=utf-8’);
include_once ‘config.inc.php’;
include_once ‘common.function.php’;
if(isset($_POST[‘ipt_jrating’])){
$record = array(
‘rating_title’ => $_POST[‘ipt_title’],
‘rating_value’ => $_POST[‘ipt_jrating’],
‘rating_content’ => $_POST[‘ipt_content’],
);
$id = $db->insert(‘rating’,$record);
if($id){
echo “<script>alert(‘评论成功!’)
window.location=’bookdetail.php’;</script>”;
}
}
$rating = getAvgRating();//获取评分平均值
?>
~~~
注：include_once和require_once的区别
include表示包含，找不到文件时继续向下执行；
require表示必须，找不到文件时停止向下执行
getAvgRating()函数的实现
~~~
function getAvgrating(){
global $db;
$row = $db->getOneRow(“SELECT IFNULL(AVG(rating_value),0) avgrating FROM ‘rating’ WHERE 1”);
return $row(“avgrating”);
}
~~~
显示评分记录
~~~
<span>评分：</span>
<?php echo $list[‘rating_value’]?>分;
~~~