jQuery弹窗组件 colorbox

最新推荐文章于 2024-11-03 14:56:04 发布

原创最新推荐文章于 2024-11-03 14:56:04 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件

技术博客专栏收录该内容

11 篇文章

订阅专栏

在开发微信端wap网站时，由于浏览器限制，选用jQuery插件colorbox解决弹窗问题。colorbox基于jQuery，需引入jquery.js、jquery.colorbox.js和colorbox.css。通过设置不同参数，如无过渡动画、inline为true，实现图层功能。在微信环境中，colorbox表现良好，提供了一种理想的弹窗解决方案。

公司开发微信端的wap网站，因为微信浏览器的限制，对很多jquery组件支持的都不是很好，弹窗总是有这样那样的问题，试验了好几个之后，最后使用了colorbox这款jquery插件
github：https://github.com/jackmoore/colorbox

将源码clone至本地，代码目录如下

colorbox ➤ ls 
LICENSE.md             例子1               i18n
README.md              例子2               jquery.colorbox-min.js
bower.json             例子3               jquery.colorbox.js
colorbox.ai            例子4               package.json
content                例子5

它是基于jquery开发的，使用的前提是
包含，jquery.js，jquery.colorbox.js，以及样式文件colorbox.css
例子1到5是作者写的例子，包含不一样的样式文件，如果你觉得哪个好看，就把哪个里面的css文件包含进来即可，附上我的调用代码

<link rel="stylesheet" media="all" href="/assets/weixin/colorbox.css" />
<script src="/assets/weixin/jquery.js"></script>
<script src="/assets/weixin/colorbox.js?"></script>

有了这三个文件，就可以来写浮层了，先把它的常用属性列出

transition "elastic" 
过渡效果，可以是"elastic", "fade", or "none"

speed 350 
设置过渡效果的持续时间，毫秒

href false 
这个用来设置一个锚标记的值或者一个不是锚的元素，例如图像或者表单的按钮
例子:$('h1').colorbox({href:"welcome.html"})

title false 
这可以为Colorbox设置一个标题

rel false 
这个可以根据元素的rel属性设置要显示的元素集合，也可以覆盖一个存在的rel属性
例子:$('#例子 a').colorbox({rel:'group1'})

width false 
设置宽度，包括边框和按钮
例子: width: "100%", "500px", or 500

height false 
设置高度，包括边框和按钮
例子: "100%", "500px", or 500

innerWidth false
这个可以设定一个固定的内大小，包括边框和按钮 
例子: "50%", "500px", or 500

innerHeight false 
这个可以设定一个固定的内高度，包括边框和按钮
例子: "50%", "500px", or 500

initialWidth 300 
设置初始化宽度

initialHeight 100 
设置初始化高度

maxWidth false 
设置内容的最大宽度
例子: "100%", 500, "500px"

maxHeight false 
设置内容的最大高度
例子: "100%", 500, "500px"

scalePhotos true 
如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置，
Colorbox会缩放图片以使用边框

scrolling true 
如果是false,Colorbox不会为了溢出元素设置滚动条

iframe false 
如果是true，元素会在Iframe中显示

inline false
如果是true,jQuery选择器可以用来选择要显示的元素
例子: $("#inline").colorbox({inline:true, href:"#myForm"});

html false
这个是直接让你显示HTML代码
例子: $.fn.colorbox({html:'Hello'});

photo false 
如果为true，ColorBox只会把元素按照图片显示，防止类似photo.php?pic=1这样的连接被误认为是网页

opacity 0.85 
遮罩层不透明度 从0-1之间取值

open false 
如果为true,ColorBox会自动开启

preloading true 
如果为True,ColorBox会自动预载要显示图片

overlayClose true 
为true单击遮罩层就可以把ColorBox关闭

slideshow false 
为True，会自动滚动图片

slideshowSpeed 2500 
设置时间，毫秒

slideshowAuto true 
为tuue，滑动会自动开始

slideshowStart "start slideshow" 
开始自动滑动按钮的文本

slideshowStop "stop slideshow" 
停止自动滑动按钮的文本

current "{current} of {total}" 
文本内容：现在正在显示的元素序号

previous "previous" 
“上一个”按钮的文本

next "next" 
“下一个”按钮的文本

close "close" 
“关闭”按钮的文本

说了这么多，开始使用，实现我的图层，初始化图层，根据class名绑定，设置过度动画为无，inline为true，高和宽为100%

$(".inline").colorbox({transition:"none", inline:true, height:"100%", width:"100%"});

页面调用标签为a标签，href为ID为inline_content的内容

<a class="inline" href="#inline_content">
      <div class="tour_txt_box fl container-fliud">
        <%= text_field '', 'city', placeholder: '请输入地区，仅限于北京，例如朝阳区',  class: "fl tour_txt col-sm-11 col-xs-10", readonly: 'readonly', datatype: "s", nullmsg: "请选择所在区域", id: "wedding_area" %>
<a href="#inline_content" class="fl col-sm-1 col-xs-2 inline"><%= image_tag "icon_rightarrow.png"%></a>
      </div>
</a>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'></div>
</div>

先把需要弹窗的内容，赋值到id为inline_content的div中，然后一切就OK了

效果图
这里写图片描述

默认的关闭按钮是在整个浮层的右下方，修改到右上方需要更改css文件，增加top：0 属性，关闭按钮就会跑到右上方了

#cboxClose {top:0; border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

经测试，在微信浏览器体验也很好，终于告一段落，周末愉快。