jquery多功能彈出層外掛LightCase教程

李秀才發表於2016-02-23
jQuery

Lightcase 支援照片，視訊，HTML5 視訊，iframe，swf 和 ajax 呼叫。

演示地址：http://down.admin5.com/demo/code_pop/19/112/

博主暫時只用到了展示照片、展示隱藏的div、展示彈出層iframe，下面總結如下，以後用到了其他的，會補充到下面。

（1）如何展示圖片：

第一步：引入lightcase.js、lightcase.css和image，前提是引入了jquery檔案，這個大家都懂。

第二步：修改lightcase.css裡面的圖片路徑（loading圖片、關閉按鈕圖片等等）

第三步：給圖片加上超連結

<a id="imgheadBig" data-rel="lightcase" href="" title="">
   <img style="float:left ;width: 100%;height: 100%;" class="imghead" id="imghead"/>
</a>

id：屬性必須；

data-rel屬性必須，取值”lightcase“；

href圖片超連結（彈出層展示的圖片的src，此值務必在頁面載入完成時賦值）；

title:圖片標題，預設在圖片左下角顯示，可選。
第四步：初始化
$(document).ready(function($) {
   $('#imgheadBig').lightcase({transition : 'scrollTop'});
});
transition屬性設定過渡動畫：可選（"none"、"scrollTop"、“fade”、“elastic”）。

效果如下：



（2）如何展示隱藏的div：

省略前兩步。

第三步：給連結加上a標籤，href裡的值為#隱藏的div的id。

<a  data-rel="lightcase:example_group" href="#displayDivId">詳情</a>

第四步：初始化：

 $('a[data-rel="lightcase:example_group"]').lightcase({showSequenceInfo:false});

如此，點選連結的時候，便彈出層顯示隱藏的div。

（3）展示彈出層iframe

隱藏的div適合展示靜態的內容，當我們想要彈出的層有和伺服器作互動的時候，就要用上iframe了。

省略前兩步。

 第三步：給連結加上a標籤，href裡的值賦上巢狀頁面的路徑。

<a data-rel="lightcase:example_group"  href="pingjia.html?id="+json.data.list[i].id+" >去評價</a>

第四步：初始化即可。

 $('a[data-rel="lightcase:example_group"]').lightcase({showSequenceInfo:false});

注意事項：被巢狀的頁面，裡的按鈕或者連結寫樣式最好用id選擇器，不要用類選擇器也不要直接加style屬性，博主試過後兩種，樣式加上之後，按鈕或者連結點選就沒反應了。換到id選擇器才正常。坑了好久。

下面兩個圖是iframe巢狀頁面的2個div，根據情況顯示不同的div，有不同的操作。



