zoukankan      html  css  js  c++  java
  • jQuery插件---轻量级的弹出窗口wBox

    Box Demo

    wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……

    • 背景透明度可以根据实际情况进行调节,甚至不设置背景
    • 可以根据需要添加wBox标题
    • 支持设置窗口位置,默认为在中心显示
    • 支持callback函数
    • 支持html内容自定义
    • img灯箱看图功能
    • 支持在wBox显示#ID的内容
    • 支持Ajax页面内容
    • 支持设置背景,不设置背景
    • 支持wBox拖拽功能
    • ESC键,或者在背景上双击即可关闭wBox
    • .wBoxClose的内容click可以关闭wBox,无论是组装的html,还是隐藏的html,甚至于iframe的内容中的.wBoxClose

    演示部分:

    设置名字的wBox

    代码:
    $("#wbox1").wBox({
    title: "Test Title Name",
    html: "点击弹出设置名字的wBox"
    });
    点击弹出设置名字的wBox

    背景为透明的wBox

    代码:
    $("#wbox2").wBox({opacity:0,html:'点击弹出背景为透明的wBox'});
    点击弹出2背景为透明的wBox

    弹出无背景wBox

    代码:
    $("#wbox3").wBox({overlay:false,html:'点击弹出无背景wBox'});
    点击弹出无背景wBox

    测试图片href

    代码:
    $('.wbox').wBox();
    测试图片href

    隐藏id为#info的层

    代码:
    $('.wbox').wBox();
    隐藏id为#info的层

    可拖拽的#wBoxUL层

    代码:
    $('#drag').wBox({drag:true,title:'wBox功能简介部分的层'});
    可拖拽的#wBoxUL层

    img灯箱连看

    代码:
    $("#imgA").wBox({images:['001.jpg','002.jpg','003.jpg','004.jpg','005.jpg'],isImage:true});
    测试img灯箱连看

    iframe百度

    代码:
    $("#isFrame").wBox({isFrame:true,iframeWH:{800,height:400}});
    测试iframe baidu

    本地iframe 自适用高度

    代码:
    $("#isFrame2").wBox({isFrame:true});
    本地iframe 自适用高度

    设置位置为left300 top 100

    代码:
    $('#setPos').wBox({setPos:true,left:300,top:100,html:'设置位置为left300 top 100'});
    设置位置为left300 top 100查看效果要滚动到顶部100px处哦~

    Ajax加载内容

    代码:
    $("#ajax").wBox();
    ajax 1.html

    没有标题的弹出框

    代码:
    $("#noTitle").wBox({noTitle:true});
    没有标题的弹出框

    利用callback添加地图的wBox

    代码:
    var maplet=null;
    oo=false;
    var callback=function(){
    maplet = new Maplet('myMap');
    maplet.centerAndZoom(new MPoint('HEUIDVZVVHUEEU'),8);
    maplet.addControl(new MStandardControl({view: {pan:false,ruler: false}})); 
    }
    $("#map").wBox({
    title:'普加地图--可拖拽',
    html:"
     
    ",
    callBack:callback,drag:true});
    加载地图-利用callback函数
      • 首先下载wBox文件,然后将wBox中的
      • 引入wbox.js文件
      • 引入wbox.css文件
      • 注意:wBox源代码文件夹中的图片要跟js,css放在相同的目录下
  • 相关阅读:
    JavaScript高级-----8.函数进阶(2)
    JavaScript高级-----7.函数进阶(1)
    2014-10-18 来美半个月
    修手机记
    圆梦美利坚之三:租房记
    圆梦美利坚之二:买机票记
    Hadoop 停止Job
    IIS应用程序池数目
    HTML5 microdata
    Java sql helper[转]
  • 原文地址:https://www.cnblogs.com/zcm123/p/3891784.html
Copyright © 2011-2022 走看看