为对话框创建自定义 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

试试dabuttonfactory

对于 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 
});