首页 建站资源 正文
我要发布

fontIconPicker

建站资源
2025-12-11 0 153

JQuery fontIconPicker v3.1.1

JQuery fontIconPicker是一个小的（ 4.05KB Gzb）的jQuery插件，可让您在管理表格中包含一个具有类别，搜索和分页的优雅图标选择器。可以使用SELECT字段，图标的Array或Object或直接从fontello config.json或icomoon selection.json文件手动加载图标列表。转到官方插件页面以获取示例和文档。

fontIconPicker v3.x支持JQuery 1.12.4至3.3.0 。

最初是在MICC83/ fontIconPicker开发的，现在搬到了单独的组织以进行更好的协作。

安装

使用NPM/纱

fontIconPicker已在NPM上发布。因此，您可以使用NPM安装或下载版本。

fontIconPicker –save\”>

npm install jquery@1.12.4 @ fontIconPicker / fontIconPicker --save

现在与WebPack或浏览。

fontIconPicker \’ )( jQuery );

jQuery( \’.selector\’ ). fontIconPicker ( {
// Options
} );\”>

 const jQuery = require ( \'jquery\' ) ;
const fip = require ( \'@ fontIconPicker / fontIconPicker \' ) ( jQuery ) ;

jQuery ( \'.selector\' ) . fontIconPicker ( {
	// Options
} ) ;

全局script / CDN支持

您可以使用<script>和<link>标签将fontIconPicker依赖关系直接放在html中。转到fontIconPicker发布，然后从最新资产下载fontIconPicker .zip文件。它将包含用于生产使用的所有脚本和样式。

您也可以使用Unpkg.com的CDN。


<link rel=\”stylesheet\” type=\”text/css\” href=\”https://un*pkg.*c*om/@fontIconPicker/fontIconPicker/dist/css/base/jquery. <span class=\’ notranslate keguazi>fontIconPicker .min.css\”>

<!– default grey-theme –>
<link rel=\”stylesheet\” type=\”text/css\” href=\”https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/grey-theme/jquery. fontIconPicker .grey.min.css\”>

<!– optional themes | no need to include default theme –>
<link rel=\”stylesheet\” type=\”text/css\” href=\”https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/bootstrap-theme/jquery. fontIconPicker .bootstrap.min.css\”>
<link rel=\”stylesheet\” type=\”text/css\” href=\”https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/dark-grey-theme/jquery. fontIconPicker .darkgrey.min.css\”>
<link rel=\”stylesheet\” type=\”text/css\” href=\”https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/inverted-theme/jquery. fontIconPicker .inverted.min.css\”>

<!– scripts –>
<script type=\”text/javascript\” src=\”https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/js/jquery. fontIconPicker .min.js\”></script>\”>

 <!-- styles -->
<!-- base | always include -->
< link rel =\" stylesheet \" type =\" text/css \" href =\" https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/base/jquery. fontIconPicker .min.css \" >

<!-- default grey-theme -->
< link rel =\" stylesheet \" type =\" text/css \" href =\" https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/grey-theme/jquery. fontIconPicker .grey.min.css \" >

<!-- optional themes | no need to include default theme -->
< link rel =\" stylesheet \" type =\" text/css \" href =\" https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/bootstrap-theme/jquery. fontIconPicker .bootstrap.min.css \" >
< link rel =\" stylesheet \" type =\" text/css \" href =\" https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/dark-grey-theme/jquery. fontIconPicker .darkgrey.min.css \" >
< link rel =\" stylesheet \" type =\" text/css \" href =\" https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/inverted-theme/jquery. fontIconPicker .inverted.min.css \" >

<!-- scripts -->
< script type =\" text/javascript \" src =\" https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/js/jquery. fontIconPicker .min.js \" > </ script >

使用ES6模块

如果您想使用ES6模块，则必须手动初始化。

fontIconPicker / fontIconPicker \’;

// Initiate the jQuery plugin
init fontIconPicker ( jQuery );

jQuery( \’.selector\’ ). fontIconPicker ( {
// Options
} );\”>

 import jQuery from \'jquery\' ;
import init fontIconPicker from \'@ fontIconPicker / fontIconPicker \' ;

// Initiate the jQuery plugin
init fontIconPicker ( jQuery ) ;

jQuery ( \'.selector\' ) . fontIconPicker ( {
	// Options
} ) ;

