boxy-仿facebook的弹出窗体jquery插件

发布于,归属于jquery插件6个座位已被强势霸占! 共有1,236人围观    

boxy

点此下载

(有用到ajax,请从服务器端查看示例)

官方网址:http://onehackoranother.com/projects/jquery/boxy/#downloading

boxy是外观上仿照facebook的弹出窗体jquery插件,具有完备的API,美观易用。

初始化插件非常简单:

  1. $(function() {
  2.   $('.boxy').boxy();
  3. });
  1. <a href='index.html#foobar' class='boxy' title='Inline Content Demo'>Inline content (div#foobar)</a>

实现带有自定义按钮的弹出框

  1. $(function() {
  2.   $('#ask-actuator').click(function() {
  3.     Boxy.ask("How are you feeling?", ["Great", "OK", "Not so good"], function(val) {
  4.       alert("You chose: " + val);      
  5.     }, {title: "This is a question..."});
  6.     return false;
  7.   });
  8.   $('#alert-actuator').click(function() {
  9.     Boxy.alert("File not found", null, {title: 'Message'});
  10.     return false;
  11.   });
  12.   $('#confirm-actuator').click(function() {
  13.     Boxy.confirm("Please confirm:", function() { alert('Confirmed!'); }, {title: 'Message'});
  14.     return false;
  15.   });
  16. });

上面的代码演示了Boxy三个函数:

  • ask:自定义按钮
  • alert:单个按钮
  • confirm:双个按钮

Boxy的API非常健全,详见请官方页面说明。有不明白的可以给我留言。

(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

6个座位已被强势霸占!

  1. yanglu

    我下载的实例,在IE下浏览时显示不出来4个圆角,用firefox看却是正常的,真是奇怪。

  2. sunxinc

    Boxy.load(url,options)能不能传参数,怎么接收参数值。谢谢!

  3. 明河共影

    你好,单从其API来看,load有三个参数:type 传输类型,cache 是否缓存,filter 窗体移除效果。并没有发现data这个参数。你可以现在url上跟上参数,使用get方式传输

  4. 明河共影

    boxy,IE6无法显示圆角的问题解决方案:修改css文件的四个角的png图片路径。原demo的路径有些问题,在IE6下解析不了

  5. 婵娟

    Boxy.load(url,options)也是参数问题 难道真的传递不了? 郁闷

    明河共影回复于 2011年03月18日 8:38

    ?报错了?还是啥