Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Создаем кнопку отмены прямо в текстовом поле

  • Понедельник, 1 ноября 2011, 02:32 |
  • Автор: karpovi4 |
  • Просмотров: 2272 |
  • Комментарии: 1 |
  • В закладки:
Создаем кнопку отмены прямо в текстовом полеСегодня я расскажу о создании jQuery-плагина, который из обыкновенного текстового инпута делает крутой инпут с крестиком) (картинка слева - пример)
Начнем. Без лишних слов.

Текстовое поле с возможностью отмены всего написанного вы можете увидеть на многих сайтах (но только если в качестве браузера вы используете сафари или хром). На самом деле оказалось что заслуг разработчиков тех сайтов оказалось не так уж и много. Все довольно банально. Дело в том, что если у текстового указано type = 'search', то такой крестик будет добавляться автоматически. Так что решайте сами. Читать дальше, как добиться такого эфекта при помощи jQuery или просто указать свойство тайп.

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

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


Плагин
(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)
  • Тэги публикацииjQuery, input, js
  • Пишет: Naila (Гости) |
  • Сообщений: 0 |
  • 20 сентября, 11:09
  • #1
A really good anwser, full of rationality!
Добавить комментарий