Question

jQuery UI使按钮看起来很好$('button').button();。

是否有文本输入框的等效文件？

Answer 1

没有什么可以阻止你做$("input").button() ...我喜欢这个：

$('input:text, input:password')
  .button()
  .css({
          'font' : 'inherit',
         'color' : 'inherit',
    'text-align' : 'left',
       'outline' : 'none',
        'cursor' : 'text'
  });

A fuller example.

Answer 2

将类ui-corner-all添加到输入中，然后使用CSS对输入进行样式设置。

$('input').addClass("ui-corner-all");

http://jsfiddle.net/TTShr/

Answer 3

我知道这是旧的。但是，如果有人只是想让他们的输入样式看起来更加UIish，只需添加以下类：$('input').addClass("ui-widget ui-widget-content ui-corner-all");

您也可以对类进行硬编码。

Answer 4

总结一下，我想添加我的实现：

$('input:text, input:password, input[type=email]').button()
  .addClass('ui-textfield')
  .off('mouseenter').off('mousedown').off('keydown');

CSS将是：

.ui-textfield {
    font: inherit;
    color: inherit;
    background: none;
    text-align: inherit;
    outline: none;
    cursor: text;
}

请在此处查看：http://jsfiddle.net/UXdLQ/1544/

Answer 5

还可以在 Corin的答案中添加.off('keydown')，以防止在输入或按空格时盒子变白。

Answer 6

您问题中的示例引用了jQuery UI的Button小部件。这个小部件的想法是有一系列选项，包括易于主题化。还有一个输入框的小部件。其中一些我知道如下：

Auto-Complete Widget
Default Text Plugin
Text Limit Plugin

如果不是小部件，有很多这样的插件。您始终可以在页面http://plugins.jquery.com/

Answer 7

我遇到了同样的问题，我提出了以下解决方案。在输入字段中使用这些类：

ui-widget ui-state-default ui-corner-all

您可以修改填充 - f.e.如果您的网站上有select个元素 - 要统一。

jQuery UI v1.11.4

Answer 8

我喜欢简单地添加类的想法，我把它写成jQuery插件。 Benifit在这里，如果将来某些版本的jQueryUI做一个版本，它很可能会使用相同的格式，所以转换将很容易。

(function($)
{
    $.fn.input = function ()
    {
        return this.each(function ()
        {
            $(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
        });
    }
})(jQuery);

称之为：

$('input, password').input();

如果您想添加悬停效果等，只需将逻辑添加到

即可

return this.each(function ()
{
    // display logic
});

编辑：在附加类“ui-button”中添加，使它们与.button（）

相同的高度/填充等

编辑2：事实证明，这是一个很好的主意，我为标签添加了一个版本，并允许自定义CSS传入。

// some styling for inputs
(function($)
{
    $.fn.input = function (css)
    {
        if (!css)
            css = {};
        return this.each(function ()
        {
            $(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
            $(this).css(css);
        });
    }
})(jQuery);
// and labels
(function ($)
{
    $.fn.label = function (css)
    {
        if (!css)
            css = {};
        return this.each(function ()
        {
            $(this).addClass("ui-widget ui-button");
            $(this).css(css);
        });
    }
})(jQuery);

然后调整输入/标签的样式。这些类/样式实际上并不需要存在于任何地方。

$(".client-input").input();
$(".client-label").label({ "min-width": "125px", "text-align": "right" });

输出这样的UI - 输入和标签与按钮的样式相匹配。（选择需要工作）

Answer 9

与按钮具有相同的角/字体/填充/间距，但没有按钮交互（悬停，活动等）

HTML：输入类型=＆＃34;文字＆＃34; class =＆＃34; ui-button ui-widget ui-corner-all＆＃34;

如果要对齐文本，请添加另一个自定义类

CSS： .textfield {text-align：left; }

HTML：输入类型=＆＃34;文字＆＃34; class =＆＃34; ui-button ui-widget ui-corner-all textfield＆＃34;

jQuery UI样式文本输入框

9 个答案: