firstebox 1.1

firste 编写 最后更新时间 2009年6月17日

 

firstebox是一个jquery插件，支持jquery 1.2.3以上版本。熟悉thickbox的就知道此插件是做什么用的了，也就很容易入手此插件了，使用方法和thickbox几乎一样。此插件参考了thickbox，而且照搬了大部分代码，可以说是thickbox的升级版，也可以说是thickbox的修改版。除实现thickbox的所有功能外，可以对窗口进行拖拽操作，也增加了lightbox的图片操作效果(此处参考了lightbox)。

运行环境(已测试)： IE 6.0，IE 7.0,Firefox 3.0.5, Opera 8.54

下载此插件 下载演示包 留言

 

描述:

这是firstebox的一个简单实例，这个例子展示了在中放置一张图片（请看演示）。

使用方法:
  • 创建一个链接 (<a href>)
  • 给创建的链接一个class属性，其值是：firstebox (class="firstebox")
  • 在href属性中指定一个张图片地址(.jpg .jpeg .png .gif .bmp)
点击图片查看效果:

<a href="images/0.jpg" class="firstebox" title="图片演示/www.firste.cn"><img src="images/0.jpg" width="100" height="60" /></a>
描述:

这个例子和单张图片差不多，但他允许使用rel属性使多张图片成为一组，在firstebox里导航。这种完美的使用方法适用于图片集。

使用方法:
  • 创建一组链接 (<a href>)
  • 给创建的每个链接一个class属性，其值是：firstebox (class="firstebox")
  • 在href属性中指定一个张图片地址(.jpg .jpeg .png .gif .bmp)
  • 给每一个链接一个相同的rel值。（比如：rel="gallery-plants"）
重点提醒:

当你打开一个firstebox图片集的时候, 可以点击链接也可以通过键盘的向左向右来查看下一张图片。

点击一张图片:

<a href="images/2.jpg" class="firstebox" rel="gallery" title="图片演示/www.firste.cn"><img src="images/2.jpg" width="100" height="60"/></a> 

<a href="images/3.jpg" class="firstebox" rel="gallery" title="图片演示/www.firste.cn"><img src="images/3.jpg" width="100" height="60" /></a>
<a href="images/4.jpg" class="firstebox" rel="gallery" title="图片演示/www.firste.cn"><img src="images/4.jpg" width="100" height="60" /></a>
<a href="images/5.jpg" class="firstebox" rel="gallery" title="图片演示/www.firste.cn"><img src="images/5.jpg" width="100" height="60" /></a>
<a href="images/6.jpg" class="firstebox" rel="gallery" title="图片演示/www.firste.cn"><img src="images/6.jpg" width="100" height="60" /></a>
<a href="images/7.jpg" class="firstebox" rel="gallery" title="图片演示/www.firste.cn"><img src="images/7.jpg" width="100" height="60" /></a>
<a href="images/8.jpg" class="firstebox" rel="gallery" title="图片演示/www.firste.cn"><img src="images/8.jpg" width="100" height="60" /></a>
<a href="images/9.jpg" class="firstebox" rel="gallery" title="图片演示/www.firste.cn"><img src="images/9.jpg" width="100" height="60" /></a>
描述:

页面中的内嵌内容，隐藏的或是显示的均可以放置在firstebox中。

