fontIconPicker下载-fontIconPicker免费版下载-源码网

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。

fontIconPicker .min.css">  <link rel="stylesheet" type="text/css" href="https://un*pkg*.c*om/@fontIconPicker/ fontIconPicker /dist/css/themes/grey-theme/jquery. fontIconPicker .grey.min.css">  <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">  <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

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" />  <link rel="stylesheet" type="text/css" href="css/themes/grey-theme/jquery. fontIconPicker .grey.min.css" />  <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 " />

包括字体图标

 <!-- 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 。

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 >

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挂钩。它专门做两件事。

检查适当的提交消息。
运行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插件。

fontIconPicker

JQuery fontIconPicker v3.1.1

安装

使用NPM/纱

全局script / CDN支持

使用ES6模块

它如何工作

包括JavaScript

包括CSS

包括字体图标

用jQuery初始化

插件选项

插件API

seticon（ String Newicon）

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

setPage（ String|Number pagenum）

destroypicker（）

刷新（ Object|Boolean纽约）

repositionPicker（）

当地演示的重要说明

浏览器兼容性

jQuery兼容性

发展环境

设置

编码标准

自动git钩

连续集成（CI）

本地运行测试

开玩笑的单位和集成测试

End2End测试与柏树

可用的Gulp命令

学分

相关文章

streamdeck studio

faXeTeX

QML Samples

fa5pro downloader

推荐阅读

向上：银河游戏免安装正式版

风暴驭使正式中文版