MooBox 基于Mootools的对话框插件

一方面出于对mootools的兴趣(虽然没有jQuery那么hot), 另一方面,也是想为mootools的推广添一点小小的力量,虽然这微不足道.

加上前面发布过的2个mootools组件, 写下来总的感觉是:

在效果实现方面, 确实用jQuery编写要比用mootools来的容易快速的多, 因为在很多细节问题上jQuery已经为我们考虑了.比如mootools-core没有类似slideUp/Down这样的方法, 如果不引入扩展库的话,你得自己用Fx类来实现, 而jQuery里只是很简单的调用slideUp, slideDown或者slideToggle, 再比如在mootools中,你想取得一个隐藏(display:none)元素的尺寸信息, 得写个几条代码, 而在jQuery中你完全可以忽略元素是否隐藏这个问题, 它已经帮你搞定了. 再比如jQuery本身已经为用户提供了丰富的选择器, 这一点尤为方便.mootools的话稍微欠缺一些.

我这里并不是说mootools如何不行,因为本身mootools和jquery设计的初衷就是不同的, 如果你想更多的了解细节问题,那么用mootools作为基础库还是不错的.

下面回到文章正题, 我先发两个Demo截图.

完整显示:

收缩的状态


如果你对此组件有兴趣, 可以点击下载, MooBox 源码均未压缩,其中doc.html为组件说明文档,demo.html是个比较完整的示例.

注意一个样式的问题,希望你的页面中事先引入了类似reset.css和定义基础样式的css(比如字体,颜色,行高等).

最后, 希望对你能有所帮助 : ) 有问题可以留言讨论

赞 (0)

相关推荐

  • MooBox 基于Mootools的对话框插件

    MooBox 基于Mootools的对话框插件

    一方面出于对mootools的兴趣(虽然没有jQuery那么hot), 另一方面,也是想为mootools的推广添一点小小的力量,虽然这微不足道. 加上前面发布过的2个mootools组件, 写下来总的感觉是: 在效果实现方面, 确实用jQuery编写要比用mootools来的容易快速的多, 因为在很多细节问题上jQuery已经为我们考虑了.比如mootools-core没有类似slideUp/Down这样的方法, 如果不引入扩展库的话,你得自己用Fx类来实现, 而jQuery里只是很简单的调用

  • jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

    本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法.分享给大家供大家参考,具体如下: 大家都知道,ArtDialog是一款非常不错的.轻量级的.基于jQuery的对话框插件,深受大家的追捧,大伙可以到一下地址进行下载: https://code.google.com/p/artdialog/ https://github.com/aui/artDialog 截止到2014年9月17日,已经有几个重大的版本v4.1.7.v5.0.4和v6.0.2,其中4.x

  • jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

    jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

    插件说明 - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Safari.Opera 等主流浏览器. 使用授权 - jBox 永久免费使用,但是必须保留相关的版权信息.如果有好的建议,可以直接在下面留言. 版本:2.3 大小:19.8k 下载:点击下载 在线demo:http://www.kudystudio.com/jbox/jbox-demo.html [2011-11

  • 基于原生JS封装的Modal对话框插件的示例代码

    基于原生JS封装Modal对话框插件,具体内容如下所示: 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ModalPlugin({ //提示的标题信息 title:'系统提示', //内容模板 字符串 /模板字符串/DOM元素对象 template:null, //自定义按钮信息 buttons:[{ //按钮文字 text:'确定', click(){ //this:当前实例 }

  • Mootools 图片展示插件(lightbox,ImageMenu)收集集合

    Mootools 图片展示插件(lightbox,ImageMenu)收集集合

    1.MultiBox 一个lightbox支持的内容格式包括:图片,Flash,视频,mp3,html. 主页:http://www.phatfusion.net/multibox/ 下载:http://www.phatfusion.net/multibox/multibox.zip 示例:http://www.phatfusion.net/multibox/ 2.ImageMenu 一个图片展示控件.当鼠标移到某一张图片时将展开整张图片. 主页:http://www.phatfusion.ne

  • 基于twbsPagination.js分页插件使用心得(分享)

    项目中之前需要分页插件,以前用的都是单纯叫做pagenation.js的插件,但是这次集成的时候,项目组一个孩纸用了这个插件,结合网上的例子琢磨了一把.其实大致流程都是相同的,主要将我在用这个分页插件的一些心得分享出来: 1.分页插件引入html中需要: bootstrap.css 分页插件js 自己写的分页的样式css[如果不用,也可以直接用bootstrap所带的分页css.] 使用jquery可以引入jquery.js html中: <script type="text/javasc

  • 基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. 1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="moda

  • JS基于Mootools实现的个性菜单效果代码

    JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码.分享给大家供大家参考,具体如下: 这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools.1.11.js一并下载到本地.注意,如果看不到效果请刷新网页. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mootools-style-menu-codes/ 具体代码如下: <!DOCTY

  • qTip 基于JQuery的Tooltip插件[兼容性好]

    qTip 基于JQuery的Tooltip插件[兼容性好]

    主页:http://craigsworks.com/projects/qtip/ 下载:http://craigsworks.com/projects/qtip/download 示例:http://craigsworks.com/projects/qtip/ qTip是一个基于JQuery的Tooltip插件.它几乎支持所有的主流浏览器例如: Internet Explorer 6.0+ Firefox 2.0+ Opera 9.0+ Safari 3.0+ Google Chrome 1.0

  • 基于jQuery.Hz2Py.js插件实现的汉字转拼音特效

    可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基于jQuery实现汉字转换成拼音代码</title> <

随机推荐