<%@ page language="C#" autoeventwireup="True" inherits="HL_Admin_Admin_CssParamter, WebApp_deploy" enableEventValidation="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 liansitional//EN" "http://www.w3.org/li/xhtml1/DTD/xhtml1-liansitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Css样式设置</title>
    <style type="text/css">
    body{font-size:12px;}
    .css_paramter{ display:none; padding-left:20px;}
    .css_paramter ul li{border:0;}
    #css_list{list-style-type:none;float:left;width:60%;margin:0;padding:0}
    #css_list li{background:#D3F1F8;border:solid 1px #0099FF;border-top:0;}
    #css_list li ul li{border:0;}
    #css_sidbar{float:right;width:39%;}
    .textStyle{width:60px;}
    </style>
    <script type="text/javascript">
    //切换显示运费区域
	function displayCss(chkbox, area) {
		if(chkbox.checked) {
			area.style.display = "block";
		} else {
			area.style.display = "none";
		}
	}
	function _$(id) {
		return document.getElementById(id);
	}
	function killErrors(){return true;}
	window.onerror = killErrors;
    </script>
    <script type="text/javascript" src="Js/colorpicker.js?version=20080228"></script>
</head>
<body  onerror="killerrors;">

    <form id="form1" runat="server"  >
    <div style= " width:560px; ">
       <div id="css_sidbar">
          <div style="width:100%; padding:5px 0; text-align:center; font-weight:bold;">CSS样式代码</div>
          <asp:TextBox ID="customer_css" runat="server" TextMode="MultiLine" Width="100%" Height="260px" />
          <input type="hidden" id="h_textboxID" value="" />
         
      </div>
       <ul id="css_list">
         <li>样式名称(class)<asp:TextBox ID="Css_class" runat="server" /></li>
         <li>           
            <input type="checkbox" name="hassize" value="true"  onclick="displayCss(this,_$('width_div'))" id="hassize"/><label for="hassize"> 长宽(size)</label>
            <ul id="width_div" class="css_paramter">
               <li>宽(Width)<asp:TextBox ID="hassize_width" runat="server" CssClass="textStyle" /></li>
               <li>高(Height)<asp:TextBox ID="hassize_height" runat="server"  CssClass="textStyle"/></li>              
            </ul> 
         </li>
          <li> 
             <input type="checkbox" name="hasfloat" value="true"  onclick="displayCss(this,_$('float_div'))" id="hasfloat"/><label for="hasfloat">元素浮动(float)</label>
             <ul id="float_div" class="css_paramter">
               <li> 
                 <asp:DropDownList ID="hasfloat_float" runat="server">
                    <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                    <asp:ListItem Text="不流动(none)" Value="none" />
                    <asp:ListItem Text="向左浮动(left)" Value="left" />
                    <asp:ListItem Text="向右浮动(right)" Value="right" />
                 </asp:DropDownList>
               </li>
                 
             </ul>
         </li>
          <li>
             <input type="checkbox" name="hasdisplay" value="true"  onclick="displayCss(this,_$('display_div'))" id="hasdisplay"/><label for="hasdisplay">显示模式(display)</label>
             <ul id="display_div" class="css_paramter">
                 <li>
                    <asp:DropDownList ID="hasdisplay_display" runat="server">
                    <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                    <asp:ListItem Text="普通显示" Value="" />
                    <asp:ListItem Text="块状显示" Value="block" />
                    <asp:ListItem Text="行内显示" Value="inline" />
                    <asp:ListItem Text="不显示" Value="none" />
                 </asp:DropDownList>
                 </li>
             </ul>
         </li>
         <li>
             <input type="checkbox" name="hasfont" value="true"  onclick="displayCss(this,_$('font_div'))" id="hasfont"/><label for="hasfont">字体(font)</label>
             <ul id="font_div" class="css_paramter">
                 <li>
                    字体大小(font-size)
                  <asp:TextBox ID="hasfont_font_size" runat="server" CssClass="textStyle"/> 
                 </li>
                 <li>
                    字体颜色(font-color)<asp:TextBox ID="hasfont_color" runat="server" CssClass="textStyle"/><img src="Images/colorpicker.gif" onclick="IsShowColorPanel(event,-200,20,'hasfont_color',this)" alt="选择颜色"  style="cursor:pointer;"/>
                 </li>
                 <li>
                    字体规格(font-style)
                  <asp:DropDownList ID="hasfont_font_style" runat="server">
                    <asp:ListItem Text="请选择" Value="" Selected="True"/>
                    <asp:ListItem Text="正常" Value="normal"  />
                    <asp:ListItem Text="斜体" Value="italic" />
                 </asp:DropDownList>
                 </li>
                 <li>
                    字体名称(font-family)
                 <asp:DropDownList ID="hasfont_font_family" runat="server">
                    
                 </asp:DropDownList>
                 </li>
                 <li>
                   字体粗细(font-weight)
                 <asp:DropDownList ID="hasfont_font_weight" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="正常" Value="normal"  />
                     <asp:ListItem Text="较粗" Value="bold" />
                     <asp:ListItem Text="加粗" Value="bolder"  />
                     <asp:ListItem Text="较幼" Value="lighter" />
                 </asp:DropDownList>
                 </li>
                 
             </ul>
         </li>        
         <li>
             <input type="checkbox" name="hastextalign" value="true"  onclick="displayCss(this,_$('text-align_div'))" id="hastextalign"/><label for="hastextalign">文本排版方式(text-align)</label>
             <ul id="text-align_div" class="css_paramter" style="vertical-align:      ">
                 <li>
                   行间距<asp:TextBox ID="hastextalign_line_height" runat="server"  CssClass="textStyle" />(px)
                 </li>
                 <li>
                   水平排版<asp:DropDownList ID="hastextalign_text_align" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="向左靠齐" Value="left"  />
                     <asp:ListItem Text="居中" Value="center" />
                     <asp:ListItem Text="向右靠齐" Value="right"  />                    
                   </asp:DropDownList>
                 </li>
                  <li>
                   垂直排版<asp:DropDownList ID="hastextalign_vertical_align" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="对象的内容与基线对齐" Value="baseline"  />
                     <asp:ListItem Text="内容与对象底端对齐" Value="bottom" />
                     <asp:ListItem Text="内容与对象中部对齐" Value="middle"  />  
                      <asp:ListItem Text="垂直对齐文本的下标" Value="sub"  />
                     <asp:ListItem Text="垂直对齐文本的上标" Value="super" />
                     <asp:ListItem Text="文本底部对齐" Value="text-bottom"  />   
                      <asp:ListItem Text="文本顶部对齐" Value="text-top" />
                     <asp:ListItem Text="和本行位置最高元素对齐" Value="top"  />                         
                   </asp:DropDownList>
                 </li>
                  <li>
                   自动换行<asp:DropDownList ID="hastextalign_white_space" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="正常" Value="normal"  />
                     <asp:ListItem Text="不换行" Value="nowrap" />
                     <asp:ListItem Text="保持源代码的空格与换行" Value="pre"  />                    
                   </asp:DropDownList>
                 </li>
                
             </ul>
         </li>
        
         <li>
             <input type="checkbox" name="hasborder" value="true"  onclick="displayCss(this,_$('border_div'))" id="hasborder"/><label for="hasborder">边框宽度(border)</label>
             <ul id="border_div" class="css_paramter">
                <li>
                   类型<asp:DropDownList ID="hasborder_border_style" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="实线" Value="solid" />
                     <asp:ListItem Text="虚线" Value="dashed" />
                     <asp:ListItem Text="无" Value="none"  />                    
                 </asp:DropDownList>
                 </li>
                 <li>
                   线宽<asp:TextBox ID="hasborder_border_width" runat="server"/>(px)
                 </li>
                 <li>
                   颜色<asp:TextBox ID="hasborder_border_color" runat="server"/><img src="Images/colorpicker.gif" onclick="IsShowColorPanel(event,-200,20,'hasborder_border_color',this)" alt="选择颜色"  style="cursor:pointer;"/>
                 </li>
                 
             </ul>
         </li>
         <li>
             <input type="checkbox" name="hasmargin" value="true"  onclick="displayCss(this,_$('margin_div'))" id="hasmargin"/><label for="hasmargin">边距(margin)</label>
             <ul id="margin_div" class="css_paramter">
                 <li>
                   上边距<asp:TextBox ID="hasmargin_margin_top" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   右边距<asp:TextBox ID="hasmargin_margin_right" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   下边距<asp:TextBox ID="hasmargin_margin_bottom" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   左边距<asp:TextBox ID="hasmargin_margin_left" runat="server" CssClass="textStyle"/>(px)
                 </li>
             </ul>
         </li>
         <li>
             <input type="checkbox" name="haspadding" value="true"  onclick="displayCss(this,_$('padding_div'))" id="haspadding"/><label for="haspadding">空白(padding)</label>
             <ul id="padding_div" class="css_paramter">
                 <li>
                   上边缘<asp:TextBox ID="haspadding_padding_top" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   右边缘<asp:TextBox ID="haspadding_padding_right" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   下边缘<asp:TextBox ID="haspadding_padding_bottom" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   左边缘<asp:TextBox ID="haspadding_padding_left" runat="server" CssClass="textStyle"/>(px)
                 </li>                 
             </ul>
         </li>
         <li>
             <input type="checkbox" name="hasbackground" value="true"  onclick="displayCss(this,_$('background'))" id="hasbackground"/><label for="hasbackground">背景(background-color)</label>
             <ul id="background" class="css_paramter">
                 <li>
                   背景颜色(background-color)<asp:TextBox ID="hasbackground_background_color" runat="server" CssClass="textStyle"/><img src="Images/colorpicker.gif" onclick="IsShowColorPanel(event,-200,20,'hasbackground_background_color',this)" alt="选择颜色" style="cursor:pointer" />
                 </li>
                 <li>
                   背景图象(background-image)<asp:TextBox ID="hasbackground_background_image" runat="server"  CssClass="textStyle"/>
                 </li>
                 <li>
                    背景铺放(background-repeat)
                 <asp:DropDownList ID="hasbackground_background_repeat" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="不平铺" Value="no-repeat"  />
                     <asp:ListItem Text="平铺" Value="repeat" />
                     <asp:ListItem Text="水平平铺" Value="repeat-x "  />  
                     <asp:ListItem Text="垂直平铺" Value="repeat-y"  />                   
                 </asp:DropDownList>  
                 </li> 
                  <li>
                    背景位置(background-repeat)
                 <asp:DropDownList ID="hasbackground_background_position" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="底部对齐" Value="bottom"  />
                     <asp:ListItem Text="居中" Value="center" />
                     <asp:ListItem Text="左对齐" Value="left"  />  
                     <asp:ListItem Text="靠右对齐" Value="right"  />
                     <asp:ListItem Text="顶部对齐" Value="top"  />
                     <asp:ListItem Text="左上角对齐" Value="top left"  />
                     <asp:ListItem Text="左下角对齐" Value="bottom left" />
                     <asp:ListItem Text="右上角对齐" Value="top right"  />
                     <asp:ListItem Text="右下角对齐" Value="bottom right" />                        
                 </asp:DropDownList>  
                 </li>               
             </ul>
         </li>
        
         <li>
             <input type="checkbox" name="haslist" value="true"  onclick="displayCss(this,_$('list_div'))" id="haslist"/><label for="haslist">列表样式(list)</label>
             <ul id="list_div" class="css_paramter">
                 <li>
                    列表符号<asp:DropDownList ID="haslist_list_style_type" runat="server">
                     <asp:ListItem Text="请选择" Value="" Selected="True"/>
                     <asp:ListItem Text="无" Value="none"   />  
                     <asp:ListItem Text="○" Value="circle" />
                     <asp:ListItem Text="■" Value="square" />
                     <asp:ListItem Text="阿拉伯数字" Value="decimal"  />                  
                     <asp:ListItem Text="小写英文字母" Value="lower-alpha"  /> 
                     <asp:ListItem Text="小写罗马字母" Value="lower-roman"  />      
                     <asp:ListItem Text="大写英文字母" Value="upper-alpha"  />                      
                     <asp:ListItem Text="大写罗马字母" Value="upper-roman"  />
                 </asp:DropDownList>
                 </li>
                 <li>符号位置
                   <asp:DropDownList ID="haslist_list_style_position" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="列表内" Value="inside" />  
                     <asp:ListItem Text="列表外" Value="outside" />
                     <asp:ListItem Text="行内" Value="inherit" />
                   </asp:DropDownList>
                 </li>
                 <li>
                     项目符号图象<asp:TextBox ID="haslist_list_style_image" runat="server" />图象路径以"/"开头
                 </li>
                 
              </ul>
         </li>
         <li>
            <input type="checkbox" name="hasoverflow" value="true"  onclick="displayCss(this,_$('overflow_div'))" id="hasoverflow"/><label for="hasoverflow">超出可见部分(overflow)</label>
            <ul id="overflow_div" class="css_paramter">
                 <li>
                    <asp:DropDownList ID="hasoverflow_overflow" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="自动" Value="auto" />  
                     <asp:ListItem Text="隐藏" Value="hidden" />
                     <asp:ListItem Text="滚动条" Value="scroll" />                            
                    </asp:DropDownList>          
                 </li>                 
            </ul>
         </li>
          <li>
            <input type="checkbox" name="hascursor" value="true"  onclick="displayCss(this,_$('cursor_div'))" id="hascursor"/><label for="hascursor">鼠标(cursor)</label>
            <ul id="cursor_div" class="css_paramter">
                 <li>
                    <asp:DropDownList ID="hascursor_cursor" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="自动" Value="auto" />
                     <asp:ListItem Text="手指" Value="pointer" />  
                     <asp:ListItem Text="等待" Value="wait" />
                     <asp:ListItem Text="移动" Value="move" />                            
                    </asp:DropDownList>          
                 </li>                 
            </ul>
         </li>
           <li>
            <input type="checkbox" name="hasposition" value="true"  onclick="displayCss(this,_$('position_div'))" id="hasposition"/><label for="hasposition">元素定位(position)</label>
            <ul id="position_div" class="css_paramter">
                 <li>
                    <asp:DropDownList ID="hasposition_position" runat="server">
                     <asp:ListItem Text="请选择" Value=""  Selected="True"/>
                     <asp:ListItem Text="绝对定位" Value="absolute" />
                     <asp:ListItem Text="固定" Value="fixed" />  
                     <asp:ListItem Text="相对定位" Value="relative" />
                     <asp:ListItem Text="默认" Value="static" />                            
                    </asp:DropDownList>          
                 </li> 
                 <li>
                   距上边缘<asp:TextBox ID="hasposition_top" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   距右边缘<asp:TextBox ID="hasposition_right" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   距下边缘<asp:TextBox ID="hasposition_bottom" runat="server" CssClass="textStyle"/>(px)
                 </li>
                 <li>
                   距左边缘<asp:TextBox ID="hasposition_left" runat="server" CssClass="textStyle"/>(px)
                 </li>                   
            </ul>
         </li>
         
      </ul>
      
     
      <div style="width:100%; text-align:center; "><input type="button" value="确定" onclick="CreateCss()" /><input type="button" value="刷新预览" onclick="reflashpreview();" /></div>
   
      
    </div>
   
       <div id="preview" style="width:90%;border:solid 1px #eee;margin:0 auto;position:absolute; top:10px; left:10px; background:white;border:solid 1px black;z-index:10; display:none;">
              <iframe  style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>
              <div  style="width:98%;height:25px;background:#eee; padding:5px 5px 0 5px;"><div style="float:left; color:black;">预览</div><div style="float:right;color:White;"><a href="#" onclick="document.getElementById('preview').style.display='none';">关闭</a></div></div>
              <div id="preview_content">
                 样式预览样式预览样式预览样式预览
              </div>
      </div>
      <div style="width:210px;height:180px;border:solid 1px gray;padding:5px; display:none; position:absolute; z-index:100; background:#fff;" id="ColorPicker"   onmouseover="this.style.display='block'" onmousemove="this.style.display='block'">
               <iframe  style="position:absolute;z-index:-1;width:220px;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>
              <div style="float:left;  ">
                  <table id="ColorTable" border="0"  cellspacing="0"  cellpadding="0" style='cursor:hand' onclick="SelectColor(event)" onmouseout="OnMouseOutColorTable()" onmouseover="OnMouseOverColorTable(event)">
                      <script type="text/javascript">
                         wColorRow();
                       </script>
                  </table>
              </div>
           
               <div style="float:right; ">
                     <table id="GrayTable"  border="0"  cellspacing="0"  cellpadding="0" style='cursor:hand;' onclick="GrayColorOnClick(event)" onmouseout="OnMouseOutGrayTable()" >
                      <script type="text/javascript">
                         wGray();
                      </script>
                    </table>
               </div>
               <div  style=" clear:both;">
                      <div style="float:left">
                         选中颜色<div id="ShowColor" style="border:1px solid black;  width:40px; height:20px; background-color:#fff;"></div>
                         
                      </div>
                      <div style="float:right">
                          基色: <span id="RGB">#ffffff</span><br />
                          亮度: <span id="GRAY">120</span><br />
                          
                      </div>
                      
                   
               </div>
               <div style="width:100%; text-align:center;">代码:<input type="text" id="ChooseColorCode" name="ChooseColorCode"  style="width:60px;" />&nbsp;<input type="button" id="SelectOK"  value="确定"  onclick="SelectColorOk()"/>
              <input name="SelColor" type="hidden" id="SelColor"  /></div>
                      
      </div>              
   </form>                        
</body>
</html>
