JQuery Пользовательский интерфейс ввода текста

Ответ 1

Вам нечего мешать делать $("input").button()... Мне это нравится:

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

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

Ответ 2

Добавьте класс ui-corner-all к вашему вводу и вставьте стиль ввода с помощью CSS.

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

http://jsfiddle.net/TTShr/

Ответ 3

Я знаю, что это старо. Но, если кто-то просто хочет стилизовать свои входы, чтобы выглядеть больше UIish, просто добавьте следующие классы: $('input').addClass("ui-widget ui-widget-content ui-corner-all");

Вы тоже можете просто закодировать классы.

Ответ 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/

Ответ 5

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

Ответ 6

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

• Автозавершение виджета
• Текстовый плагин по умолчанию для ввода
• Текстовый ограничитель плагинов для ввода-ввода/текстовой области

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

Ответ 7

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

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

Вы можете изменить заполнение - f.e. если элементы select на вашем сайте - унифицированы.

jQuery UI v1.11.4

Ответ 8

Мне понравилась идея просто добавлять классы так, как я написал это как плагин jQuery. Benifit здесь, если в какой-то poitn в будущем 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
});

EDIT: Добавлен в дополнительный класс "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, как это, - с входами и метками, соответствующими стилю кнопки. (Выберите нужную работу)

Ответ 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 textfield"