atryad
December 5th, 2013, 09:22
با سلام
در طراحی قالب سایتم از 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 جلوگیری کنم و فقط این کد برای اجرای منو لود بشه
با تشکر فراوان از همه دوستان
در طراحی قالب سایتم از 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 جلوگیری کنم و فقط این کد برای اجرای منو لود بشه
با تشکر فراوان از همه دوستان