jQuery外掛程式: jquery.widget.shadowbox.js
/**<br /> * 一個簡單的設定DIV陰影的外掛程式<br /> *<br /> * 功能:<br /> * 1. 根據陰影寬度自動調整外層容器寬度,以及透明度<br /> * 2. 可定義ShadowBox的寬度和高度<br /> * 3. 可用CSS樣式表定義可視化樣式<br /> *<br /> * @author joe.he <developerworks@163.com><br /> * @copyright irgs.cn<br /> */<br />(function(jQuery) {<br />jQuery.fn.shadowbox = function(settings) {</p><p>var self = this;<br />// 預設設定<br />var defaults = {<br />shodowWidth: 20,<br />css: {<br />outer: 'widget-shadowbox-outer',<br />shadow: 'widget-shadowbox-shadow',<br />}<br />};<br />if (settings)<br />jQuery.extend(defaults, settings);</p><p>// 設定陰影層的CSS樣式<br />var shadow = jQuery("<div>")<br />.addClass(defaults.css.shadow)// 關聯一個CSS樣式規則,可以自訂陰影樣式<br />.width(self.width())<br />.height(self.height())<br />.css({<br />marginTop:defaults.shodowWidth+"px",<br />marginLeft:defaults.shodowWidth+"px",<br />zIndex:-100,<br />position: "absolute"<br />});<br />var outer = jQuery("<div>")<br />.addClass(defaults.css.outer)<br />.width(self.outerWidth()+defaults.shodowWidth)<br />.height(self.outerHeight()+defaults.shodowWidth)<br />.css({<br />position: "absolute",<br />zIndex:999<br />});<br />this.prepend(shadow).wrap(outer.get());</p><p>// 返回jQuery對象使用者鏈式調用<br />return this;</p><p>};<br />})(jQuery);
HTML頁面: jquery.widget.shadowbox.html
<?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /><mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script><br /><mce:script type="text/javascript" src="jquery.widgets.shadowbox.js" mce_src="jquery.widgets.shadowbox.js"></mce:script><br /><title>CSS 陰影層</title><br /><link type="text/css" rel="stylesheet" href="jquery.widget.shadowbox.css" mce_href="jquery.widget.shadowbox.css" /><br /></head><br /><body><br /><div class="operations"><br /> <a href="javascript:void(0);" mce_href="javascript:void(0);" id="toggleDialog">顯示對話方塊</a><br /></div><br /><div class="content"><br /><div class="titlebar">標題文字</div><br /><p>jQuery Shadow Box 外掛程式樣本</p><br /><pre><br /> 功能:<br /> 1. 根據陰影寬度自動調整外層容器寬度,以及透明度<br /> 2. 可定義ShadowBox的寬度和高度<br /> 3. 可用CSS樣式表定義可視化樣式<br /> 1) widget-shadowbox-outer: 外層容器<br /> 2) widget-shadowbox-shadow: 陰影樣式</p><p> jQuery(document).ready(function() {<br /> jQuery("div.content").shadowbox({<br /> shodowWidth: 5,<br /> shadowopacity: 0.2<br /> });<br /> });<br /> </pre><br /><div class="bottombar"><br /> <input type="submit" value="確定"><br /> <input type="button" value="取消""><br /></div><br /></div><br /><mce:script type="text/javascript"><!--<br />jQuery(document).ready(function() {<br /> var contentDiv = jQuery("div.content");<br /> var api = contentDiv.shadowbox({<br /> shodowWidth: 5<br /> });<br /> $(window).resize(function(){<br /> //console.log("window with: " + $(window).width() + ", window height:" + $(window).height());<br /> });<br /> $("#toggleDialog").click(function(e){<br /> //contentDiv.toggleClass("hide").animate({width:contentDiv.width(), height:contentDiv.height()});<br /> $("div.widget-shadowbox-outer").toggleClass("hide");<br /> });<br />});<br />// --></mce:script><br /></body><br /></html>
CSS 樣式表:
@CHARSET "UTF-8";<br />body {<br /> font-family: Verdana; font-size: 12px;<br />}<br />pre {<br /> font-family: Verdana; font-size: 12px;<br />}<br />p {<br /> text-indent: 2em;<br />}<br />pre {<br /> margin-left: 2em; line-height: 150%;<br />}<br />/*容器層*/<br />.widget-shadowbox-outer {<br /> position: absolute;<br />}<br />/*陰影層*/<br />.widget-shadowbox-outer .widget-shadowbox-shadow {<br /> background: #87A34D; opacity: 0.3;<br />}<br />/*內容層*/<br />.content { /*定義內容層的背景色,覆蓋陰影DIV的背景色*/<br /> border: 1px solid #628D0B; width: 500px; height: 400px;<br /> background: #fff;<br /> margin: 10px;<br />}<br />.content .titlebar {<br /> font-weight: bold; padding: .7em 1em; color: white; background: #87A34D;<br /> vertical-align: middle; font-size: 12px;<br />}<br />.content .bottombar {<br /> font-weight: bold; padding: .5em 1em; color: black;<br /> background: #DCEAC0; text-align: right; color: black;<br />}<br />.content .bottombar input {<br /> margin-left: 5px;<br />}<br />.hide {display: none;}<br />
這裡下載樣本檔案
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
