企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
下面给大家介绍三个最近在学也比较实用的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’]?>分; ~~~