LightBox效果展示

配合开源项目LightBox做展示效果的页面

by cod7ce

HTML

<script src="http://zhifangzi.com/cdn/jquery.lightbox.js"></script>
<div class="wrap">
		<table>
			<tbody><tr>
				<th colspan="2"><p>LightBox&nbsp;&nbsp;配置选项</p></th>
			</tr>
			<tr>
				<td class="label"><h3>基本属性</h3></td>
				<td class="input"></td>
			</tr>
			<tr>
				<td class="label">背景色</td>
				<td class="input"><input class="change" id="background" type="text" value="white"></td>
			</tr>
			<tr>
				<td class="label">宽度</td>
				<td class="input"><input class="change" id="width" type="text" value="300"></td>
			</tr>
			<tr>
				<td class="label">边框宽度</td>
				<td class="input"><input class="change" id="borderwidth" type="text" value="3"></td>
			</tr>
			<tr>
				<td class="label">边框颜色</td>
				<td class="input"><input class="change" id="bordercolor" type="text" value="transparent"></td>
			</tr>
			<tr>
				<td class="label">标题下方边框颜色</td>
				<td class="input"><input class="change" id="titlebordercolor" type="text" value="#ddd"></td>
			</tr>
			<tr>
				<td class="label">弹出效果</td>
				<td class="input">
					<select id="effect" class="change">
						<option value="none">无</option>
						<option value="flow">展开</option>
						<option value="fade">淡入</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="label">弹出位置</td>
				<td class="input">
					<select id="layout" class="change">
						<option value="center">居中</option>
						<option value="left">居左</option>
						<option value="right">居右</option>
						<option value="top">居上</option>
						<option value="bottom">居下</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="label">是否显示透明层</td>
				<td class="input">
					<select id="overlay" class="change">
						<option value="true">是</option>
						<option value="false">否</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="label">透明层背景色</td>
				<td class="input"><input class="change" id="overlaybackground" type="text" value="black"></td>
			</tr>
			<tr>
				<td class="label">透明层度</td>
				<td...

CSS

input,textarea,select,pre{
	border-color: #DFDFDF;
	background-color: white;
	color: #333;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border-width: 1px;
	border-style: solid;
	margin: 1px;
	padding: 5px;
	outline: 0;
	line-height: 15px;
	width: 450px;
}
input:hover,textarea:hover,select:hover{
	border-color:#bbb;
}
input[type="button"]{
	border-color: #13455B;
	color: #EAF2FA;
	background: #21759B;
	text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
	font-weight: bold;
	cursor: pointer;
	width:auto;
	padding:3px 10px;
}
input[type="button"]:hover{
	color:#fff;
}
.wrap{width:600px;margin:20px auto;}
.label{width:150px;color:#333;font-size: 12px;}
.input{}
tr{height:40px;}
p{margin:10px 0 25px 0;}

JavaScript

var options = "";
		function CreateOptions()
		{
			options = "";
			var numbet_patrn=/^[1-9]\d*$/;
			var float_patrn=/^(0|0\.[0-9]|1|1\.0)$/;
			if( $('#background').val() != "white" )
			{
				 options += ",background:'" + $('#background').val()+"'";
			}
			if( $('#width').val() != "300" )
			{
				if(!numbet_patrn.exec($('#width').val()))
				{
					alert("宽度应填写数字");
					$('#width').val("300")
				}
				else
				{
					options += ",width:" + $('#width').val();
				}
			}
			if( $('#borderwidth').val() != "3" )
			{
				if(!numbet_patrn.exec($('#borderwidth').val()))
				{
					alert("边框宽度应填写数字");
					$('#borderwidth').val("3")
				}
				else
				{
					options += ",borderWidth:" + $('#borderwidth').val();
				}
			}
			if( $('#bordercolor').val() != "transparent" )
			{
				 options += ",borderColor:'" + $('#bordercolor').val()+"'";
			}
			if( $('#titlebordercolor').val() != "#ddd" )
			{
				 options += ",titleBorderColor:'" + $('#titlebordercolor').val()+"'";
			}
			if( $('#effect').val() != "none" )
			{
				 options += ",effect:'" + $('#effect').val()+"'";
			}
			if( $('#layout').val() != "center" )
			{
				 options += ",layout:'" + $('#layout').val()+"'";
			}
			if( $('#overlay').val() != "true" )
			{
				options += ",overlay:" + $('#overlay').val()+"";
			}
			else
			{
				if( $('#overlaybackground').val() != "black" )
				{
					options += ",overlayBackground:'" + $('#overlaybackground').val()+"'";
				}
				if( $('#overlayopacity').val() != "0.2" )
				{
					if(!float_patrn.exec($('#overlayopacity').val()))
					{
						alert("透明度应该为0-1之间的小数,一位有效数字");
						$('#overlayopacity').val('0.2');
					}
					else
					{
						options += ",overlayOpacity:" + $('#overlayopacity').val()+"";
					}
				}
			}
			if( $('#close').val() != "true" )
			{
				options += ",close:" + $('#close').val()+"";
			}
			options += ",buttons:[{text:'" + $('#btntext').val()+"',handle:" + $('#btnhandle').val() + ",btype:"+ $('#btnstyle').val() +"}]"; 
			if(options !=...