如何将jquery UI按钮应用于asp:Button

Question

如何将jQueryUI样式应用于asp:Button.这是问题:jqueryUI按钮要求您具有以下格式<button>Test button</button>

当我尝试使用asp按钮服务器控件时<asp:Button />,asp:Button呈现为<input type=button>Test button </input>

更新:我得到了jquery提供的标准按钮样式.然而,当我想打一个工具栏出来,就像这个例子:http://jqueryui.com/demos/button/#toolbar,标准的asp:按钮失效我....或者也许我失去了一些东西.提前致谢,

Sashidhar Kokku

Answer 1

您可以将jQuery UI按钮应用于许多不同的HTML元素:<a>,<input type ="button">等等.

$(function() {
    $("input[type=button]").button();
});

这会将页面上的所有 <asp:Button> 转换为jQuery UI按钮.

Answer 2

jQuery UI按钮小部件能够转换以下按钮类型:

• <input type="button" />
• <input type="submit" />
• <button></button>

由于<asp:Button>控件呈现第一种类型的HTML,您可以在母版页中包含以下内容,以将jQuery转换应用于所有ASP.NET按钮:

$("input[type=button]").button();

您还 $("input[type=submit]").button(); 应该处理提交按钮.

Answer 3

这是你如何做到的:将以下内容添加到初始化函数中:

$(function () {
        //Converting asp buttons to html buttons
        $('input:submit, input:reset').each(function () {
            $(this).replaceWith('<button type="submit" name="' + $(this).attr('name') + '" class="' + $(this).attr('class') + '" id="' + $(this).attr('id') + '" >' + $(this).val() + '</button>');
        });

  //Adding button icons .....
  $(".createbutton").button({
     icons: { primary: "ui-icon-circle-plus" } 
   });