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>