Question

我正在尝试在我的项目中实现一个jQuery字体选择器，但我遇到了一些麻烦。我正在使用我在此处找到的源代码jQuery Font Selector 您可以看到demo here

一切都运行良好，除非此代码的作者没有包含一个关闭“滚动菜单”的功能，如果我们点击屏幕上的任何其他位置。您被迫在该列表中选择要关闭的列表。

我将在此处粘贴代码，以便更容易解释。

/**
* 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(); ...工作但，我不希望输入手动< / strong>可编辑。我不希望用户能够修改输入的内容，除非选择字体。

我希望你不要与我的要求混淆！

感谢您的帮助

Answer 1

编辑：讨论后的一些变化：

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

jQuery字体选择器：显示并隐藏焦点

1 个答案: