Блог

Я пытаюсь реализовать jQuery Font Selector в своем проекте, но у меня возникают некоторые проблемы с его достижением. Я использую исходный код, который я нашел здесь, jQuery Font Selector Вы можете посмотреть демо здесь

Все работает отлично, за исключением того, что автор этого кода не включил функцию, которая закрывает «меню прокрутки», если мы нажмем в другом месте экрана. Вы вынуждены выбрать что-то внутри этого списка, чтобы этот список закрылся.

Я собираюсь вставить код сюда, чтобы его было легче объяснить.

 /**
* Font selector plugin
*/
jQuery.fn.fontSelector = function() {

var fonts = new Array(
'Arial,Arial,Helvetica,sans-serif',
'Arial Black,Arial Black,Gadget,sans-serif',
/* other fonts */);

  return this.each(function(){

    // Get input field
    var sel = this;

    // Add a ul to hold fonts
    var ul = $('<ul class="fontselector"></ul>');
    $('body').prepend(ul);
    $(ul).hide();

    jQuery.each(fonts, function(i, item) {

      $(ul).append('<li><a href="#" class="font_'   i   '" style="font-family: '   item   '">'   item.split(',')[0]   '</a></li>');

      // Prevent real select from working
      $(sel).focus(function(ev) {

        ev.preventDefault();

        // Show font list
        $(ul).show();

        // Position font list
        $(ul).css({ top:  $(sel).offset().top   $(sel).height()   4,
                left: $(sel).offset().left});

        // Blur field
        $(this).blur();
        return false;
      });

      $(ul).find('a').click(function() {
         var font = fonts[$(this).attr('class').split('_')[1]];
         $(sel).val(font);
         $(ul).hide();
        return false;
      });
    });

  });

 }
  

Отсюда я попытался изменить код, например, добавить $(ul).hide(); внутрь функции размытия… Работает, НО я не хочу, чтобы ввод можно было редактировать вручную. Я не хочу, чтобы пользователь мог изменять содержимое входных данных, кроме как путем выбора шрифта.

Я надеюсь, вас не смущает то, о чем я спрашиваю!

Спасибо за вашу помощь

РЕДАКТИРОВАТЬ: некоторые изменения после обсуждения:

http://jsfiddle.net/ahkEv/4/

Добавьте следующее внутри jQuery.fn.fontSelector = function() {

 $("body").click(function(){        
   $(".fontselector").hide();          
});
  

Изменить $(sel).focus на

 $(sel).click(function(ev) {
  

и добавьте следующее в $(ul).find('a').click(function(ev) {

 ev.stopPropagation();