javascript - 如何使用 Fontselect jQuery 插件以编程方式选择字体？

Question

我正在使用 Fontselect jQuery 插件，它工作得很好，但我想在我的代码中随时以编程方式从下拉菜单中选择一种字体。看起来它正在使用原型函数，但我似乎无法正确访问它并调用它的函数。

该插件位于此处：https ://github.com/tommoor/fontselect-jquery-plugin

Answer 1

因为没有办法从插件中选择字体，所以解决它的方法是基于模拟点击和鼠标事件......

function selectFontAndApplyToEle(fontName, callback) {
    $('div.font-select').find('.fs-results li').removeClass('active');
    var dropEle = $('div.font-select').find('.fs-drop');
    var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
    dropEle.addClass('fs-drop-op');
    var posFont = fontToSelect.offset().top
    var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
    $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
    fontToSelect.addClass('active').trigger('click');
    setTimeout(function () {
        $('div.font-select a div').trigger('click');
        dropEle.removeClass('fs-drop-op');
        callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
    }, 500);
}

$(function () {
    //
    // Init the fontselect plugin
    //
    $('input.fonts').fontselect({
        style: 'font-select',
        placeholder: 'Select a font',
        lookahead: 2
    }).on('change', function(e) {
        var fontFamily = $(this).val().replace(/\+/g, ' ');
        $('p').css('font-family', fontFamily);
    });


    selectFontAndApplyToEle('Anton', function(fontFamily) {
        $('p').css('font-family', fontFamily);
        setTimeout(function() {
          selectFontAndApplyToEle('Anonymous Pro', function(fontFamily) {
              $('p').css('font-family', fontFamily);
          });
       }, 1000);
    });
});

.fs-drop-op {
    opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css">
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>


<input type="text" class="fonts">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into
    electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum
    passages, and more recently with desktop publishing software like Aldus
    PageMaker including versions of Lorem Ipsum.</p>

实现目标的另一种方法是：

function setFontToEle(ele, fontname) {
    //
    // select the font by name in fontselect plugin list
    //
    var font = $('div.font-select').find('.fs-results li:contains(' + fontname + ')').data('value');
    if (font === undefined) {
        return;
    }
    //
    // include the css if not yet included
    //
    var link = '//fonts.googleapis.com/css?family=' + font;
    if ($("link[href*='" + font + "']").length === 0){
        $('link:last').after('<link href="' + link + '" rel="stylesheet" type="text/css">');
    }
    //
    // apply the font to the element
    //
    ele.css('font-family', font.replace(/\+/g, ' '));
}

$(function () {

    //
    // Init the fontselect plugin
    //
    $('input.fonts').fontselect({
        style: 'font-select',
        placeholder: 'Select a font',
        lookahead: 2
    });

    //
    // hide the font select if not necessary
    //
    $('.font-select').hide();


    //
    // set font to element
    //
    setFontToEle($('p'), 'Anton');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css">
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>


<input type="text" class="fonts">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into
    electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum
    passages, and more recently with desktop publishing software like Aldus
    PageMaker including versions of Lorem Ipsum.</p>