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

toiithl6  于 2023-05-17  发布在  jQuery
关注(0)|答案(1)|浏览(113)

我正在使用Fontselect jQuery插件,它工作得很好,但我想在我的代码中随时从下拉列表中选择一种字体。它看起来像是在使用一个原型函数,但我似乎无法正确访问它并调用它的函数。
该插件位于这里:https://github.com/tommoor/fontselect-jquery-plugin

ruyhziif

ruyhziif1#

因为没有方法从插件中选择字体,解决它的方法是基于模拟单击和鼠标事件。

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>

相关问题