jQuery fontIconPicker
==============
jQuery fontIconPicker is a small (`3.22KB` gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using a `SELECT` field, an `Array` or `Object` of icons or directly from a Fontello `config.json` or IcoMoon `selection.json` file. Go to the [official plugin page](http://codeb.it/fonticonpicker) for examples and documentation.
![fontIconPickers](/demo/github-img.png)
## How it works
Just include a copy of jQuery, the fontIconPickers script, the fontIconPickers theme and your Font Icons. Now you can trigger it on a `SELECT` or `INPUT[type="text"]` element.
### Include the JavaScript
```html
<!-- jQuery -->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!-- fontIconPicker JS -->
<script type="text/javascript" src="jquery.fonticonpicker.min.js"></script>
```
### Include the CSS
```html
<!-- fontIconPicker core CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fonticonpicker.min.css" />
<!-- required default theme -->
<link rel="stylesheet" type="text/css" href="themes/grey-theme/jquery.fonticonpicker.grey.min.css" />
<!-- optional themes -->
<link rel="stylesheet" type="text/css" href="themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css" />
<link rel="stylesheet" type="text/css" href="themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="themes/inverted-theme/jquery.fonticonpicker.inverted.min.css" />
```
### Include Font Icons
```html
<!-- Font -->
<link rel="stylesheet" type="text/css" href="fontello-7275ca86/css/fontello.css" />
<link rel="stylesheet" type="text/css" href="icomoon/icomoon.css" />
```
### Initialize with jQuery
Finally call the fontIconPicker on a `SELECT` or `INPUT[type="text"]` element.
```html
<!-- 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>
```
```html
<!-- 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>
```
## Plugin Options
Here's fontIconPicker options:
```js
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"
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
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
});
```
## Plugin APIs
fontIconPicker provides three public APIs to manipulating the icon picker.
### setIcons( `Array|Object` newIcons, `Array|Object` iconSearch )
Use this method to dynamically change icons on the fly. `newIcons` and `iconSearch` (optional) have same datatypes as `source` and `searchSource` options.
```js
$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']);
```
### destroyPicker()
Use this to remove the icon picker and restore the original element.
```js
$picker.destroyPicker();
```
### refreshPicker( `Object|Boolean` newOptions )
Refresh the icon picker from DOM or passed options. Useful when DOM has been changed or reinitializing after calling the destroy method or changing the options values.
```js
$picker.refreshPicker({
theme: 'fip-bootstrap',
hasSearch: false
});
```
Options and APIs are discussed in details with live examples at the project page.
### Important notes for local demo
Only when loading demo locally: In firefox fontIconPicker icons won't be shown correctly because of CORS. For the same reason "Load icons from Fontello JSON config file" won't work on Chrome or IE 10. If you need to do some local testing you can disable strict_origin_policy at your risk.
## Browser Compatibility
jQuery iconPicker has been successfully tested on: Firefox (edge), Safari (edge), Chrome (edge), IE8+ and Opera (edge).
## Credits
jQuery fontIconPicker has been made by [me](http://codeb.it) & [swashata](https://github.com/swashata). You can contact me at micc83@gmail.com or [twitter](https://twitter.com/Micc1983) for any issue or feauture request.
I really have to thank miniMAC for the idea, Zeno Rocha for jQuery plugin boilerplate, Dave Gandy & KeyaMoon for the beautiful sets of icons and Elliot Condon for the amazing Advanced Custom Field WordPress plugin.
没有合适的资源?快使用搜索试试~ 我知道了~
GEM技术导航系统开心版源码
共505个文件
js:199个
php:136个
png:46个
需积分: 0 0 下载量 61 浏览量
2023-03-22
13:26:50
上传
评论
收藏 8.5MB ZIP 举报
温馨提示
202 GEM技术导航系统源码 免受权 系统特征: 支持推送百度收录 自动收录审核 自动备份网站数据 自助购置广告 内置运用教程 深度适配双模板购置款式 申请页面支持自定义 收录页面增加己方友联格式 深度适配光年模板 发布文章 签到奖励余额 支持防洪设置 配置:系统不吃配置低配置亲测可流利运用 系统已为解锁受权版,装置即可运用,无任何受权界面弹出
资源推荐
资源详情
资源评论
收起资源包目录
GEM技术导航系统开心版源码 (505个子文件)
mountain.css 197KB
style.min.css 110KB
bootstrap.min.css 106KB
layui.css 86KB
materialdesignicons.min.css 85KB
animate.css 71KB
summernote-lite.min.css 30KB
style.css 27KB
admin.css 26KB
index.css 23KB
send.css 23KB
bootstrap-datepicker3.css 22KB
jquery-confirm.min.css 22KB
bootstrap-datepicker3.min.css 21KB
public.css 20KB
ozui.min.css 19KB
summernote-bs4.min.css 19KB
summernote.min.css 19KB
layer.css 14KB
layer.css 14KB
ion.rangeSlider.min.css 11KB
bootstrap-datetimepicker.css 9KB
bootstrap-datetimepicker.min.css 8KB
jquery.fonticonpicker.css 7KB
jquery.fonticonpicker.min.css 5KB
jquery.fonticonpicker.darkgrey.css 5KB
layer.css 5KB
detail.css 5KB
bootstrap-colorpicker.css 5KB
jquery.fonticonpicker.bootstrap.css 5KB
jquery.fonticonpicker.darkgrey.min.css 4KB
common.css 4KB
alipay_pay.css 4KB
bootstrap-colorpicker.min.css 4KB
wechat_pay.css 4KB
mqq_pay.css 4KB
jquery.fonticonpicker.bootstrap.min.css 4KB
jquery.fonticonpicker.inverted.css 3KB
jquery.fonticonpicker.grey.css 3KB
login.css 3KB
jquery.fonticonpicker.inverted.min.css 2KB
jquery.fonticonpicker.grey.min.css 2KB
jquery.tagsinput.min.css 903B
summernote-ext-databasic.min.css 210B
erciy.dat 4B
haibao.dat 3B
title.dat 3B
dwz.dat 3B
wzlcx.dat 2B
ssid.dat 2B
icp.dat 2B
sitecx.dat 2B
sitecxl.dat 1B
materialdesignicons.eot 286KB
iconfont.eot 46KB
summernote.eot 9KB
iconpicker.eot 5KB
GEMdh 323B
loading.gif 296KB
loading-0.gif 6KB
qq.gif 3KB
hot.gif 2KB
hot.gif 2KB
loading-2.gif 2KB
loading.gif 2KB
loading-1.gif 701B
tui.gif 79B
.htaccess 1KB
404.html 5KB
使用说明.html 3KB
使用说明.html 3KB
使用说明.html 3KB
使用说明.html 3KB
alipay.ico 4KB
qq.com.ico 4KB
rmb.ico 3KB
wechat.ico 1KB
qqpay.ico 1KB
.user.ini 45B
12.jpg 288KB
13.jpg 285KB
11.jpg 229KB
10.jpg 205KB
7.jpg 183KB
6.jpg 159KB
9.jpg 110KB
8.jpg 101KB
qiandao.jpg 63KB
bcbjtp.jpg 35KB
Chart.js 536KB
summernote-lite.min.js 159KB
summernote-bs4.min.js 148KB
summernote.min.js 148KB
jquery.min.js 131KB
bootstrap-datetimepicker.js 101KB
jquery.min.js 86KB
jquery.min.js 82KB
bootstrap-datepicker.js 57KB
ion.rangeSlider.min.js 40KB
bootstrap-datetimepicker.min.js 37KB
共 505 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
网创学长
- 粉丝: 2601
- 资源: 913
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于Javascript和Python的微商城项目设计源码 - MicroMall
- 基于Java的网上订餐系统设计源码 - online ordering system
- 基于Javascript的超级美眉网络资源管理应用模块设计源码
- 基于Typescript和PHP的编程知识储备库设计源码 - study-php
- Screenshot_2024-05-28-11-40-58-177_com.tencent.mm.jpg
- 基于Dart的Flutter小提琴调音器APP设计源码 - violinhelper
- 基于JavaScript和CSS的随寻订购网页设计源码 - web-order
- 基于MATLAB的声纹识别系统设计源码 - VoiceprintRecognition
- 基于Java的微服务插件集合设计源码 - wsy-plugins
- 基于Vue和微信小程序的监理日志系统设计源码 - supervisionLog
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功