目前，通过rolupjs正确启动fontIconPicker的唯一可行方法是直接在init fontIconPicker函数中传递jQuery。如果您知道一种更好的方法，请随时提出建议。

它如何工作

只需包含JQuery的副本， fontIconPicker的脚本， fontIconPicker的主题和您的字体图标即可。现在，您可以在SELECT或INPUT[type=\"text\"]元素上触发它。

包括JavaScript

<script type=\”text/javascript\” src=\”jquery-1.12.4.min.js\”></script>

<!– <span class=\’ notranslate keguazi>fontIconPicker JS –>
<script type=\”text/javascript\” src=\”js/jquery. fontIconPicker .min.js\”></script>\”>

 <!-- jQuery -->
< script type =\" text/javascript \" src =\" jquery-1.12.4.min.js \" > </ script >

<!-- fontIconPicker JS -->
< script type =\" text/javascript \" src =\" js/jquery. fontIconPicker .min.js \" > </ script >

包括CSS

fontIconPicker core CSS –>
<link rel=\”stylesheet\” type=\”text/css\” href=\”css/base/jquery. fontIconPicker .min.css\” />

<!– required default theme –>
<link rel=\”stylesheet\” type=\”text/css\” href=\”css/themes/grey-theme/jquery. fontIconPicker .grey.min.css\” />

<!– optional themes –>
<link rel=\”stylesheet\” type=\”text/css\” href=\”css/themes/dark-grey-theme/jquery. fontIconPicker .darkgrey.min.css\” />
<link rel=\”stylesheet\” type=\”text/css\” href=\”css/themes/bootstrap-theme/jquery. fontIconPicker .bootstrap.min.css\” />
<link rel=\”stylesheet\” type=\”text/css\” href=\”css/themes/inverted-theme/jquery. fontIconPicker .inverted.min.css\” />\”>

 <!-- fontIconPicker core CSS -->
< link rel =\" stylesheet \" type =\" text/css \" href =\" css/base/jquery. fontIconPicker .min.css \" />

<!-- required default theme -->
< link rel =\" stylesheet \" type =\" text/css \" href =\" css/themes/grey-theme/jquery. fontIconPicker .grey.min.css \" />

<!-- optional themes -->
< link rel =\" stylesheet \" type =\" text/css \" href =\" css/themes/dark-grey-theme/jquery. fontIconPicker .darkgrey.min.css \" />
< link rel =\" stylesheet \" type =\" text/css \" href =\" css/themes/bootstrap-theme/jquery. fontIconPicker .bootstrap.min.css \" />
< link rel =\" stylesheet \" type =\" text/css \" href =\" css/themes/inverted-theme/jquery. fontIconPicker .inverted.min.css \" />

包括字体图标

<link rel=\”stylesheet\” type=\”text/css\” href=\”fontello-7275ca86/css/fontello.css\” />
<link rel=\”stylesheet\” type=\”text/css\” href=\”icomoon/icomoon.css\” />\’>

 <!-- Font -->
< link rel =\" stylesheet \" type =\" text/css \" href =\" fontello-7275ca86/css/fontello.css \" />
< link rel =\" stylesheet \" type =\" text/css \" href =\" icomoon/icomoon.css \" />

用jQuery初始化

最后，在SELECT或INPUT[type=\"text\"]元素上调用fontIconPicker 。

<select id="myselect" name="myselect" class="myselect">
<option value="">No icon</option>
<option>icon-user</option>
<option>icon-search</option>
<option>icon-right-dir</option>
<option>icon-star</option>
<option>icon-cancel</option>
<option>icon-help-circled</option>
<option>icon-info-circled</option>
<option>icon-eye</option>
<option>icon-tag</option>
<option>icon-bookmark</option>
<option>icon-heart</option>
<option>icon-thumbs-down-alt</option>
<option>icon-upload-cloud</option>
<option>icon-phone-squared</option>
<option>icon-cog</option>
<option>icon-wrench</option>
<option>icon-volume-down</option>
<option>icon-down-dir</option>
<option>icon-up-dir</option>
<option>icon-left-dir</option>
<option>icon-thumbs-up-alt</option>
</select>

<script type="text/javascript">
// Make sure to fire only when the DOM is ready
jQuery(document).ready(function($) {
$(\’#myselect\’).<span class=\” notranslate keguazi>fontIconPicker(); // Load with default options
});
</script>\”>

 <!-- SELECT element -->
< select id =\" myselect \" name =\" myselect \" class =\" myselect \" >
	< option value =\"\" > No icon </ option >
	< option > icon-user </ option >
	< option > icon-search </ option >
	< option > icon-right-dir </ option >
	< option > icon-star </ option >
	< option > icon-cancel </ option >
	< option > icon-help-circled </ option >
	< option > icon-info-circled </ option >
	< option > icon-eye </ option >
	< option > icon-tag </ option >
	< option > icon-bookmark </ option >
	< option > icon-heart </ option >
	< option > icon-thumbs-down-alt </ option >
	< option > icon-upload-cloud </ option >
	< option > icon-phone-squared </ option >
	< option > icon-cog </ option >
	< option > icon-wrench </ option >
	< option > icon-volume-down </ option >
	< option > icon-down-dir </ option >
	< option > icon-up-dir </ option >
	< option > icon-left-dir </ option >
	< option > icon-thumbs-up-alt </ option >
</ select >
<!-- JavaScript -->
< script type =\" text/javascript \" >
	// Make sure to fire only when the DOM is ready
	jQuery ( document ) . ready ( function ( $ ) {
		$ ( \'#myselect\' ) . fontIconPicker ( ) ; // Load with default options
	} ) ;
</ script >

<input type="text" name="mytext" id="mytext" />
<script type="text/javascript">
jQuery(document).ready(function($) {
$(\’#mytext\’).<span class=\” notranslate keguazi>fontIconPicker({
source: [\’icon-heart\’, \’icon-search\’, \’icon-user\’, \’icon-tag\’, \’icon-help\’],
emptyIcon: false,
hasSearch: false
});
});
</script>\”>

 <!-- INPUT element -->
< input type =\" text \" name =\" mytext \" id =\" mytext \" />
< script type =\" text/javascript \" >
	jQuery ( document ) . ready ( function ( $ ) {
		$ ( \'#mytext\' ) . fontIconPicker ( {
			source :    [ \'icon-heart\' , \'icon-search\' , \'icon-user\' , \'icon-tag\' , \'icon-help\' ] ,
			emptyIcon : false ,
			hasSearch : false
		} ) ;
	} ) ;
</ script >

插件选项

这是fontIconPicker选项：

fontIconPicker({
theme : \’fip-grey\’, // The CSS theme to use with this fontIconPicker . You can set different themes on multiple elements on the same page
source : false, // Icons source (array|false|object)
emptyIcon : true, // Empty icon should be shown?
emptyIconValue : \’\’, // The value of the empty icon, change if you select has something else, say \”none\”
autoClose : true, // Whether or not to close the FIP automatically when clicked outside
iconsPerPage : 20, // Number of icons per page
hasSearch : true, // Is search enabled?
searchSource : false, // Give a manual search values. If using attributes then for proper search feature we also need to pass icon names under the same order of source
appendTo : \’self\’, // Where to append the selector popup. You can pass string selectors or jQuery objects
useAttribute : false, // Whether to use attribute selector for printing icons
attributeName : \’data-icon\’, // HTML Attribute name
convertToHex : true, // Whether or not to convert to hexadecimal for attribute value. If true then please pass decimal integer value to the source (or as value=\”\” attribute of the select field)
allCategoryText : \’From all categories\’, // The text for the select all category option
unCategorizedText : \’Uncategorized\’, // The text for the select uncategorized option
iconGenerator : null, // Icon Generator function. Passes, item, flipBoxTitle and index
windowDebounceDelay: 150, // Debounce delay while fixing position on windowResize
searchPlaceholder : \’Search Icons\’ // Placeholder for the search input
});\”>

 var $picker = $ ( \'.picker\' ) . fontIconPicker ( {
	theme              : \'fip-grey\' ,              // The CSS theme to use with this fontIconPicker . You can set different themes on multiple elements on the same page
	source             : false ,                   // Icons source (array|false|object)
	emptyIcon          : true ,                    // Empty icon should be shown?
	emptyIconValue     : \'\' ,                      // The value of the empty icon, change if you select has something else, say \"none\"
	autoClose          : true ,                    // Whether or not to close the FIP automatically when clicked outside
	iconsPerPage       : 20 ,                      // Number of icons per page
	hasSearch          : true ,                    // Is search enabled?
	searchSource       : false ,                   // Give a manual search values. If using attributes then for proper search feature we also need to pass icon names under the same order of source
	appendTo           : \'self\' ,                  // Where to append the selector popup. You can pass string selectors or jQuery objects
	useAttribute       : false ,                   // Whether to use attribute selector for printing icons
	attributeName      : \'data-icon\' ,             // HTML Attribute name
	convertToHex       : true ,                    // Whether or not to convert to hexadecimal for attribute value. If true then please pass decimal integer value to the source (or as value=\"\" attribute of the select field)
	allCategoryText    : \'From all categories\' ,   // The text for the select all category option
	unCategorizedText  : \'Uncategorized\' ,         // The text for the select uncategorized option
	iconGenerator      : null ,                    // Icon Generator function. Passes, item, flipBoxTitle and index
	windowDebounceDelay : 150 ,                     // Debounce delay while fixing position on windowResize
	searchPlaceholder  : \'Search Icons\'           // Placeholder for the search input
} ) ;

插件API

fontIconPicker提供了三个公共API来操纵图标选择器。

seticon（ String Newicon）

使用此方法以编程方式设置图标。 

 $picker . setIcon ( \'fa fa-arrow-down\' ) ;

seticons（ Array|Object纽约州， Array|Object iConsearch）

使用此方法即时动态更改图标。 newIcons和iconSearch （可选）具有与source和searchSource选项相同的数据类型。 

 $picker . setIcons ( [ \'icon-one\' , \'icon-two\' ] ) ;
$picker . setIcons ( [ \'icon-one\' , \'icon-two\' ] , [ \'Icon one will be searched by this\' , \'Icon two will be searched by this\' ] ) ;

setPage（ String|Number pagenum）

使用此方法在FIP弹出窗口中以编程方式设置分页。这一直始终在打开状态和关闭状态之间，直到用户手动更改分页为止。 

 $picker . setPage ( 2 ) ;
$picker . setPage ( \'first\' ) ;
$picker . setPage ( \'last\' ) ;

方法接受数字，只有两个特殊字符串。

  • 数字对应于从1开始的页码。
  • first将分页设置为第一页。
  • last将把分页设置为最后一页。

destroypicker（）

用它删除图标选择器并恢复原始元素。 

 $picker . destroyPicker ( ) ;

刷新（ Object|Boolean纽约）

从DOM或通过选项刷新图标选择器。在调用销毁方法或更改选项值之后更改或重新定位DOM时有用。 

 $picker . refreshPicker ( {
	theme : \'fip-bootstrap\' ,
	hasSearch : false
} ) ;

repositionPicker（）

窗口中的重新定位选择器下拉菜单。如果DOM已更改并且下拉菜单打开，请使用此功能。或者，如果您的选择器在滚动容器中。

fontIconPicker();
$(\’.mycontainer\’).on( \’scroll\’, function() {
picker.repositionPicker();
} );\”>

 var picker = $ ( \'.myselect\' ) . fontIconPicker ( ) ;
$ ( \'.mycontainer\' ) . on ( \'scroll\' , function ( ) {
	picker . repositionPicker ( ) ;
} ) ;

在项目页面上的实时示例详细讨论了选项和API。

当地演示的重要说明

只有在本地加载演示时：在Firefox fontIconPicker中，由于CORS不会正确显示。出于相同的原因，“来自Fontello JSON配置文件的加载图标”在Chrome或IE 10上不起作用。如果您需要进行一些本地测试，则可以在风险上禁用strict_origin_policy。

使用捆绑的浏览器同步服务器来运行演示。请参阅设置以了解如何。

浏览器兼容性

JQuery Iconpicker已成功测试：Firefox（Edge），Safari（Edge），Chrome（Edge），IE8+和Opera（Edge）。

jQuery兼容性

jQuery > = 1.12.4已将其设置为package.json中的peerDependencies 。我们已经使用1.x和3.x分支进行了测试。使用3.x时，jQuery迁移不会产生任何错误。

发展环境

如果您想做出贡献，请记住一些事情。

  • 任何代码都不应使用Eslint和Stylelint产生任何错误。我们在构建过程中检查错误，如果确实会产生任何错误，则将被拒绝。
  • 所有新的JS代码都应与Jest实施单位或集成测试。

设置

首先确保安装节点> = V8。然后克隆存储库

fontIconPicker .git\”>

git clone git@github.com: fontIconPicker / fontIconPicker .git

并运行

fontIconPicker
npm install
npm install -g npx\”>

 cd fontIconPicker
npm install
npm install -g npx

哪个将安装所有依赖关系。您不需要安装jquery ，因为它是在devDependencies中定义的。

现在，根据需要在src中编辑文件，然后运行

npx gulp serve

这将为您的浏览器中的更改提供服务。通过http://*loc*a*lhost:3000访问它。

编码标准

  • 所有其他模块都应在__tests__/unit中使用单位测试的src/js/modules内部。
  • 在ES6中写JS。这是一个学习的好地方。它将在旅途中与Babel一起编译。
  • 不要直接编写CSS文件。写SCSS。 npx gulp serve运行时，它将进行编译。
  • 如果您正在编写主题，则将其包含在demo/index.html的第一个盒子中。
  • 如果您正在编写选项或API，则将其包含在一个单独的demo/index.html盒中。
  • 所有新的JS功能均应具有单元/集成和/或E2E测试。我们将柏树用于E2E测试，开玩笑用于单位/集成测试。

自动git钩

首次运行npm install时，Husky设置了一些git挂钩。它专门做两件事。

  1. 检查适当的提交消息。
  2. 运行js和scss文件的绒毛，以避免在按下任何错误。

连续集成（CI）

此外，我们为Travis CI上的每次推送运行测试套件。

确保通过运行来通过

npm run test

在您的机器上本地。它凸显所有文件并运行jest测试。

本地运行测试

fontIconPicker有两组测试。

开玩笑的单位和集成测试

npx jest

End2End测试与柏树

npx cypress open

然后从应用程序运行测试。或者

npx cypress run

从无头浏览器中运行终端中的测试。您不必担心设置测试环境，因为柏树会自动处理。

可用的Gulp命令

  • default – 构建所有脚本/样式，然后将它们放入dist文件夹中。
  • build – 与默认值相同。
  • lint – 覆盖所有CS和JS文件。
    • lint:script – 覆盖所有JS文件。
    • lint:style – 覆盖所有SCSS文件。
  • fonts – 将字体文件复制到dist目录。
  • serve – 构建文件，init browsersync和观看文件以创建开发设备。

使用npx运行这些命令。

学分

JQuery fontIconPicker由Alessandro Benoit＆Swashata制作。您可以使用问题跟踪器报告错误或功能请求。

特别感谢Minimac的想法，Zeno Rocha提供了JQuery Plugin Boblethe，Dave Gandy和Keyamoon为美丽的图标和Elliot Condon提供了令人惊叹的高级自定义WordPress插件。

下载源码

通过命令行克隆项目:

git clone https://github.com/fontIconPicker/fontIconPicker.git

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

申明：本文由第三方发布，内容仅代表作者观点，与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，也不代表本网对其真实性负责。

左子网 建站资源 fontIconPicker https://www.zuozi.net/35197.html

QML Samples
上一篇： QML Samples
JoomCCK
下一篇： JoomCCK
常见问题

发货方式是什么？

  • 1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。
查看详情

交易周期是多久呢？

  • 1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；
查看详情

能退款么？

  • 1、描述：源码描述(含标题)与实际源码不一致的（例：货不对板）； 2、演示：有演示站时，与实际源码小于95%一致的（但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外）； 3、发货：不发货可无理由退款； 4、安装：免费提供安装服务的源码但卖家不履行的； 5、收费：价格虚标，额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）； 6、其他：如质量方面的硬性常规问题BUG等。 注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。
查看详情

注意事项

  • 1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
左子网

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
左子网

QQ交流群

您的支持，是我们最大的动力！ https://qm.qq.com/q/iR7Nj0TrOg
热门文章
热门标签
随机推荐
热门评论
终身VIP会员限时钜惠
首页 源码 菜单 案例 我的