jQuery UI 风格的文本输入框

Question

jQuery UI 使用$('button').button(); 使按钮看起来更漂亮。

是否有文本输入框的等价物？

Answer 1

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

1. Auto-Complete Widget
2. Default Text Plugin 输入框
3. Text Limit Plugin 用于输入框/文本区域

如果不是小部件的话，还有很多这样的插件。您可以随时在页面http://plugins.jquery.com/中的搜索框浏览/搜索

Answer 2

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

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

A fuller example.

Answer 3

将 ui-corner-all 类添加到您的输入中，并使用 CSS 为输入添加样式。

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

http://jsfiddle.net/TTShr/

Answer 4

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

Answer 5

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

$('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 6

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

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

Answer 7

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

HTML: input type="text" class="ui-button ui-widget ui-corner-all"

如果你想对齐文本添加另一个自定义类

CSS： .textfield { 文本对齐：左； }

HTML: input type="text" class="ui-button ui-widget ui-corner-all textfield"

Answer 8

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

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

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

jQuery UI v1.11.4

Answer 9

我非常喜欢简单地添加类的想法，所以我把它写成一个 jQuery 插件。这里的好处是，如果将来 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 - 输入和标签与按钮的样式相匹配。 （选择需要工作）