Android Tablet PC на DHgate.com


Кнопка “отмены” прямо в текстовом поле


Текстовое поле с возможностью отмены всего написанного вы можете увидеть на многих сайтах.
Такая функция особенно полезна при использовании сенсорных мобильных девайсов. При нажатии на крестик, текст из поля стирается. Не надо долго зажимать Backspace или совершать другие телодвижения, вроде Ctrl+A, Del.

<div class="inputWrapper">
         <input id="searchInput" type="text" />
</div>

Плагин JQuery:

(function($) {
     $.fn.AddXbutton = function(options) {
         var defaults = {
             img: 'x.gif'
         };
         var opts = $.extend(defaults, options);
         $obj = $(this);
         $(this).each(
         function(i) {
             $(this).after(
                 $('<input type="image" id="xButton' + i + '" src="' + opts['img'] + '" />')
                     .css({ 'display': 'none', 'cursor': 'pointer', 'marginLeft': '-15px' })
                     .click(function() {
                         $obj.val('').focus();
                         $("#xButton" + i).hide();
                     }))
             .keyup(function() {
                 if ($(this).val().length > 0) {
                     $("#xButton" + i).show();
                 } else {
                     $("#xButton" + i).hide();
                 }
                 if ($(this).val() != '') $("#xButton" + i).show();
             });
         });
     };
 })(jQuery); 

Вызов плагина:

$(document).ready(function() {
     $('#searchInput').AddXbutton({ img: 'images/x.gif' });
     $('#searchInput').focus();
 });

Не забываем подключать jQuery)


Другие публикации:



Написать комментарий через:

 
               
  • Локальный блог
  •  
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

 
Возврат % от покупок
Статусы для соц.сетей на ArtKiev Design Studio