konakona
Dream Afar.
konakona
Jquery轻便型弹出框 “Boxy”易用教程,以及修复display:block问题

转贴请著名原处!本文为http://blog.crazyphper.com/所属!

boxy – Facebook-like dialog/overlay, with frills

这个插件已经成功在Jquery UI库里登陆了:http://plugins.jquery.com/project/boxy

Overview

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.

Here’s an example, taken from the old feedback forms on my project pages:

http://onehackoranother.com/projects/jquery/boxy/example.png

Downloading

Package

Package downloads are available from the jQuery project page. If you just want a zip file, here’s a direct download link.

此窗口的特色有:可移动、同时开启多个弹出窗口、显示本页隐藏div、AJAX、iframe、返回数据类型给回调函数等等。本人极力推荐此插件。

使用方法:

这是一个基于jQuery的api,使用它,只需要引入jQuery库及自身js和css即可。(官方推荐1.2*jQuery,实际上1.3也可以用,1.4没有测试。)

<link href="styles/css/boxy.css" rel="stylesheet" type="text/css" />
<script src="styles/js/jquery.boxy.js" language="javascript" type="text/javascript"></script>
<script src="styles/js/jquery.js" language="javascript"  type="text/javascript"></script>

官方推荐的目录格式大致是这样:

styles/js/js文件

styles/css/css文件

styles/images/图片们

js没什么要求,主要是css控制了图片是”../images/图片名”,你可以随意修改为你想要的目录格式。

我觉得挺好用的,使用了一个下午,没发现什么不好的地方。至于使用它则只需要一句话……

<script>

$(document).ready(function() {

$('.boxy').boxy();

});

</script>

然后给想要使用boxy的元素加一个class即可。

以下以一个弹出本页div内容为例:

<a class="boxy" href='#add' title="创建新相册">创建新相册</a>

<div id="add"   style="display:none">

 请添加图片:

<input type="text" name="">

<input type="file">

<input type="submit" value="提交">


</div>

效果大至如图:

https://blog.img.crazyphper.com/2010/04/弹出.jpg

下载地址

作者首页 (我非常喜欢他的首页)

项目文档

DEMO地址

中文文档(译文)


今天使用发现一个问题,此弹出窗会对style、div之类的首先添加一个boxy-content的class、再添加一个display:block,使得许多css失效。

解决方法:

打开boxy.js,找到setContent方法里:

newContent = jQuery(newContent).css({display: ‘block’}).addClass(‘boxy-content’);

这句话改为:
newContent = jQuery(newContent).addClass(‘boxy-content’);

oxy – Facebook-like dialog/overlay, with frills

赞赏
首页      程序开发      前端技术      Jquery轻便型弹出框 “Boxy”易用教程,以及修复display:block问题
https://secure.gravatar.com/avatar/3b712b34a0e1b689cfb524c9c6bcdc47?s=256&r=g

团哥

文章作者

继续玩我的CODE,让别人说去。 低调,就是这么自信。

发表评论

textsms
account_circle
email

konakona

Jquery轻便型弹出框 “Boxy”易用教程,以及修复display:block问题
boxy - Facebook-like dialog/overlay, with frills。 已应用于项目中。
扫描二维码继续阅读
2010-04-07