sileya-ai
/
vr-shopxo-source
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

颜色组件优化

feat/task1-c-wallet
Devil 2021-06-10 14:19:32 +08:00
parent def95a35e3
commit d63e5e9398
3 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/static/common/css/common.css
View File

@ -388,9 +388,6 @@ ul.plug-file-upload-view-file li {
/**
* 颜色选择插件
*/
#colorpanel {
z-index: 10000;
}
button.colorpicker-submit:hover, button.colorpicker-submit:active, button.colorpicker-submit:focus {
background-color: #fff;
}

62
public/static/common/js/common.js
View File

@ -2555,35 +2555,39 @@ $(function()
// 颜色选择器
if($('.colorpicker-submit').length > 0)
{
$('.colorpicker-submit').colorpicker(
{
fillcolor:true,
success:function(o, color)
{
var style_arr = (o.context.dataset.colorStyle || 'color').split('|');
var style_value = {};
for(var i in style_arr)
{
style_value[style_arr[i]] = color;
}
$(o.context.dataset.inputTag).css(style_value);
$(o.context.dataset.colorTag).val(color);
$(o.context.dataset.colorTag).trigger('change');
},
reset:function(o)
{
var color = '';
var style_arr = (o.context.dataset.colorStyle || 'color').split('|');
var style_value = {};
for(var i in style_arr)
{
style_value[style_arr[i]] = color;
}
$(o.context.dataset.inputTag).css(style_value);
$(o.context.dataset.colorTag).val(color);
$(o.context.dataset.colorTag).trigger('change');
}
});
$('.colorpicker-submit').each(function(k, v)
{
$(this).colorpicker(
{
target: $(this),
fillcolor: true,
success: function(o, color)
{
var style_arr = (o.context.dataset.colorStyle || 'color').split('|');
var style_value = {};
for(var i in style_arr)
{
style_value[style_arr[i]] = color;
}
$(o.context.dataset.inputTag).css(style_value);
$(o.context.dataset.colorTag).val(color);
$(o.context.dataset.colorTag).trigger('change');
},
reset: function(o)
{
var color = '';
var style_arr = (o.context.dataset.colorStyle || 'color').split('|');
var style_value = {};
for(var i in style_arr)
{
style_value[style_arr[i]] = color;
}
$(o.context.dataset.inputTag).css(style_value);
$(o.context.dataset.colorTag).val(color);
$(o.context.dataset.colorTag).trigger('change');
}
});
});
}

54
public/static/common/lib/colorpicker/jquery.colorpicker.js
View File

@ -11,6 +11,7 @@
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
$.fn.colorpicker = function(options) {
var opts = jQuery.extend({}, jQuery.fn.colorpicker.defaults, options);
var index = parseInt(Math.random()*1000001);
initColor();
return this.each(function(){
var obj = $(this);
@ -26,45 +27,46 @@
var ttop = $(this).offset().top; //控件的定位点高
var thei = $(this).outerHeight(); //控件本身的高
var tleft = $(this).offset().left+$(this).outerWidth()-232; //控件的定位点宽
$("#colorpanel").css({
$('#colorpanel'+index).css({
"top":ttop+thei+top_inc-top_dec,
"left":tleft+left_inc-left_dec,
"position":position
}).show();
var target = opts.target ? $(opts.target) : obj;
if(target.data("color") == null){
target.data("color",target.css("color"));
if(target.data('color') == null){
target.data('color',target.css('color'));
}
if(target.data("value") == null){
target.data("value",target.val());
if(target.data('value') == null){
target.data('value',target.val());
}
$("#_creset").bind("click",function(){
target.css("color", target.data("color")).val(target.data("value"));
$("#colorpanel").hide();
$('#_creset'+index).bind('click',function(){
target.css('color', target.data('color')).val(target.data('value'));
$('#colorpanel'+index).hide();
opts.reset(obj);
});
$("#_determine").bind("click",function(){
var color = $("#HexColor").val();
target.css("color", color);
$("#colorpanel").hide();
$('#_determine'+index).bind('click',function(){
var color = $('#HexColor'+index).val();
target.css('color', color);
$('#colorpanel'+index).hide();
opts.success(obj,color);
}).css({
"padding-left":"8px"
});
$("#CT tr td").unbind("click").mouseover(function(){
$('#CT'+index+' tr td').unbind('click').mouseover(function(){
var color=$(this).css("background-color");
$("#DisColor").css("background",color);
$("#HexColor").val($(this).attr("rel"));
$('#DisColor'+index).css("background",color);
$('#HexColor'+index).val($(this).attr("rel"));
}).click(function(){
var color=$(this).attr("rel");
color = opts.ishex ? color : getRGBColor(color);
if(opts.fillcolor) target.val(color);
target.css("color",color);
$("#colorpanel").hide();
$("#_creset").unbind("click");
target.css('color',color);
$('#colorpanel'+index).hide();
$('#_creset'+index).unbind('click');
$('#_determine'+index).unbind('click');
opts.success(obj,color);
});
@ -72,7 +74,7 @@
});
function initColor(){
$("body").append('<div id="colorpanel" style="position: absolute; display: none;"></div>');
$('body').append('<div id="colorpanel'+index+'" style="position: absolute; display: none;z-index:10000;"></div>');
var colorTable = '';
var colorValue = '';
for(i=0;i<2;i++){
@ -93,13 +95,15 @@
colorTable='<table width=232 border="0" cellspacing="0" cellpadding="0" style="border:1px solid #333;height: 24px;line-height: 21px;">'
+'<tr><td colspan=21 bgcolor=#cccccc>'
+'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+'<tr><td width="3"><td><input type="text" id="DisColor" size="3" disabled style="border:solid 1px #000000;background-color:#000000;padding:0;"></td>'
+'<td width="3"><td><input type="text" id="HexColor" style="border:inset 1px;font-family:Arial;width:58px;" value="#000000"><a href="javascript:void(0);" id="_determine">确定</a> | <a href="javascript:void(0);" id="_cclose">关闭</a> | <a href="javascript:void(0);" id="_creset">清除</a></td></tr></table></td></table>'
+'<table id="CT" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;border-color:#333;border-width:0 1px 1px 1px;border-style:solid;">'
+'<tr><td width="3"><td><input type="text" id="DisColor'+index+'" size="3" disabled style="border:solid 1px #000000;background-color:#000000;padding:0;"></td>'
+'<td width="3"><td><input type="text" id="HexColor'+index+'" style="border:inset 1px;font-family:Arial;width:58px;" value="#000000"><a href="javascript:void(0);" id="_determine'+index+'">确定</a> | <a href="javascript:void(0);" id="_cclose'+index+'">关闭</a> | <a href="javascript:void(0);" id="_creset'+index+'">清除</a></td></tr></table></td></table>'
+'<table id="CT'+index+'" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;border-color:#333;border-width:0 1px 1px 1px;border-style:solid;">'
+colorTable+'</table>';
$("#colorpanel").html(colorTable);
$("#_cclose").on('click',function(){
$("#colorpanel").hide();
$('#colorpanel'+index).html(colorTable);
$('#_cclose'+index).on('click',function(){
$('#colorpanel'+index).hide();
$('#_creset'+index).unbind('click');
$('#_determine'+index).unbind('click');
return false;
});
}