自定义弹出框控件

由于页面设计的需要，要自定义一个弹出框用来写帮助文档，所以自己就写了一个小控件，如下：

页面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
    
	
	
	    
	
	
	
	
	
  
  
  
    	

  

CSS代码如下：

/*
 * jQuery UI help 1.0.0
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Progressbar#theming
 */
.ui-help-help_pop{width:490px;height:400px;border:solid 1px #b5b5b5;position:absolute;overflow:hidden;display: none;}
.ui-help-help_pop #help_title{ background:url(images/ui-bg_gloss-wave_35_f6a828_1x40.png) repeat-x;height:40px;line-height:40px;font-size: 100%;font-weight: normal;text-align: center;padding:0;margin:0;}
.ui-help-close_helpBtn{ float:right;margin:10px;background: url(images/ui-btn-ass-close.png) repeat-x;width: 23px;height: 23px;display: inline;}
.ui-help-help_content{ width:478px;height:350px;margin-left:5px;font:normal 14px "宋体";color:#040404;line-height:22px;overflow-y: auto;padding:0;overflow-x:hidden;}
.ui-help-help_content p{ margin-left:14px;}
.ui-help-help_content h3{ font-weight:bold;line-height:36px;}
.ui-help-help_content img{ margin:8px 0}

控件代码即jquery.help.js代码如下：

/*
 * jquery.help.
 *
 * Copyright (c) 2012 by roger
 *
 * Launch  : March 2012
 * Version : 1.0.0
 * Released: March 13th, 2012 - 15:00
 * Debug: jquery.help.js
 */
 (function(f) {
	 
	 
	 /**
	  *
	  * @example  $("#example").help("string");
	  * @desc  可以直接传字符串进去
	  *
	  * @example  $("#example").help({top:100,left:100,background:"#fff",color:"#000",fontSize:12,context:"string",opacity:50});
	  * @desc  通过不同的参数控制输入文本的样式，top和left控制层在浏览器中的位置，background控制文本显示区域的背景色，color控制字体的颜色，fontSize控制字体的大小，context是文本的内容,opacity是弹出框背景透明度
	  *
	  * @example  $("#example").help({url:"http://www.baidu.com"});
	  * @desc 也可以传一个URL，该页面将显示链接的页面
	  *
	  *	  * @example  $("#example").help(style:"S2X");
	  * @desc 窗口显示特效，目前仅支持Z2Y左右滑出，S2X上下滑出，和XZH斜向逐步显示
	  */
	 
	 
	f.fn.help = function(options){
		var context = "";
		opts = jQuery.extend({
			top : 10,
			left : function(){
				var reLeft = 0;
				if($(document.body).width()>490){
					reLeft = $(document.body).width()/2 - 245;
				}
				return reLeft;
			},
			background:"#fff",
			color:"#000",
			fontSize:12,
			url:"",
			opacity:10
		},options || {});
		
		if(typeof options=="object"){
			context = opts.context;
		}else if(typeof options=="string"){
			context = options;
		}
		if(opts.url != ""){
			context = "";
		}
		var divElement = new Array();
		divElement.push("
");
		divElement.push("
");
		divElement.push("
小帮手
");
		divElement.push("
"+context+"
");
		divElement.push("
");
		$(document.body).append(divElement.join(""));
		$("#help_pop").addClass("ui-help-help_pop");
		$("#close_helpBtn").addClass("ui-help-close_helpBtn").click(function(){
				$("#help_pop").animate(f.fn.help.style[opts.style ||"XZH"],function(){$("#floatBoxBg").hide();});
				
		});
		$("#help_content").addClass("ui-help-help_content");
		
		$(this).click(function(){
			$("#help_pop").animate(f.fn.help.style[opts.style ||"XZH"],"normal").css({top:opts.top,left:opts.left,background:opts.background});
			$("#help_content").css({'color':opts.color,'font-size':opts.fontSize+'px'});
			$("#floatBoxBg").show();
		})
	}
	/*窗口显示特效，目前仅支持Z2Y左右滑出，S2X上下滑出，和XZH斜向逐步显示*/
	f.fn.help.style={
		S2X:{height: 'toggle'},
		Z2Y:{width:'toggle'},
		XZH:{ height: 'toggle',width:'toggle'}
	}


	
})(jQuery);