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技术导航系统开心版源码.zip
共492个文件
js:199个
php:136个
png:46个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 110 浏览量
2023-02-01
09:53:30
上传
评论
收藏 8.49MB ZIP 举报
温馨提示
2022 GEM技术导航系统源码 免授权 系统特色: 支持推送百度收录 自动收录审核 自动备份网站数据 自助购买广告 内置使用教程 深度适配双模板购买样式 申请页面支持自定义 收录页面增加己方友联格式 深度适配光年模板 发布文章 签到奖励余额 支持防洪设置 配置:系统不吃配置低配置亲测可流畅使用 系统已为解锁授权版,安装即可使用,无任何授权界面弹出
资源推荐
资源详情
资源评论
收起资源包目录
GEM技术导航系统开心版源码.zip (492个子文件)
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
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
bootstrap.min.js 36KB
moment.min.js 35KB
bootstrap-datepicker.min.js 33KB
bootstrap-colorpicker.js 32KB
共 492 条
- 1
- 2
- 3
- 4
- 5
资源评论
智慧浩海
- 粉丝: 1w+
- 资源: 5141
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- delphi实现DBGrid全选和反选功能
- 25C11F41-2B2A-4D1A-AAA8-7C654526B129.pdf
- Android Studio Jellyfish(android-studio-2023.3.1.18-cros.deb)
- MVC+EF框架+EasyUI实现权限管理源码程序
- python第66-75天,Day66-75.rar
- python后端服务project-of-tornado.rar
- python测验,hello-tornado.rar
- 基于SpringBoot+Vue3快速开发平台、自研工作流引擎源码设计.zip
- docker安装部署全流程
- 基于树莓派的人脸识别系统python源码+项目部署说明+超详细代码注释.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功