web-dev-qa-db-fra.com

boîte de saisie de texte stylisée jQuery UI

jQuery UI donne une apparence agréable aux boutons avec $('button').button();.

Existe-t-il un équivalent pour les zones de saisie de texte?

cssjquery-uiuser-interface
31
Randomblue

Rien ne vous empêche de faire $("input").button()... J'aime ça:

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

Un exemple plus complet.

49
Corin

Ajoutez la classe ui-corner-all à votre entrée et post-stylez-la avec CSS.

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

http://jsfiddle.net/TTShr/

19
jedierikb

Je sais que c'est vieux. Mais si quelqu'un cherche simplement à attribuer à ses entrées un style plus UIish, ajoutez simplement les classes suivantes: $('input').addClass("ui-widget ui-widget-content ui-corner-all");

Vous pouvez aussi coder les classes en dur. 

16
Bernesto

Pour résumer, j'aimerais ajouter mon implémentation:

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

Le CSS serait:

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

Voir ici: http://jsfiddle.net/UXdLQ/1544/

5
EliSherer

ajoutez également un .off('keydown') à la réponse de Corin pour éviter que la case ne devienne blanche lorsque vous entrez ou que vous appuyez sur la touche espace.

2
RatDon

L'exemple de votre question cite le widget Button de jQuery UI. L’idée de ce widget est d’avoir toute une gamme d’options, notamment une facilité de thématisation. Il existe également un widget pour les zones de saisie. Certains d’entre eux que je connais sont les suivants:

  1. Widget de saisie automatique
  2. Plugin texte par défaut pour le champ de saisie
  3. Plug-in de limite de texte pour zone de saisie/zone de texte

Il existe de nombreux plugins de ce type, sauf pour les widgets. Vous pouvez toujours parcourir/rechercher dans le champ de recherche disponible dans la page http://plugins.jquery.com/

1
karthiks

J'ai eu le même problème, je suis venu avec la solution suivante. Utilisez ces classes sur votre champ de saisie: 

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

Vous pouvez modifier le remplissage - f.e. si vous select éléments sur votre site - être unifié.

jQuery UI v1.11.4

1
Adam Mester

J'aimais l'idée d'ajouter simplement les classes à tel point que je l'ai écrit sous la forme d'un plugin jQuery. Heureusement, si jQueryUI produit une version, il utilisera très probablement le même format, de sorte que la conversion sera facile.

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

Appelez ça comme:

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

Si vous voulez ajouter des effets de survol, etc., ajoutez simplement la logique dans 

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

EDIT: Ajouté dans la classe supplémentaire "ui-button" pour leur donner la même hauteur/remplissage, etc. que .button ()

EDIT 2: C’est une si bonne idée que d’ajouter une version pour les étiquettes et de permettre la transmission de CSS personnalisé.

// 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);

Ensuite, appelez également vos entrées/étiquettes. Les classes/styles de ceux-ci n'ont pas besoin d'exister nulle part.

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

Interface utilisateur des sorties comme celle-ci - avec des entrées et des étiquettes correspondant au style du bouton. (Sélectionnez le travail nécessaire)

 enter image description here

1
Morvael

Pour avoir les mêmes angles/police/remplissage/espacement que bouton, mais sans les interactions de bouton (survol, actif, etc.)

HTML: type d'entrée = "text" class = "ui-button ui-widget ui-corner-all"

si vous voulez aligner le texte, ajoutez une autre classe personnalisée 

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

HTML: type d'entrée = "text" class = "ui-button ui-widget ui-corner-all textfield"

0
blah