下面给大家介绍三个最近在学也比较实用的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’]?>分;
~~~
- 前言
- Jquery Mobile入门笔记
- 豆瓣API使用介绍及通过ajax跨域获取url的json数据的方法
- jQuery插件实战:slider.js/jquery.validate/jRating介绍
- HTML5能为我们带来什么
- js字符串主要操作方法
- jquery实现全文检索与鼠标滑过工具栏特效
- HTML5移动开发常用——XML基本知识介绍
- HTML5移动开发实战必备知识——本地存储(1)
- HTML5本地数据库详解
- 前端素材解析—利用linear制作复杂的边框效果
- HTML5开发移动web应用—JQuery Mobile(3)-列表
- Angular.js回顾+学习笔记(1)【ng-app和ng-model】
- HTML5开发移动web应用—JQuery Mobile(4)-事件
- CSS定位中的必须深究的常用技法
- Angular.js中的指令——易懂全解析
- 实践中学习AngularJS中的表单
- 高效利用Angular中内置服务
- 利用Angular.js从PHP读取后台数据