彈出層iframe巢狀頁面內容如下：

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/pingjia.css">
		<script src="js/common.js"></script>
		<link rel="stylesheet" href="css/sweetalert.css">
        <script src="js/pingjia.js"></script>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#textareaStyle {
				margin-right: 150px;
				margin-left: 50px;
			}
			#submitStyle{
				margin-right: 150px;
				margin-left: 250px;
			}
		</style>
		<script type="text/javascript"> 

	     $(document).ready(function($) {
					loading("star1");
					loading("star2");
					loading("star3");
					ShowPingJiaInfo();
			});
			function getPingJiaId() {
				var originalUrl=location.href;
				var jingIndex=originalUrl.indexOf("#");
				if(jingIndex!=-1){
					originalUrl.substring(0,jingIndex);
				}
				var pidIndex = originalUrl.indexOf("=");
				if (pidIndex != -1) {
					return originalUrl.substring(pidIndex + 1);
				}
			}
			var PinjiaInfo=serverAddress + "/api/manueval/ansy/listManuevalByMid.shtml";
			var ObglworkSpeed="";
			var ObglserviceAltitude="";
			var ObglCompleteQuality=""; 
			var ManuevalId="";
			//顯示評價資訊
			function ShowPingJiaInfo(){
				ManuevalId=getPingJiaId();
				$.ajax({
					type:"post",
					url:PinjiaInfo,
					async:true,
					xhrFields: {
								withCredentials: true
					},
					crossDomain: true,
					data:{
						"mid":ManuevalId
					},
					success:function(json){
						if(json.code==1){
							//說明已經評論
							$("#workSpeed").empty();
							$("#serviceAltitude").empty();
							$("#CompleteQuality").empty();
							
							ObglworkSpeed="";
							ObglserviceAltitude="";
							ObglCompleteQuality="";
							$("#pingjiaDiv").css("display","none");
							$("#PingJiaComplete").css("display","block");
								
								$("#createTime").text(json.data[0].createTime.substring(0,19));
								//工作速度
								var workSpeedValue=json.data[0].speed;								
								
								for (var i=0;i<workSpeedValue;i++) {
									 ObglworkSpeed="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed;
									
								}
								$("#workSpeed").append(ObglworkSpeed);
								
								//服務態度
								var serviceAltitudeValue=json.data[0].serviceAtt;								
								
								for (var i=0;i<serviceAltitudeValue;i++) {
									 ObglserviceAltitude="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed;
									
								}
								
                             $("#serviceAltitude").append(ObglserviceAltitude);
								
								//完成質量
								var serviceCompleteQuality=json.data[0].quality;								
								
								for (var i=0;i<serviceCompleteQuality;i++) {
									 ObglCompleteQuality="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed;
									
								}
								$("#CompleteQuality").append(ObglCompleteQuality);
								$("#PingJiaText").text(json.data[0].content);
								
								if(json.data[0].level==0){
									$("#levelcom").text("好評");
								}
								if(json.data[0].level==1){
									$("#levelcom").text("中評");
								}
								if(json.data[0].level==2){
									$("#levelcom").text("差評");
								}
						
						}
						else{
                  	      $("#pingjiaDiv").css("display","block");
						   $("#PingJiaComplete").css("display","none");
						}
						
					},
					error:function(json){
					}
				});
			}
			
			var serverPinjia=serverAddress + "/api/manueval/addManueval.shtml";
			//新增評價
			function addManueval(){
				ManuevalId=getPingJiaId();
				var sessionStorage=window.sessionStorage;
				var user=JSON.parse(sessionStorage.getItem("user"));
				if(user.id!=null){
					jQuery.support.cors = true;
					$.ajax({
					type:"post",
					url:serverPinjia,
						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
					data:{
						"level":$("#level").val(),
						"speed":$("#hiddenstar1").val(),
						"serviceAtt":$("#hiddenstar2").val(),
						"quality":$("#hiddenstar3").val(),
						"content":$("#creditContent").val(),
						"mid":ManuevalId,
						"uid":user.id
					},
					success:function(json){
						if(json.code==1){
							swal("評價成功","感謝您的評價","success");
						}
						else {
							swal("提示","請勿重複提交！","warning")
						}
					},
					error:function(json){
					}
					
					
				});
				}
				
			}
</script>
</head>
<body>
<div id="pingjiaDiv" style="display: none;">
	<div style="float:left">僱主對威客的評價：</div> 
	<div>
	<select id="level" style="float:left">
	  <option value="0">好評</option>
	  <option value="1">中評</option>
	  <option value="2">差評</option>
	  </select>
	  </div>
	  <br/>
	 <div style="float:left;margin-left: -150px;">對該稿件評價：</div> 
	<div id="star1" style="width:200px;float:left;margin-left: -150px;">
		<span>工作速度</span>
		<ul>
			<li name="li"><a href="javascript:;">1</a></li>
			<li name="li"><a href="javascript:;">2</a></li>
			<li name="li"><a href="javascript:;">3</a></li>
			<li name="li"><a href="javascript:;">4</a></li>
			<li name="li"><a href="javascript:;">5</a></li>
		</ul>
		<span></span>
		<p></p>
		</div>
		<div id="star2" style="float:left;width:200px">
			<span>完成質量</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
		</ul>
		<span></span>
		<p></p>
		</div>
		<div id="star3" style="float:left;width:200px">
			<span>完成質量</span>
		<ul>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
		</ul>
		<span></span>
		<p></p>
		</div>
		<div style="width:50px;height:50px;">
			<input type="hidden" value="" id="hiddenstar1">
			<input type="hidden" value="" id="hiddenstar2">
			<input type="hidden" value="" id="hiddenstar3">
		</div>
<div>
		<div id="textareaStyle"><textarea id="creditContent" maxlength="200" style="width: 300px;height: 150px;"></textarea></div>
		
		<div id="submitStyle"><a href="#" onclick="javascript:addManueval()">提交</a></div>
</div>
</div>
<p></p>

<div id="PingJiaComplete" style="border-radius: 8px;padding-left: 15px; width:740px;display: none;;border: solid 1px black;background-color:white ;">
			<div id="levelcom" style="width: 100%;float: left;"></div>
			<div>
			評論時間:
			<label id="createTime"></label>
			</div>
			<div style="width: 33%;float: left;">
			<label style="float: left;">工作速度：</label>
			<label id="workSpeed"></label>
			</div>
			<div style="width: 33%;float: left;">
			<label style="float: left;">服務態度：</label>
			<label id="serviceAltitude"></label>
			</div>
			<div style="width: 33%;float: left;">
			<label style="float: left;">完成質量：</label>
			<label id="CompleteQuality"></label>
			</div>
			<div id="PingJiaText" style="width: 100%; height: 100px;text-indent:10px; background-color: #7ECFF4;float: left;margin-top: 15px;">
			</div>
</div>
</body>
</html>


相關文章