注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery多功能提示弹窗画廊插件jBox

UI fishcity 1940浏览

多功能插件jBox

jBox是一款多功能且强大灵活的jquery插件,使用jBox可以轻松的实现工具提示tooltip(包括拖拽功能)、通知、弹窗、图片画廊等多种功能,jBox可以脱离jquery库,使用原生的JS操作,也可与jquery相结合。

jquery插件实例:使用方法

引入核心文件,jquery2.1或是1.11版本

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="source/jBox.min.js"></script>
<link href="source/jBox.css" rel="stylesheet">

tooltip提示

$('.tooltip').jBox('Tooltip');
<span class="tooltip" title="My first tooltip">Hover me!</span>
<span class="tooltip" title="My second tooltip">Hover me!</span>

弹窗效果

new jBox('Modal', {
    width: 300,
    height: 200,
    attach: $('#myModal'),
    title: '这是容器标题',
    content: '<i>这是内容</i>'
});
<div id="myModal">Click me to open a modal window!</div>

确认窗口

new jBox('Confirm', {
    confirmButton: 'Do it!',
    cancelButton: 'Nope'
});
<span onclick="doit()" data-confirm="Do you really want to do this?">Click me!</span>
<a href="http://www.jqcool.net" data-confirm="Do you really want to leave this page?">Click me!</a>

通知

$("#myNotice").click(function(){
		 new jBox('Notice', {
   		 content: 'Hurray! A notice!'
		});
	})
 <span style="cursor: pointer" id="myNotice">点击我出现通知</span>

图片画廊

new jBox('Image');
  <a href="image/CIMG4547_large.jpg" title="My title 1" data-jbox-image="gallery1"><img src="image/CIMG4547_small.jpg" alt=""></a>
<a href="image/CIMG4778_large.jpg" title="My title 2" data-jbox-image="gallery1"><img src="image/CIMG4778_small.jpg" alt=""></a>
<a href="image/CIMG6771_large.jpg" title="My title 3" data-jbox-image="gallery1"><img src="image/CIMG6771_small.jpg" alt=""></a>

更多细节可下载实例参考

转载请注明:jQ酷 » jquery多功能提示弹窗画廊插件jBox

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。