这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
大家可以使用官方推荐的一下几个插件
最近发现一个不错的基于 jquery 的插件 thickBox ,感觉比 facebox 好用。但因为 jquery 官方不推荐使用。所以这个只是学习的朋友,不建议使用这个。
- While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.
- * colorbox
- * jQueryUI Dialog
- * fancybox
- * DOM window
- * shadowbox.js
做项目中发现 facebox 如果快速单击两下, 容易出现黑屏。而且 facebox 的框架是用 table 写的,可能因为 table 相对 div 在结构方面更稳定些。如果弹出层里是 table 布局的,样式就会受到 facebox 的样式影响,还要重新 reset 一下。 看了下官方的 api,我研究了下,做了个整理。看下图:
附件中 index.html 是主页,其它页面都是调用页面。点击 index 页面,就能看到如图的页面。图、按钮、文字都是可以点的。需要点击的标签都要加上 class="thickbox"。当页面出现滚动条时,弹出层固定在窗口的正中间不会移动。当弹出层中只是图片时,图片大小会根据当前窗口的大小进行压缩。所有的弹出层都可以按 "esc" 退出,除了需要点确认的弹出层外,点击弹出层以外的地方都可以关闭弹出层。
1. 展示图片(单张):2. 展示图片(多张):
- <a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
- <img src="images/single.jpg" alt="Plant" width="100" height="75" />
- </a>
- <a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank"
- class="thickbox" rel="flowers">
- <img src="images/plant1.jpg" alt="Plant 1" width="100" height="75" />
- </a>
- <a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank"
- class="thickbox" rel="flowers">
- <img src="images/plant2.jpg" alt="Plant 2" width="100" height="75" />
- </a>
- <a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank"
- class="thickbox" rel="flowers">
- <img src="images/plant3.jpg" alt="Plant 3" width="100" height="75" />
- </a>
- <a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank"
- class="thickbox" rel="flowers">
- <img src="images/plant4.jpg" alt="Plant 4" width="100" height="75" />
- </a>
这里每个 a 都要加上 rel 属性,而且属性值要一样。前后展示图可以通过 ">" 和 "<" 来切换
3. 弹出层内容在当前页面中时:
- <input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent"
- title="add a caption to title attribute / or leave blank" class="thickbox"
- value="Show" type="button">
- the paragraph and input below in a ThickBox, or
- <input alt="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"
- title="add a caption to title attribute / or leave blank" class="thickbox"
- value="Show hidden modal content" type="button">
- <div id="myOnPageContent" style="display:none;">
- <p>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
- nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
- wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
- lobortis nisl ut aliquip ex ea commodo consequat.
- </p>
- <p>
- <select name="">
- <option>
- test
- </option>
- </select>
- </p>
- </div>
- <div id="hiddenModalContent" style="display:none;">
- <p>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
- nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
- wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
- lobortis nisl ut aliquip ex ea commodo consequat.
- </p>
- <p style="text-align: center;">
- <input type="submit" onclick="tb_remove()" value=" Ok " id="Login" />
- </p>
- </div>
第一个 input 点开的弹出层有 input 框、title 和操作按钮以及文字。第二个 input 点开的弹出层只有文字。 弹出层的大小是根据 input 的 alt 属性里的 width 和 height 值来定义的。下面讲到的几种情况也是这样来定义弹出层大小的。
4. 调用外部文件,弹出层是 iframe
- <a href="ajaxFrame.PHP?keepThis=true&TB_iframe=true&height=250&width=400"
- title="add a caption to title attribute / or leave blank" class="thickbox">
- Example 1
- </a>
- <a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500"
- title="add a caption to title attribute / or leave blank" class="thickbox">
- Example 2
- </a>
- <a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true"
- title="add a caption to title attribute / or leave blank" class="thickbox">
- Open iFrame Modal
- </a>
如果弹出层是嵌套在 iframe 里需要添加 "TB_iframe=true"。 第一个是调用 ajaxFrame.PHP 文件。 第二个是调用 ajaxOverFlow2.html 文件。 第三个是调用了 iframeModal.html 文件,隐藏了 title 和操作按钮。
5. 调用外部文件,弹出层不是 iframe
- <a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank"
- class="thickbox">
- Scrolling content
- </a>
- <a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">
- No-scroll content
- </a>
- <a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox"
- title="Please Sign In">
- login (modal)
- </a>
- <a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">
- Update ThickBox content
- </a>
第一个调用 ajaxOverFlow.html 文件。 第二个调用 ajax.PHP 文件。 第三个调用 ajaxLogin.html 文件,form 表单。 第四个调用 ajaxTBcontent.html 文件,弹出层里再调用 newTBcontent.html 文件。
来源: http://www.phperz.com/article/17/0424/284266.html