تداخل و عدم اجرای جاوا اسکریپت

با سلام
در طراحی قالب سایتم از javascript استفاده شده(سیستم whmcs)
برای طراحی منوی داخلی هم از یک کلاس آماده قبلی که با جی کوئری نوشته شده استفاده میکنم مشکل من اینه که اگه منو رو فعال کنم دیگه پوسته سایتم به درستی اجرا نمیشه و اگه جی کوئری منو رو غیر فعال کنم دیگه منو کار نمیکنه
من از کد زیر برای منو استفاده میکنم

کد:

---

Button = {};Button.styles = [];
Button.styles_markup = '';
Button.styles_hover_markup = '';
Button.pixel_properties = ['font-size', 'border-radius', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'];
Button.gradient_properties = ['bg-start-gradient', 'bg-end-gradient'];
Button.input_focus = '';


$(function(){


 


  Button.attach_handlers();
  Button.initialize_controls();
  Button.update_styles();


  $('.copy').zclip({
    path: 'js/ZeroClipboard.swf',
    copy: function(){
      return $('#css-display').text();
    },
    afterCopy: function(){
      $('.copy-success').fadeIn(200, function(){
        $(this).fadeOut(1000);
      });
    }
  });


});


/**
 * Initialize any DOM functionality (clicks, changes, etc..)
 */
Button.attach_handlers = function(){


  // accordion
  $('#settings-wrap .panel-wrap').click(function() {
    if(!$(this).hasClass('active')){
      $('.panel-wrap').removeClass('active');
      $('.accordion-inner').slideUp(200);
      $(this).addClass('active').next('.accordion-inner').slideDown(200);
    }
  });


  // more link
  $('.more-link').click(function(e){
    e.preventDefault();
    $(this).html() == 'More' ? $(this).html('Hide') : $(this).html('More');
    var section = $(this).attr('data-section');
    $('[data-section-more="' + section + '"]').slideToggle(200);
  });


  // settings input click
  $('#settings-wrap [data-control]').change(function(){
    Button.control_update($(this));
  });


  // settings display click
  $('#settings-wrap [data-control-display]').change(function(){
    Button.control_display_change($(this));
  });


  // apply a slider to any input with class "slider-bound"
  $('input.slider-bound').each(function(index) {
    // get input ID
    var inputId = $(this).attr('id');
    // get input value
    var inputValue = $(this).val();
    // get input max
    var inputMax = $(this).attr('max');
    $('#'+inputId+'-slider').slider({
      value: inputValue,
      max: inputMax,
      min: 0,
      slide: function(event, ui){
        $(this).prev().val(ui.value);
        Button.update_styles();
      }
    });
  });


  $('input, select').on('change keyup', function(){
    Button.update_styles();
    if($(this).hasClass('slider-bound')){
      $('#' + $(this).attr('id') + '-slider').slider('value', $(this).val());
    }
  });


  $('.color').focus(function(e) {
    Button.input_focus = $(this);
  });


  // open the color picker when the color preview is clicked
  $('.color-view').click(function(){
    Button.input_focus = $(this).prev();
    $(this).prev().ColorPickerShow();
  });


  // initialize the color picker
  $('.color').ColorPicker({
    onSubmit: function(hsb, hex, rgb, el){
      // hide the color picker
      $(el).ColorPickerHide();
      $(el).val('#'+hex);
    },
    onBeforeShow: function (){
      $(this).ColorPickerSetColor(this.value);
    },
    onChange: function(hsb, hex, rgb, el){
      // populate the input with the hex value
      Button.input_focus.val('#'+hex);
      // update the color preview
      Button.input_focus.next('.color-view').css('backgroundColor', '#'+hex);
      Button.update_styles();
    }
  });


  $('.btn').click(function(e){
    e.preventDefault();
  });


}


/**
 * Initialize (enable / disable) controls on load
 */
Button.initialize_controls = function(){
  $('#settings-wrap [data-control]').each(function(){
    Button.control_update($(this));
  });
  $('#settings-wrap [data-control-display]:checked').each(function(){
    Button.control_display_change($(this));
  });
  $('.color-view').each(function(){
    $(this).css('background-color', $(this).prev().val());
  });
}


/**
 * Change a control value (enable / disable controls)
 */
Button.control_update = function(el){
  var checked = el.is(':checked');
  var control = el.attr('data-control');


  // standard one-to-one controls
  $('[data-control-group="' + control + '"]').each(function(){
    checked ? Button.enable_control($(this)) : Button.disable_control($(this));
  });


  // group-switch controls
  $('[data-control-group-switch="' + control + '"]').each(function(){
    if(checked){
      Button.disable_control($(this));
    }else{
      $(this).find(':checkbox').each(function(){
        this.disabled = false;
      });
      $(this).removeClass('disabled').find('[data-control]').each(function(){
        Button.control_update($(this));
      });
    }
  });
}


/**
 * Change a control display (hide / show)
 */
Button.control_display_change = function(el){
  var control = el.attr('data-control-display');
  var display_selector = el.attr('name');
  $('[data-control-display-selector="' + display_selector + '"]').addClass('hidden').hide();
  $('[data-control-display-group="' + control + '"]').removeClass('hidden').show();
  Button.enable_control($('[data-control-display-group="' + control + '"]'));
  Button.disable_control($('[data-control-display-selector="' + display_selector + '"].hidden'));
}


/**
 * Disable all inputs and sliders in the element (el)
 */
Button.disable_control = function(el){
  el.addClass('disabled');
  el.find('.ui-slider').slider('disable');
  el.find('input, select').each(function(){
    this.disabled = true;
  });
}


/**
 * Enable all inputs and sliders in the element (el)
 */
Button.enable_control = function(el){
  el.removeClass('disabled');
  el.find('.ui-slider').slider('enable');
  el.find('input, select').each(function(){
    this.disabled = false;
  });
}


/**
 * Update the array that stores all css values
 */
Button.update_styles = function(){
  Button.prepare_styles();
  Button.generate_style_markup();
  Button.render_styles();
}


/**
 * Prepares the raw style data for css presentation (removes, combines, etc..)
 */
Button.prepare_styles = function(){
  Button.styles = {};
  Button.styles_markup = '';
  Button.styles_hover_markup = '';


  $('#settings-wrap').find('input[type="text"], select').not(':disabled').each(function(){
    var css_property = $(this).attr('id');
    Button.styles[css_property] = $(this).val();
  });


  // remove the text data
  $('.btn').html(Button.styles['text']);
  delete Button.styles['text'];


  // combine padding if all are present
  var padding_top, padding_right, padding_bottom, padding_left;
  if((padding_top = Button.styles['padding-top']) &&
    (padding_right = Button.styles['padding-right']) &&
    (padding_bottom = Button.styles['padding-bottom']) &&
    (padding_left = Button.styles['padding-left'])){
    Button.styles['padding'] = padding_top + 'px ' + padding_right + 'px ' + padding_bottom + 'px ' + padding_left;
    delete Button.styles['padding-top'];
    delete Button.styles['padding-right'];
    delete Button.styles['padding-bottom'];
    delete Button.styles['padding-left'];
  }


  // combine border styles
  var border_style, border_color, border_width;
  if((border_style = Button.styles['border-style']) &&
    (border_color = Button.styles['border-color']) &&
    (border_width = Button.styles['border-width'])){
    Button.styles['border'] = border_style + ' ' + border_color + ' ' + border_width + 'px';
    delete Button.styles['border-style'];
    delete Button.styles['border-color'];
    delete Button.styles['border-width'];
  }


  // combine border-top styles
  var border_top_style, border_top_color, border_top_width;
  if((border_top_style = Button.styles['border-top-style']) &&
    (border_top_color = Button.styles['border-top-color']) &&
    (border_top_width = Button.styles['border-top-width'])){
    Button.styles['border-top'] = border_top_style + ' ' + border_top_color + ' ' + border_top_width + 'px';
    delete Button.styles['border-top-style'];
    delete Button.styles['border-top-color'];
    delete Button.styles['border-top-width'];
  }


  // combine border-right styles
  var border_right_style, border_right_color, border_right_width;
  if((border_right_style = Button.styles['border-right-style']) &&
    (border_right_color = Button.styles['border-right-color']) &&
    (border_right_width = Button.styles['border-right-width'])){
    Button.styles['border-right'] = border_right_style + ' ' + border_right_color + ' ' + border_right_width + 'px';
    delete Button.styles['border-right-style'];
    delete Button.styles['border-right-color'];
    delete Button.styles['border-right-width'];
  }


  // combine border-bottom styles
  var border_bottom_style, border_bottom_color, border_bottom_width;
  if((border_bottom_style = Button.styles['border-bottom-style']) &&
    (border_bottom_color = Button.styles['border-bottom-color']) &&
    (border_bottom_width = Button.styles['border-bottom-width'])){
    Button.styles['border-bottom'] = border_bottom_style + ' ' + border_bottom_color + ' ' + border_bottom_width + 'px';
    delete Button.styles['border-bottom-style'];
    delete Button.styles['border-bottom-color'];
    delete Button.styles['border-bottom-width'];
  }


  // combine border-left styles
  var border_left_style, border_left_color, border_left_width;
  if((border_left_style = Button.styles['border-left-style']) &&
    (border_left_color = Button.styles['border-left-color']) &&
    (border_left_width = Button.styles['border-left-width'])){
    Button.styles['border-left'] = border_left_style + ' ' + border_left_color + ' ' + border_left_width + 'px';
    delete Button.styles['border-left-style'];
    delete Button.styles['border-left-color'];
    delete Button.styles['border-left-width'];
  }
}


/**
 * Populates the Button.styles_markup property with the renderable string
 */
Button.generate_style_markup = function(){


  // gradients
  var gradient_start, gradient_end;
  if((gradient_start = Button.styles['bg-start-gradient']) &&
    (gradient_end = Button.styles['bg-end-gradient'])){
    Button.styles_markup += Button.render_style_line('background', gradient_start);
    Button.styles_markup += Button.render_style_line('background-image', '-webkit-linear-gradient(top, ' + gradient_start + ', ' + gradient_end + ')');
    Button.styles_markup += Button.render_style_line('background-image', '-moz-linear-gradient(top, ' + gradient_start + ', ' + gradient_end + ')');
    Button.styles_markup += Button.render_style_line('background-image', '-ms-linear-gradient(top, ' + gradient_start + ', ' + gradient_end + ')');
    Button.styles_markup += Button.render_style_line('background-image', '-o-linear-gradient(top, ' + gradient_start + ', ' + gradient_end + ')');
    Button.styles_markup += Button.render_style_line('background-image', 'linear-gradient(to bottom, ' + gradient_start + ', ' + gradient_end + ')');
    delete Button.styles['bg-start-gradient'];
    delete Button.styles['bg-end-gradient'];
    delete Button.styles['bg-color'];
  }


  // gradient hovers
  var gradient_hover_start, gradient_hover_end;
  if((gradient_hover_start = Button.styles['bg-start-gradient-hover']) &&
    (gradient_hover_end = Button.styles['bg-end-gradient-hover'])){
    Button.styles_hover_markup += Button.render_style_line('background', gradient_hover_start);
    Button.styles_hover_markup += Button.render_style_line('background-image', '-webkit-linear-gradient(top, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    Button.styles_hover_markup += Button.render_style_line('background-image', '-moz-linear-gradient(top, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    Button.styles_hover_markup += Button.render_style_line('background-image', '-ms-linear-gradient(top, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    Button.styles_hover_markup += Button.render_style_line('background-image', '-o-linear-gradient(top, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    Button.styles_hover_markup += Button.render_style_line('background-image', 'linear-gradient(to bottom, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    delete Button.styles['bg-start-gradient-hover'];
    delete Button.styles['bg-end-gradient-hover'];
    delete Button.styles['background-hover'];
  }


  // border radius
  var border_radius;
  if((border_radius = Button.styles['border-radius'])){
    Button.styles_markup += Button.render_style_line('-webkit-border-radius', border_radius);
    Button.styles_markup += Button.render_style_line('-moz-border-radius', border_radius);
    Button.styles_markup += Button.render_style_line('border-radius', border_radius);
    delete Button.styles['border-radius'];
  }


  // text shadow
  var text_shadow_color, text_shadow_x, text_shadow_y, text_shadow_blur;
  if((text_shadow_color = Button.styles['text-shadow-color']) &&
    (text_shadow_x = Button.styles['text-shadow-x']) &&
    (text_shadow_y = Button.styles['text-shadow-y']) &&
    (text_shadow_blur = Button.styles['text-shadow-blur'])){
    Button.styles_markup += Button.render_style_line('text-shadow', text_shadow_x + 'px ' + text_shadow_y + 'px ' + text_shadow_blur + 'px ' + text_shadow_color);
    delete Button.styles['text-shadow-color'];
    delete Button.styles['text-shadow-x'];
    delete Button.styles['text-shadow-y'];
    delete Button.styles['text-shadow-blur'];
  }


  // box shadow
  var box_shadow_color, box_shadow_x, box_shadow_y, box_shadow_blur;
  if((box_shadow_color = Button.styles['box-shadow-color']) &&
    (box_shadow_x = Button.styles['box-shadow-x']) &&
    (box_shadow_y = Button.styles['box-shadow-y']) &&
    (box_shadow_blur = Button.styles['box-shadow-blur'])){
    Button.styles_markup += Button.render_style_line('-webkit-box-shadow', box_shadow_x + 'px ' + box_shadow_y + 'px ' + box_shadow_blur + 'px ' + box_shadow_color);
    Button.styles_markup += Button.render_style_line('-moz-box-shadow', box_shadow_x + 'px ' + box_shadow_y + 'px ' + box_shadow_blur + 'px ' + box_shadow_color);
    Button.styles_markup += Button.render_style_line('box-shadow', box_shadow_x + 'px ' + box_shadow_y + 'px ' + box_shadow_blur + 'px ' + box_shadow_color);
    delete Button.styles['box-shadow-color'];
    delete Button.styles['box-shadow-x'];
    delete Button.styles['box-shadow-y'];
    delete Button.styles['box-shadow-blur'];
  }


  $.each(Button.styles, function(css_property, css_value){
    // check if "px" should appended to the style
    var px_value = $.inArray(css_property, Button.pixel_properties) > -1 ? 'px' : '';
    var tab = '  ';


    // handle the hover background
    if(css_property == 'background-hover'){
      Button.styles_hover_markup = Button.render_style_line('background', css_value);
    }else{
      Button.styles_markup += Button.render_style_line(css_property, css_value);
    }
  });


  // remove text-decoration
  Button.styles_markup += Button.render_style_line('text-decoration', 'none');


  // wrap the style markups in proper css calls
  Button.styles_markup = '.btn {\n' + Button.styles_markup + '}';
  Button.styles_hover_markup += Button.render_style_line('text-decoration', 'none');
  Button.styles_hover_markup = '\n\n.btn:hover {\n' + Button.styles_hover_markup + '}';
}


/**
 * Update the output of the css styles
 */
Button.render_styles = function(){
  var output = Button.styles_markup + Button.styles_hover_markup;
  var style_tag = '<style id="dynamic-styles" type="text/css">' + output + '</style>';
  $('#dynamic-styles').replaceWith(style_tag);
  $('#css-display').html('<pre>' + output + '</pre>');
}


/**
 * Renders an individual style line
 */
Button.render_style_line = function(css_property, css_value){
  // check if "px" should appended to the style
  var px_value = $.inArray(css_property, Button.pixel_properties) > -1 ? 'px' : '';
  var tab = '  ';
  return tab + css_property + ': ' + css_value + px_value + ';\n';
}

---

هنگامی که این کد رو فراخونی میکنم دیگه پوسته اجرا نمیشه به درستی اما منو اجرا میشه و بر عکس


چطور از تداخل این کد با کدهای پوسته whmcs جلوگیری کنم و فقط این کد برای اجرای منو لود بشه

با تشکر فراوان از همه دوستان

نقل قول:

---

نوشته اصلی توسط atryad

با سلام
در طراحی قالب سایتم از javascript استفاده شده(سیستم whmcs)
برای طراحی منوی داخلی هم از یک کلاس آماده قبلی که با جی کوئری نوشته شده استفاده میکنم مشکل من اینه که اگه منو رو فعال کنم دیگه پوسته سایتم به درستی اجرا نمیشه و اگه جی کوئری منو رو غیر فعال کنم دیگه منو کار نمیکنه
من از کد زیر برای منو استفاده میکنم

کد:

---

button = {};button.styles = [];
button.styles_markup = '';
button.styles_hover_markup = '';
button.pixel_properties = ['font-size', 'border-radius', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'];
button.gradient_properties = ['bg-start-gradient', 'bg-end-gradient'];
button.input_focus = '';


$(function(){


 


  button.attach_handlers();
  button.initialize_controls();
  button.update_styles();


  $('.copy').zclip({
    path: 'js/zeroclipboard.swf',
    copy: Function(){
      return $('#css-display').text();
    },
    aftercopy: Function(){
      $('.copy-success').fadein(200, function(){
        $(this).fadeout(1000);
      });
    }
  });


});


/**
 * initialize any dom functionality (clicks, changes, etc..)
 */
button.attach_handlers = function(){


  // accordion
  $('#settings-wrap .panel-wrap').click(function() {
    if(!$(this).hasclass('active')){
      $('.panel-wrap').removeclass('active');
      $('.accordion-inner').slideup(200);
      $(this).addclass('active').next('.accordion-inner').slidedown(200);
    }
  });


  // more link
  $('.more-link').click(function(e){
    e.preventdefault();
    $(this).html() == 'more' ? $(this).html('hide') : $(this).html('more');
    var section = $(this).attr('data-section');
    $('[data-section-more="' + section + '"]').slidetoggle(200);
  });


  // settings input click
  $('#settings-wrap [data-control]').change(function(){
    button.control_update($(this));
  });


  // settings display click
  $('#settings-wrap [data-control-display]').change(function(){
    button.control_display_change($(this));
  });


  // apply a slider to any input with class "slider-bound"
  $('input.slider-bound').each(function(index) {
    // get input id
    var inputid = $(this).attr('id');
    // get input value
    var inputvalue = $(this).val();
    // get input max
    var inputmax = $(this).attr('max');
    $('#'+inputid+'-slider').slider({
      value: Inputvalue,
      max: Inputmax,
      min: 0,
      slide: Function(event, ui){
        $(this).prev().val(ui.value);
        button.update_styles();
      }
    });
  });


  $('input, select').on('change keyup', function(){
    button.update_styles();
    if($(this).hasclass('slider-bound')){
      $('#' + $(this).attr('id') + '-slider').slider('value', $(this).val());
    }
  });


  $('.color').focus(function(e) {
    button.input_focus = $(this);
  });


  // open the color picker when the color preview is clicked
  $('.color-view').click(function(){
    button.input_focus = $(this).prev();
    $(this).prev().colorpickershow();
  });


  // initialize the color picker
  $('.color').colorpicker({
    onsubmit: Function(hsb, hex, rgb, el){
      // hide the color picker
      $(el).colorpickerhide();
      $(el).val('#'+hex);
    },
    onbeforeshow: Function (){
      $(this).colorpickersetcolor(this.value);
    },
    onchange: Function(hsb, hex, rgb, el){
      // populate the input with the hex value
      button.input_focus.val('#'+hex);
      // update the color preview
      button.input_focus.next('.color-view').css('backgroundcolor', '#'+hex);
      button.update_styles();
    }
  });


  $('.btn').click(function(e){
    e.preventdefault();
  });


}


/**
 * initialize (enable / disable) controls on load
 */
button.initialize_controls = function(){
  $('#settings-wrap [data-control]').each(function(){
    button.control_update($(this));
  });
  $('#settings-wrap [data-control-display]:checked').each(function(){
    button.control_display_change($(this));
  });
  $('.color-view').each(function(){
    $(this).css('background-color', $(this).prev().val());
  });
}


/**
 * change a control value (enable / disable controls)
 */
button.control_update = function(el){
  var checked = el.is(':checked');
  var control = el.attr('data-control');


  // standard one-to-one controls
  $('[data-control-group="' + control + '"]').each(function(){
    checked ? Button.enable_control($(this)) : Button.disable_control($(this));
  });


  // group-switch controls
  $('[data-control-group-switch="' + control + '"]').each(function(){
    if(checked){
      button.disable_control($(this));
    }else{
      $(this).find(':checkbox').each(function(){
        this.disabled = false;
      });
      $(this).removeclass('disabled').find('[data-control]').each(function(){
        button.control_update($(this));
      });
    }
  });
}


/**
 * change a control display (hide / show)
 */
button.control_display_change = function(el){
  var control = el.attr('data-control-display');
  var display_selector = el.attr('name');
  $('[data-control-display-selector="' + display_selector + '"]').addclass('hidden').hide();
  $('[data-control-display-group="' + control + '"]').removeclass('hidden').show();
  button.enable_control($('[data-control-display-group="' + control + '"]'));
  button.disable_control($('[data-control-display-selector="' + display_selector + '"].hidden'));
}


/**
 * disable all inputs and sliders in the element (el)
 */
button.disable_control = function(el){
  el.addclass('disabled');
  el.find('.ui-slider').slider('disable');
  el.find('input, select').each(function(){
    this.disabled = true;
  });
}


/**
 * enable all inputs and sliders in the element (el)
 */
button.enable_control = function(el){
  el.removeclass('disabled');
  el.find('.ui-slider').slider('enable');
  el.find('input, select').each(function(){
    this.disabled = false;
  });
}


/**
 * update the array that stores all css values
 */
button.update_styles = function(){
  button.prepare_styles();
  button.generate_style_markup();
  button.render_styles();
}


/**
 * prepares the raw style data for css presentation (removes, combines, etc..)
 */
button.prepare_styles = function(){
  button.styles = {};
  button.styles_markup = '';
  button.styles_hover_markup = '';


  $('#settings-wrap').find('input[type="text"], select').not(':disabled').each(function(){
    var css_property = $(this).attr('id');
    button.styles[css_property] = $(this).val();
  });


  // remove the text data
  $('.btn').html(button.styles['text']);
  delete button.styles['text'];


  // combine padding if all are present
  var padding_top, padding_right, padding_bottom, padding_left;
  if((padding_top = button.styles['padding-top']) &&
    (padding_right = button.styles['padding-right']) &&
    (padding_bottom = button.styles['padding-bottom']) &&
    (padding_left = button.styles['padding-left'])){
    button.styles['padding'] = padding_top + 'px ' + padding_right + 'px ' + padding_bottom + 'px ' + padding_left;
    delete button.styles['padding-top'];
    delete button.styles['padding-right'];
    delete button.styles['padding-bottom'];
    delete button.styles['padding-left'];
  }


  // combine border styles
  var border_style, border_color, border_width;
  if((border_style = button.styles['border-style']) &&
    (border_color = button.styles['border-color']) &&
    (border_width = button.styles['border-width'])){
    button.styles['border'] = border_style + ' ' + border_color + ' ' + border_width + 'px';
    delete button.styles['border-style'];
    delete button.styles['border-color'];
    delete button.styles['border-width'];
  }


  // combine border-top styles
  var border_top_style, border_top_color, border_top_width;
  if((border_top_style = button.styles['border-top-style']) &&
    (border_top_color = button.styles['border-top-color']) &&
    (border_top_width = button.styles['border-top-width'])){
    button.styles['border-top'] = border_top_style + ' ' + border_top_color + ' ' + border_top_width + 'px';
    delete button.styles['border-top-style'];
    delete button.styles['border-top-color'];
    delete button.styles['border-top-width'];
  }


  // combine border-right styles
  var border_right_style, border_right_color, border_right_width;
  if((border_right_style = button.styles['border-right-style']) &&
    (border_right_color = button.styles['border-right-color']) &&
    (border_right_width = button.styles['border-right-width'])){
    button.styles['border-right'] = border_right_style + ' ' + border_right_color + ' ' + border_right_width + 'px';
    delete button.styles['border-right-style'];
    delete button.styles['border-right-color'];
    delete button.styles['border-right-width'];
  }


  // combine border-bottom styles
  var border_bottom_style, border_bottom_color, border_bottom_width;
  if((border_bottom_style = button.styles['border-bottom-style']) &&
    (border_bottom_color = button.styles['border-bottom-color']) &&
    (border_bottom_width = button.styles['border-bottom-width'])){
    button.styles['border-bottom'] = border_bottom_style + ' ' + border_bottom_color + ' ' + border_bottom_width + 'px';
    delete button.styles['border-bottom-style'];
    delete button.styles['border-bottom-color'];
    delete button.styles['border-bottom-width'];
  }


  // combine border-left styles
  var border_left_style, border_left_color, border_left_width;
  if((border_left_style = button.styles['border-left-style']) &&
    (border_left_color = button.styles['border-left-color']) &&
    (border_left_width = button.styles['border-left-width'])){
    button.styles['border-left'] = border_left_style + ' ' + border_left_color + ' ' + border_left_width + 'px';
    delete button.styles['border-left-style'];
    delete button.styles['border-left-color'];
    delete button.styles['border-left-width'];
  }
}


/**
 * populates the button.styles_markup property with the renderable string
 */
button.generate_style_markup = function(){


  // gradients
  var gradient_start, gradient_end;
  if((gradient_start = button.styles['bg-start-gradient']) &&
    (gradient_end = button.styles['bg-end-gradient'])){
    button.styles_markup += button.render_style_line('background', gradient_start);
    button.styles_markup += button.render_style_line('background-image', '-webkit-linear-gradient(top, ' + gradient_start + ', ' + gradient_end + ')');
    button.styles_markup += button.render_style_line('background-image', '-moz-linear-gradient(top, ' + gradient_start + ', ' + gradient_end + ')');
    button.styles_markup += button.render_style_line('background-image', '-ms-linear-gradient(top, ' + gradient_start + ', ' + gradient_end + ')');
    button.styles_markup += button.render_style_line('background-image', '-o-linear-gradient(top, ' + gradient_start + ', ' + gradient_end + ')');
    button.styles_markup += button.render_style_line('background-image', 'linear-gradient(to bottom, ' + gradient_start + ', ' + gradient_end + ')');
    delete button.styles['bg-start-gradient'];
    delete button.styles['bg-end-gradient'];
    delete button.styles['bg-color'];
  }


  // gradient hovers
  var gradient_hover_start, gradient_hover_end;
  if((gradient_hover_start = button.styles['bg-start-gradient-hover']) &&
    (gradient_hover_end = button.styles['bg-end-gradient-hover'])){
    button.styles_hover_markup += button.render_style_line('background', gradient_hover_start);
    button.styles_hover_markup += button.render_style_line('background-image', '-webkit-linear-gradient(top, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    button.styles_hover_markup += button.render_style_line('background-image', '-moz-linear-gradient(top, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    button.styles_hover_markup += button.render_style_line('background-image', '-ms-linear-gradient(top, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    button.styles_hover_markup += button.render_style_line('background-image', '-o-linear-gradient(top, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    button.styles_hover_markup += button.render_style_line('background-image', 'linear-gradient(to bottom, ' + gradient_hover_start + ', ' + gradient_hover_end + ')');
    delete button.styles['bg-start-gradient-hover'];
    delete button.styles['bg-end-gradient-hover'];
    delete button.styles['background-hover'];
  }


  // border radius
  var border_radius;
  if((border_radius = button.styles['border-radius'])){
    button.styles_markup += button.render_style_line('-webkit-border-radius', border_radius);
    button.styles_markup += button.render_style_line('-moz-border-radius', border_radius);
    button.styles_markup += button.render_style_line('border-radius', border_radius);
    delete button.styles['border-radius'];
  }


  // text shadow
  var text_shadow_color, text_shadow_x, text_shadow_y, text_shadow_blur;
  if((text_shadow_color = button.styles['text-shadow-color']) &&
    (text_shadow_x = button.styles['text-shadow-x']) &&
    (text_shadow_y = button.styles['text-shadow-y']) &&
    (text_shadow_blur = button.styles['text-shadow-blur'])){
    button.styles_markup += button.render_style_line('text-shadow', text_shadow_x + 'px ' + text_shadow_y + 'px ' + text_shadow_blur + 'px ' + text_shadow_color);
    delete button.styles['text-shadow-color'];
    delete button.styles['text-shadow-x'];
    delete button.styles['text-shadow-y'];
    delete button.styles['text-shadow-blur'];
  }


  // box shadow
  var box_shadow_color, box_shadow_x, box_shadow_y, box_shadow_blur;
  if((box_shadow_color = button.styles['box-shadow-color']) &&
    (box_shadow_x = button.styles['box-shadow-x']) &&
    (box_shadow_y = button.styles['box-shadow-y']) &&
    (box_shadow_blur = button.styles['box-shadow-blur'])){
    button.styles_markup += button.render_style_line('-webkit-box-shadow', box_shadow_x + 'px ' + box_shadow_y + 'px ' + box_shadow_blur + 'px ' + box_shadow_color);
    button.styles_markup += button.render_style_line('-moz-box-shadow', box_shadow_x + 'px ' + box_shadow_y + 'px ' + box_shadow_blur + 'px ' + box_shadow_color);
    button.styles_markup += button.render_style_line('box-shadow', box_shadow_x + 'px ' + box_shadow_y + 'px ' + box_shadow_blur + 'px ' + box_shadow_color);
    delete button.styles['box-shadow-color'];
    delete button.styles['box-shadow-x'];
    delete button.styles['box-shadow-y'];
    delete button.styles['box-shadow-blur'];
  }


  $.each(button.styles, function(css_property, css_value){
    // check if "px" should appended to the style
    var px_value = $.inarray(css_property, button.pixel_properties) > -1 ? 'px' : '';
    var tab = '  ';


    // handle the hover background
    if(css_property == 'background-hover'){
      button.styles_hover_markup = button.render_style_line('background', css_value);
    }else{
      button.styles_markup += button.render_style_line(css_property, css_value);
    }
  });


  // remove text-decoration
  button.styles_markup += button.render_style_line('text-decoration', 'none');


  // wrap the style markups in proper css calls
  button.styles_markup = '.btn {\n' + button.styles_markup + '}';
  button.styles_hover_markup += button.render_style_line('text-decoration', 'none');
  button.styles_hover_markup = '\n\n.btn:hover {\n' + button.styles_hover_markup + '}';
}


/**
 * update the output of the css styles
 */
button.render_styles = function(){
  var output = button.styles_markup + button.styles_hover_markup;
  var style_tag = '<style id="dynamic-styles" type="text/css">' + output + '</style>';
  $('#dynamic-styles').replacewith(style_tag);
  $('#css-display').html('<pre>' + output + '</pre>');
}


/**
 * renders an individual style line
 */
button.render_style_line = function(css_property, css_value){
  // check if "px" should appended to the style
  var px_value = $.inarray(css_property, button.pixel_properties) > -1 ? 'px' : '';
  var tab = '  ';
  return tab + css_property + ': ' + css_value + px_value + ';\n';
}

---

هنگامی که این کد رو فراخونی میکنم دیگه پوسته اجرا نمیشه به درستی اما منو اجرا میشه و بر عکس


چطور از تداخل این کد با کدهای پوسته whmcs جلوگیری کنم و فقط این کد برای اجرای منو لود بشه

با تشکر فراوان از همه دوستان

---

در صورتی که از چندین منبع کلاس استفاده میکنید مسلما در صورت یکسان نبودن نسخه مورد نیاز jq تداخل ایجاد میشود.
برای مثال قالب وب سایت شما از نسخه خاصی استفاده کنه و بعد منو های شما از نسخه و ویرایش دیگری از jq در این صورت تداخل 100% ایجاد میشود.
برای رفع این مشکل هم باید کلاس های خودتون رو بر اساس یک ویرایش از jq بسیازید.

من میدونم دقیقا مشکل شما چیه راحش اینه:
jquery برای تداخل نکردن با کتابخانه های دیگه این راه حل رو داده که بارها این مشکل رو اینطوری حل کردم.
اول کد jquery خودت این خط رو اضافه کن

کد HTML:

---

        jQuery.noConflict();

---

بعد هر جایی از کد جی کوئری عبارت $ رو با عبارت jQuery جایگزین کن

جواب که داد خبرمون کن