Как проще всего создать пользовательскую кнопку jquery ui для диалога?

Question

в 1.8.2

Я не хочу использовать тематическую кнопку клиента.Мне нужно создать несколько пользовательских кнопок.На самом деле очень похоже на stackoverflow - кнопка Задать вопрос.Какой лучший способ сделать это и сделать его многоразовым.

Я в основном использую jquery ui из коробки, но мне нужно добавить новую стилизованную кнопку.В диалоговую функцию.(Зарегистрируйтесь сейчас)

Позвольте мне добавить еще кое-что.

        $("#dialog-form").dialog({
        autoOpen: false,
        height: 530,
        width: 850,
        modal: true,

        buttons: {

            'Sign Up*': function() {
            $(".ui-button").removeClass().addClass("myButton");

            },
        },
        close: function() {
            allFields.val('').removeClass('ui-state-error');
        }
    });

Answer 1

попробуй фабрика

Для кнопок типа stackoverflow: - Это просто игра css, попробуйте это для ссылки, вы получите что-то вроде stackoverflow:

.header_links
{
    background-color:#094E9F;
    font-weight:bold;
    color:#FFFFFF;
    padding:4px 10px;
    font-family: “Lucida Console”, Monaco, Courier, “Courier New”, monospace;
}

.header_links:hover
{
    background-color:#CD6501;
    text-decoration:none;
}

Answer 2

(function($) {
  $.fn.button = function(options) {
    var opts = $.extend({}, $.fn.button.defaults, options);

    return this.each(function() {
      $this = $(this);
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
      $this.addClass('ui-state-default ui-corner-all');
      $this.css(o.css);
      $this
        .hover(
            function(){ 
                $(this).addClass("ui-state-hover"); 
            },
            function(){ 
                $(this).removeClass("ui-state-hover"); 
            }
        );    
    });
  };
  $.fn.button.defaults = {
    css:{padding:'5px',cursor:'pointer'}
  };
})(jQuery);

использование:

$('#some').button().click(function(){
  // do stuff here 
});