jquery多功能弹出层插件LightCase笔记
2016-02-23 13:43
731 查看
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图片、关闭按钮图片等等）
第三步：给图片加上超链接
id：属性必须；
data-rel属性必须，取值”lightcase“；
href图片超链接（弹出层展示的图片的src，此值务必在页面加载完成时赋值）；
title:图片标题，默认在图片左下角显示，可选。
第四步：初始化
效果如下：
（2）如何展示隐藏的div：
省略前两步。
第三步：给链接加上a标签，href里的值为#隐藏的div的id。
第四步：初始化：
如此，点击链接的时候，便弹出层显示隐藏的div。
（3）展示弹出层iframe
隐藏的div适合展示静态的内容，当我们想要弹出的层有和服务器作交互的时候，就要用上iframe了。
省略前两步。
第三步：给链接加上a标签，href里的值赋上嵌套页面的路径。
第四步：初始化即可。
注意事项：被嵌套的页面，里的按钮或者链接写样式最好用id选择器，不要用类选择器也不要直接加style属性，博主试过后两种，样式加上之后，按钮或者链接点击就没反应了。换到id选择器才正常。坑了好久。
下面两个图是iframe嵌套页面的2个div，根据情况显示不同的div，有不同的操作。
弹出层iframe嵌套页面内容如下：
演示地址：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 JS 正确的比较两个数字大小的方法
- jQuery中get()和eq()的区别
- 文件上传利器JQuery上传插件Uploadify
- jQuery.extend 函数详解
- checkbox的只能选中一个，div下checkbox的遍历
- JQUERY表单暂存功能插件分享
- jQuery实现返回顶部功能
- 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
- jquery基础
- jQuery .bind() .live() .delegate() .on() .off() 方法不同与联系
- 教你如何终止JQUERY的$.AJAX请求
- jquery中的替换符合条件的字符串
- JQUERY的AJAX请求缓存里的数据问题处理
- jQuery中的$(window).load()与$(document).ready()
- Jquery获取select标签的值、文本方式
- jquery hover(overListener, outListener) || bind('mouseover',methodA).bind('mouseout',methodB)
- jQuery监听文本框值改变触发事件（propertychange）
- Mootools遮罩层练习(原为网上的jquery写法)
- jQuery.Validate验证库
- JQuery给动态加载的节点绑定有效事件