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>

jQuery彈出層外掛popbox
2014-08-07
jQuery
jQuery拖拽的彈出層效果
2018-01-09
jQuery
寫了一個簡單好用的彈出層外掛
2016-08-11
彈出框外掛layer使用
2017-05-31
AngularJS教程十七—— 彈出層元件
2016-02-02
AngularJS元件
jquery智慧彈出層，自動判斷位置
2015-03-16
jQuery
Lightbox_me彈出層外掛使用說明簡單介紹
2017-04-05
jQuery外掛
2010-10-11
jQuery
彈幕外掛
2019-06-14
jQuery跟隨滑鼠移動的彈出層效果
2017-10-31
jQuery
jquery智慧彈出層，自己主動推斷位置
2016-04-22
jQuery
jQuery點選顯示彈出層例項程式碼
2017-02-26
jQuery
jquery 外掛站
2013-06-18
jQuery
bootstrap – 彈出層
2016-09-06
boot
jquery外掛jquery TagBox（建立標籤輸入框）教程
2016-02-23
jQuery
10個很棒的 jQuery 外掛和製作教程
2014-08-26
jQuery
10個剛出爐的jQuery特效外掛
2011-05-16
jQuery特效
第 16 章彈出框和警告框外掛
2016-04-24
JQuery模板外掛-jquery.tmpl
2021-09-09
jQuery
視訊彈幕外掛
2016-09-13
jQuery的外掛列表
2019-05-11
jQuery
JQuery蜂巢圖外掛
2018-08-01
jQuery
jQuery外掛推薦
2017-03-09
jQuery
jquery分頁外掛
2016-06-24
jQuery
jquery外掛寫法
2016-02-16
jQuery
vue 外掛開發教程與釋出
2018-04-25
Vue
12款優秀jQuery Ajax分頁外掛和教程
2012-09-03
jQuery
jQuery表單外掛jQuery.form
2010-11-17
jQueryORM
jQuery實現的自定義可以拖動的彈出層效果
2017-03-28
jQuery
jQuery地圖熱點效果-滑鼠經過彈出提示層資訊
2015-03-14
jQuery地圖
jquery省市區三級聯動外掛CitySelect教程
2016-02-20
jQuery
jQuery擴充套件外掛
2018-08-22
jQuery套件
jQuery外掛擴充套件
2018-08-19
jQuery套件
jquery日曆外掛SimpleCalendar
2017-01-24
jQuery
jQuery外掛開發模式
2016-08-01
jQuery模式
jquery--uploadify 外掛
2016-07-24
jQuery
240個jquery外掛（轉）
2016-04-03
jQuery
jQuery layout 外掛屬性
2014-07-30
jQuery

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

相關文章