下面給大家介紹三個最近在學也比較實用的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’]?>分; ~~~ ?