使用方法:
  • 创建一个链接(<a href>)
  • 给创建的这个链接一个class属性，其值是：firstebox (class="firstebox")
  • 给链接的href属性设置为: #FB_inline
  • 在href属性的值#FB_inlineIn后面追加一下字符: 
    ?height=300&width=300&inlineId=fcontent
  • 根据你的实际需要更改height, width, 和 inlineId的值（这里的inlineID就是包含你想显示在firstebox上的内容的容器的id；height,width的值如果位于0-1之间，将按照浏览器对应的百分比来显示打开的firstebox）。
  • 当然你也可以在参数字符串中加 modal=true(比如. #FB_inline?height=155&width=300&inlineId=hiddenfcontent&modal=true) 这样当关闭firstebox时会调用firstebox内部的一个fb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击“关闭”才能关闭firstebox。
重点提醒:

如果内嵌在firstebox的内容多于firstebox显示的尺寸，一个滚动条会出现。请确认firstebox的尺寸和内容的匹配避免出现滚动条而显示全部内嵌内容。也就是说，如果不想要滚动条，你可以增加firstebox的宽和高直到内嵌的内容不需要滚动条就能全部显示。

显示隐藏模式的内容

据朝鲜中央通讯社报道，这3项措施是：新近提取的钚将全部实现武器化；开始进行浓缩铀作业；朝鲜将把美国及其追随者的封锁视为战争行为，并将采取坚决的军事对应措施。

<input alt="#FB_inline?height=300&width=400&inlineId=fcontent" title="显示指定容器中的文本" class="firstebox" type="button" value="显示" />

<a href="#FB_inline?height=205&width=300&inlineId=hidefcontent&modal=true" class="firstebox">显示隐藏模式的内容 </a>
描述:

在firstebox中用 iFramed打开 URL.

使用方法:
  • 创建一个链接 (<a href>)
  • 给创建的这个链接一个class属性，其值是：firstebox (class="firstebox")
  • 给链接的href属性指向一个你希望在firstebox显示的URL。
  • href属性的URL后面追加上以下字符参数： 
    ?KeepThis=true&FB_iframe=true&height=400&width=600
  • 根据你的实际需要改变上面的参数字符。height,width的值如果位于0-1之间，将按照浏览器对应的百分比来显示打开的firstebox
  • 当然你也可以在参数字符串中加 modal=true
    (比如：?KeepThis=true&FB_iframe=true&height=400&width=600&modal=true) 这样当关闭firstebox时会调用firstebox iframe (self.parent.fb_remove())内部的一个fb_remove()函数。在演示中查看“打开iFrame Modal的演示”则要求点击“关闭”才能关闭firstebox。
重点提醒:

所有其他参数字符都必须在FB_iframe 参数之前。URL中所有"FB" 之后的将被移除。

<a href="demofile/iframe.html?keepThis=true&amp;FB_iframe=true&amp;height=250&amp;width=400" title="通过框架打开指定的url" class="firstebox">例子1</a>
<a href="demofile/iframe1.html?keepThis=true&amp;FB_iframe=true&amp;height=0.6&amp;width=0.5" title="通过框架打开指定的url" class="firstebox">例子2</a>
<a href="demofile/iframe2.html?placeValuesBeforeFB_=savedValues&amp;FB_iframe=true&amp;height=400&amp;width=300&amp;modal=true" title="通过框架打开指定的url" class="firstebox">iFrame Modal被打开的演示</a>
<a href="http://www.google.cn/?FB_iframe=true&amp;height=0.6&amp;width=0.8" class="firstebox" title="">在firstebox中打开google</a>
描述:

采用一个隐藏的HTTP request (AJAX) 从同一个服务器上获取文件，并使用显示其内容。

使用方法:
  • 创建一个链接 (<a href>)
  • 给创建的这个链接一个class属性，其值是：firstebox (class="firstebox")
  • 给链接的href属性指向一个链接文件或是服务器目录。(href="login.htm")
  • 在href属性的URL后面追加以下字符来结束URL: 
    ?height=300&width=300
  • 根据需要更改宽和高的值。height,width的值如果位于0-1之间，将按照浏览器对应的百分比来显示打开的firstebox
  • 当然，你也可以在上面的参数字符串再加上modal=true(比如. ?height=300&width=300&modal=true) 这样当关闭firstebox时会调用firstebox内部的一个fb_remove()函数。在演示中查看“login”这个例子则要求点击“取消”才能关闭firstebox。
重点提醒:

为了在新打开的Ajax firstebox中打开新的Ajax内容，加载的文件要采用utf-8编码 。(请留意演示例子)。其他唯一需要注意的一个地方就是调用的firstebox必须包含宽和高，如果你给这两项留空，则窗口会自适应到默认大小（630*440）.

<a href="demofile/ajax.html?height=300&amp;width=400" title="ajax效果演示" class="firstebox">有滚动条的内容</a> 
<a href="demofile/ajax1.html?height=220&amp;width=400" class="firstebox" title="ajax效果演示">没滚动条的内容</a>
<a href="demofile/login.html?height=85&amp;width=250&amp;modal=true" class="firstebox" title="ajax效果演示/登陆">登陆</a>
firste 编写 最后更新时间 2009年6月17日 Copyright © www.firste.cn