Extraction d'une valeur d'une fonction jQuery dans une autre

Question

J'essaie de prendre la valeur hexadécimale choisie dans un plugin jQuery colorpicker et de la stocker en tant que cookie en utilisant le plugin jQuery cookie. Je ne connais tout simplement pas la manière appropriée de lier les deux ensemble (nouveau pour js et jQuery).

Voilà ma fonction colorpicker:

$('#colorSelector').ColorPicker({ 
color: '#ffffff', 
onShow: function (colpkr) { 
    $(colpkr).fadeIn(500); 
    return false; 
}, 
onHide: function (colpkr) { 
    $(colpkr).fadeOut(500); 
    return false; 
}, 
onChange: function (hsb, hex, rgb) { 
    $('#colorSelector div, .preview-image, .cover ').css('backgroundColor', '#' + hex); 
    $('body').css('backgroundColor', '#' + hex); 
     $.cookie('bgColor', 'picker'); 
    return false; 
} 
}); 

Et voici ma fonction cookie est:

var bgColor = $.cookie('bgColor'); 

if (bgColor == 'picker') { 
$('#colorSelector div, .preview-image, .cover ').css('backgroundColor', '#' + hex); 
}; 

, je peux configurer et stocker la valeur du cookie en tant que norme css background-color, mais peut » t comprendre comment tirer la valeur "'backgroundColor', '#' + hex" dans la fonction de cookie.

Answer 1

en fonction onChange:

$.cookie('bgColor', '#' + hex); 

et en fonction des cookies

var bgColor = $.cookie('bgColor');  
if (typeof bgColor == 'string' && bgColor.charAt(0)=='#') { 
    $('#colorSelector div, .preview-image, .cover ').css('backgroundColor', bgColor); 
}; 

Answer 2

Modifier le sélecteur de corps pour vos besoins.

(function($){ 



    var initLayout = function() { 
     var hash = window.location.hash.replace('#', ''); 
     var currentTab = $('ul.navigationTabs a') 
          .bind('click', showTab) 
          .filter('a[rel=' + hash + ']'); 
     if (currentTab.size() == 0) { 
      currentTab = $('ul.navigationTabs a:first'); 
     } 
     showTab.apply(currentTab.get(0)); 
     $('#colorpickerHolder').ColorPicker({flat: true}); 
     $('#colorpickerHolder2').ColorPicker({ 
      flat: true, 
      color: '#00ff00', 
      onSubmit: function(hsb, hex, rgb) { 
       $('#colorSelector2 div').css('backgroundColor', '#' + hex); 
      } 
     }); 
     $('#colorpickerHolder2>div').css('position', 'absolute'); 
     var widt = false; 
     $('#colorSelector2').bind('click', function() { 
      $('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500); 
      widt = !widt; 
     }); 
     $('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({ 
      onSubmit: function(hsb, hex, rgb, el) { 
       $(el).val(hex); 
       $(el).ColorPickerHide(); 
      }, 
      onBeforeShow: function() { 
       $(this).ColorPickerSetColor(this.value); 
      } 
     }) 
     .bind('keyup', function(){ 
      $(this).ColorPickerSetColor(this.value); 
     }); 

      var bgColor = $.cookie('bgColor');  
      if (typeof bgColor == 'string' && bgColor.charAt(0)=='#') { 
      $('body').css('backgroundColor', bgColor); 
      }; 


     $('#colorSelector').ColorPicker({ 
      color: '#0000ff', 
      onShow: function (colpkr) { 
       $(colpkr).fadeIn(500); 
       return false; 
      }, 
      onHide: function (colpkr) { 
       $(colpkr).fadeOut(500); 
       return false; 
      }, 
      onChange: function (hsb, hex, rgb) { 
      $('body').css('backgroundColor', '#' + hex); 
      $.cookie('bgColor', '#' + hex); 
      } 


     }); 
    }; 

    var showTab = function(e) { 
     var tabIndex = $('ul.navigationTabs a') 
          .removeClass('active') 
          .index(this); 
     $(this) 
      .addClass('active') 
      .blur(); 
     $('div.tab') 
      .hide() 
       .eq(tabIndex) 
       .show(); 
    }; 

    EYE.register(initLayout, 'init'); 
})(jQuery)