Vou tentar mostrar todo o comportamento que ocorre:
Eu fiz da forma normal que sempre utilizo:
HEAD da página:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="Stylesheet" type="text/css" href="../../App_CSS/jPicker/jpicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="../../App_CSS/jPicker/jPicker.css" />
<script src="../../App_Scripts/jPicker/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../../App_Scripts/jPicker/jpicker-1.1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.fn.jPicker.defaults.images.clientPath = '../../Imagens/jPicker/';
var LiveCallbackElement = $('#Live'),
LiveCallbackButton = $('#LiveButton');
$('#Inline').jPicker({ window: { title: 'Inline Example'} });
$('#Ger_Fundo_Cor').jPicker({ window: { expandable: true, title: 'Expandable Example'} },
function() {
$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));
$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').css('background-color', $.jPicker.List[0].color.active.val('hex'));
});
$('#Ger_Cor_Padrao_1').jPicker({ window: { expandable: true, title: 'Expandable Example'} },
function() {
$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_1').attr('value', $.jPicker.List[1].color.active.val('hex'));
$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_1').css('background-color', $.jPicker.List[1].color.active.val('hex'));
});
$('#Ger_Cor_Padrao_2').jPicker({ window: { expandable: true, title: 'Expandable Example'} },
function() {
$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_2').attr('value', $.jPicker.List[2].color.active.val('hex'));
$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Cor_Padrao_2').css('background-color', $.jPicker.List[2].color.active.val('hex'));
});
$('#Alpha').jPicker({ window: { expandable: true, title: 'Alpha (Transparency) Example)', alphaSupport: true }, color: { active: new $.jPicker.Color({ ahex: '99330099' })} });
$('#Binded').jPicker({ window: { title: 'Binded Example' }, color: { active: new $.jPicker.Color({ ahex: '993300ff' })} },
function() {
alert('"Cancel" Button Clicked 1');
alert($.jPicker.List[0].color.active.val('hex'));
$('#ctl00_ContentPlaceHolder1_TabContainer1_TabMaisConfiguracoes_TxtGer_Fundo_Cor').attr('value', $.jPicker.List[0].color.active.val('hex'));
});
$('.Multiple').jPicker({ window: { title: 'Multiple Binded Example'} });
$('#Callbacks').jPicker(
{ window: { title: 'Callback Example'} },
function(color, context) {
var all = color.val('all');
alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none') + ' - alpha: ' + (all && all.a + '%' || 'none'));
$('#Commit').css({ backgroundColor: all && '#' + all.hex || 'transparent' });
},
function(color, context) {
if (context == LiveCallbackButton.get(0)) alert('Color set from button');
var hex = color.val('hex');
LiveCallbackElement.css({ backgroundColor: hex && '#' + hex || 'transparent' });
},
function(color, context) {
alert('"Cancel" Button Clicked');
});
$('#LiveButton').click(
function() {
$.jPicker.List[7].color.active.val('hex', 'e2ddcf', this);
});
$('#AlterColors').jPicker({ window: { title: 'Color Interaction Example'} });
$('#GetActiveColor').click(
function() {
alert($.jPicker.List[8].color.active.val('ahex'));
});
$('#GetRG').click(
function() {
var rg = $.jPicker.List[8].color.active.val('rg');
alert('red: ' + rg.r + ', green: ' + rg.g);
});
$('#SetHue').click(
function() {
$.jPicker.List[8].color.active.val('h', 133);
});
$('#SetValue').click(
function() {
$.jPicker.List[8].color.active.val('v', 38);
});
$('#SetRG').click(
function() {
$.jPicker.List[8].color.active.val('rg', { r: 213, g: 118 });
});
});
</script>
</asp:Content>
No Content referente ao conteúdo do site eu coloque o span que gere uma palheta para o usuário selecionar a cores.
<span id="Ger_Fundo_Cor"></span>
Quando roda o site, esse span juntamente com o jquery que estão dentro de uma tabcontainer e um updatepanel. Quando carrega a pagina pela primeira vez, esta tudo la funcionando corretamente. Quando executa um postback, a palheta de cores simplesmente some.
Eu resolvi isso adicionando o codigo jquery no codigo, porem ao selecionar a cor estava selecionando a cor do primeiro componente carregado, e nao do segundo.
É isso que esta ocorrendo, espero ter conseguido explicar.
Obrigado!
