Поле ввода текста в стиле jQuery UI

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'
  });

Более полный пример.

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

также добавьте .off('keydown') к ответу Корина , чтобы поле не стало белым при вводе или нажатии пробела.

Answer 6

Мне понравилась идея простого добавления классов, поэтому я написал ее как плагин 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" });

Выводит пользовательский интерфейс примерно так - входы и метки соответствуют стилю кнопки.(Выберите нужную работу)

Answer 7

У меня была такая же проблема, я придумал следующее решение.Используйте эти классы в поле ввода:

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

Вы можете изменить заполнение - например, если у вас select элементов на вашем сайте - для объединения.

Пользовательский интерфейс jQuery v1.11.4

Answer 8

В примере в вашем вопросе приведен виджет Кнопки пользовательского интерфейса jQuery. Идея этого виджета состоит в том, чтобы иметь ряд опций, включая простоту создания тем. Также есть виджет для полей ввода. Вот некоторые из них, о которых я знаю:

1. Автозаполнение виджета
2. Плагин для текста по умолчанию для поля ввода
3. Плагин для ограничения текста для поля ввода / области текста

Есть много таких плагинов, если не для виджетов. Вы всегда можете просматривать / искать в окне поиска, доступном на странице http://plugins.jquery.com/

Answer 9

Чтобы иметь те же углы / шрифт / отступ / интервал, что и у кнопки, но без взаимодействия с кнопками (при наведении, активном и т.

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

если вы хотите выровнять текст, добавьте еще один пользовательский класс

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

HTML: input type = "text" class = "ui-button ui-widget ui-corner-all текстовое поле"