erp/template/erp/colourorderts_edit.html

{Template header}
<style type="text/css">
#picker {margin:0;padding:0;border:0;width:70px;height:20px;line-height:20px;}
.colpick{position:absolute;width:346px;height:170px;overflow:hidden;display:none;font-family:Arial,Helvetica,sans-serif;background:#ebebeb;border:1px solid #bbb;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.colpick,.colpick *{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.colpick_color{position:absolute;left:7px;top:7px;width:156px;height:156px;overflow:hidden;outline:1px solid #aaa;cursor:crosshair}.colpick_color_overlay1{position:absolute;left:0;top:0;width:156px;height:156px;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff',endColorstr='#00ffffff');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')";background:linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0))}.colpick_color_overlay2{position:absolute;left:0;top:0;width:156px;height:156px;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000',endColorstr='#000000');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')";background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1))}.colpick_hsl .colpick_color_overlay1{background:linear-gradient(to right,rgba(128,128,128,1) 0,rgba(128,128,128,0) 100%)}.colpick_hsl .colpick_color_overlay2{background:linear-gradient(to bottom,rgba(255,255,255,1) 0,rgba(255,255,255,0) 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%)}.colpick_selector_outer{background:0;position:absolute;width:11px;height:11px;margin:-6px 0 0 -6px;border:1px solid black;border-radius:50%}.colpick_selector_inner{position:absolute;width:9px;height:9px;border:1px solid white;border-radius:50%}.colpick_hue{position:absolute;top:6px;left:175px;width:19px;height:156px;border:1px solid #aaa;cursor:n-resize}.colpick_hue_arrs{position:absolute;left:-8px;width:35px;height:7px;margin:-7px 0 0 0}.colpick_hue_larr{position:absolute;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:7px solid #858585}.colpick_hue_rarr{position:absolute;right:0;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:7px solid #858585}.colpick_new_color{position:absolute;left:207px;top:6px;width:60px;height:27px;background:red;border:1px solid #8f8f8f}.colpick_current_color{position:absolute;left:277px;top:6px;width:60px;height:27px;background:red;border:1px solid #8f8f8f}.colpick_field,.colpick_hex_field{position:absolute;height:20px;width:60px;overflow:hidden;background:#f3f3f3;color:#b8b8b8;font-size:12px;border:1px solid #bdbdbd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.colpick_rgb_r{top:40px;left:207px}.colpick_rgb_g{top:67px;left:207px}.colpick_rgb_b{top:94px;left:207px}.colpick_hsx_h{top:40px;left:277px}.colpick_hsx_s{top:67px;left:277px}.colpick_hsx_x{top:94px;left:277px}.colpick_hex_field{width:68px;left:207px;top:121px}.colpick_focus{border-color:#999}.colpick_field_letter{position:absolute;width:12px;height:20px;line-height:20px;padding-left:4px;background:#efefef;border-right:1px solid #bdbdbd;font-weight:bold;color:#777}.colpick_field input,.colpick_hex_field input{position:absolute;right:11px;margin:0;padding:0;height:20px;line-height:20px;background:transparent;border:0;font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#555;text-align:right;outline:0}.colpick_hex_field input{right:4px}.colpick_field_arrs{position:absolute;top:0;right:0;width:9px;height:21px;cursor:n-resize}.colpick_field_uarr{position:absolute;top:5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid #959595}.colpick_field_darr{position:absolute;bottom:5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #959595}.colpick_submit{position:absolute;left:207px;top:149px;width:130px;height:22px;line-height:22px;background:#efefef;text-align:center;color:#555;font-size:12px;font-weight:bold;border:1px solid #bdbdbd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.colpick_submit:hover{background:#f3f3f3;border-color:#999;cursor:pointer}.colpick_full_ns .colpick_submit,.colpick_full_ns .colpick_current_color{display:none}.colpick_full_ns .colpick_new_color{width:130px;height:25px}.colpick_full_ns .colpick_rgb_r,.colpick_full_ns .colpick_hsx_h{top:42px}.colpick_full_ns .colpick_rgb_g,.colpick_full_ns .colpick_hsx_s{top:73px}.colpick_full_ns .colpick_rgb_b,.colpick_full_ns .colpick_hsx_x{top:104px}.colpick_full_ns .colpick_hex_field{top:135px}.colpick_rgbhex .colpick_hsx_h,.colpick_rgbhex .colpick_hsx_s,.colpick_rgbhex .colpick_hsx_x{display:none}.colpick_rgbhex{width:282px}.colpick_rgbhex .colpick_field,.colpick_rgbhex .colpick_submit{width:68px}.colpick_rgbhex .colpick_new_color{width:34px;border-right:0}.colpick_rgbhex .colpick_current_color{width:34px;left:240px;border-left:0}.colpick_rgbhex_ns .colpick_submit,.colpick_rgbhex_ns .colpick_current_color{display:none}.colpick_rgbhex_ns .colpick_new_color{width:68px;border:1px solid #8f8f8f}.colpick_rgbhex_ns .colpick_rgb_r{top:42px}.colpick_rgbhex_ns .colpick_rgb_g{top:73px}.colpick_rgbhex_ns .colpick_rgb_b{top:104px}.colpick_rgbhex_ns .colpick_hex_field{top:135px}.colpick_hex .colpick_hsx_h,.colpick_hex .colpick_hsx_s,.colpick_hex .colpick_hsx_x,.colpick_hex .colpick_rgb_r,.colpick_hex .colpick_rgb_g,.colpick_hex .colpick_rgb_b{display:none}.colpick_hex{width:206px;height:201px}.colpick_hex .colpick_hex_field{width:72px;height:25px;top:168px;left:80px}.colpick_hex .colpick_hex_field div,.colpick_hex .colpick_hex_field input{height:25px;line-height:25px}.colpick_hex .colpick_new_color{left:9px;top:168px;width:30px;border-right:0}.colpick_hex .colpick_current_color{left:39px;top:168px;width:30px;border-left:0}.colpick_hex .colpick_submit{left:164px;top:168px;width:30px;height:25px;line-height:25px}.colpick_hex_ns .colpick_submit,.colpick_hex_ns .colpick_current_color{display:none}.colpick_hex_ns .colpick_hex_field{width:80px}.colpick_hex_ns .colpick_new_color{width:60px;border:1px solid #8f8f8f}.colpick_dark{background:#161616;border-color:#2a2a2a}.colpick_dark .colpick_color{outline-color:#333}.colpick_dark .colpick_hue{border-color:#555}.colpick_dark .colpick_field,.colpick_dark .colpick_hex_field{background:#101010;border-color:#2d2d2d}.colpick_dark .colpick_field_letter{background:#131313;border-color:#2d2d2d;color:#696969}.colpick_dark .colpick_field input,.colpick_dark .colpick_hex_field input{color:#7a7a7a}.colpick_dark .colpick_field_uarr{border-bottom-color:#696969}.colpick_dark .colpick_field_darr{border-top-color:#696969}.colpick_dark .colpick_focus{border-color:#444}.colpick_dark .colpick_submit{background:#131313;border-color:#2d2d2d;color:#7a7a7a}.colpick_dark .colpick_submit:hover{background-color:#101010;border-color:#444}
</style>
<body>
<div class="warp">
<div class="title winnone">店铺管理 - 修改</div>
<ul class="setting">

<li class="length">
<em>匹配项(标题或网址)：</em>
<input value="{$colourorderts['text']}" name="text" type="text">
</li>

<li class="length">
<em>颜色：</em>
# <input value="{$colourorderts['colour']}" name="colour" type="text" id="picker" style="border-right:20px solid #{$colourorderts['colour']}"></input>
</li>

<div style="clear:both;"></div>
</ul>
<input  type="hidden" name="id" value="{$colourorderts['id']}" />
<div class="button"><font class="datasave">提 交</font> <font class="fh">关 闭</font></div>
</div>
<script src="{$theme}js/colpick.js"></script>
<script>var addedit="/colourorderts/edit/";var rowsurl="/colourorderts/rows/";
$('#picker').colpick({
	layout:'hex',
	submit:0,
	colorScheme:'dark',
	onChange:function(hsb,hex,rgb,el,bySetColor) {
		$(el).css('border-right','20px solid #'+hex);
		// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
		if(!bySetColor) $(el).val(hex);
	}
}).keyup(function(){
	$(this).colpickSetColor(this.value);
});
</script>
{Template footer}