我如何使用 Fontselect jQuery 插件以编程方式 select 字体？

Question

我正在使用 Fontselect jQuery 插件，它运行良好，但我想随时以编程方式从下拉列表中选择 select 字体在我的代码中。它看起来像是在使用原型函数，但我似乎无法正确访问它并调用它的函数。

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

Answer 1

因为没有办法从插件中select一个字体，解决方法是基于模拟点击鼠标事件...

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>

我如何使用 Fontselect jQuery 插件以编程方式 select 字体？

How would I programmatically select a font with the Fontselect jQuery plugin?

javascript

jquery

function

prototype

programmatically