Angular2上应用基于jQuery的Bootstrap 3
来源:互联网 发布:软件项目管理常见问题 编辑:程序博客网 时间:2024/05/29 15:45
Iconpicker是一个用于Bootstrap 3 的jQuery图标选择器插件,允许您在工具提示类似的弹出界面中从多个图标集中选择并选择一个图标。
参考:
http://www.jqueryscript.net/other/jQuery-Based-Icon-Picker-For-Bootstrap-3-iconpicker.html
https://victor-valencia.github.io/bootstrap-iconpicker/#
1.下载bootstrap-iconpicker和bootstrap,jQuery没有的话也得下载
cnpm install bootstrap-iconpicker -Scnpm install bootstrap --save
(-S和–save 等效)
2.加入相关js和css
在.angular-cli.json中加入js和css
"styles": [ "styles.css" "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js" "../node_modules/bootstrap/dist/js/bootstrap.min.js", "../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js", "../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.7.0.min.js" ]
理论上在.angular-cli.json中加了js和css就可以了,但不知道什么原因需要在index.html中引入css才可以,本人初学,如有不对,多多见谅,更希望得到指教。哈哈
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" href="../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
3.在app.component.html中创建带有role=”iconpicker”属性的图标选择器按钮,以初始化插件
<div class="input-group"> <input type="text" class="form-control" [(ngModel)]="mResult" name="result"> <span class="input-group-btn"> <button id="target" name="target" class="btn btn-default" data-icon="glyphicon-chevron-down" role="iconpicker" data-selected-class="btn-danger" data-unselected-class="btn-info" (click)="clickIcon()" > </button> </span> </div>
4.在app.component.ts中引入相关js,并初始化
import '../../node_modules/bootstrap/dist/js/bootstrap.min.js';import '../../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js';import '../../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.7.0.min.js'; mResult:string = ""; ngOnInit() { jQuery('#target').iconpicker({ iconset: 'fontawesome', icon: 'glyphicon-chevron-down', rows: 5, cols: 5, placement: 'bottom', }); } clickIcon(){ jQuery('#target').on('change',(e)=>{ console.log(this.mResult); this.mResult = e.icon; }); }
结果如图:
图标集和图标也有很多选择。
添加data-iconset=”glyphicon|ionicon|fontawesome|weathericon|mapicon|octicon|typicon|elusiveicon|flagicon”到查看图标集即可。
可以参考https://victor-valencia.github.io/bootstrap-iconpicker/#
- Angular2上应用基于jQuery的Bootstrap 3
- Angular2-Bootstrap的继承
- 基于Twitter Bootstrap 3的jQuery下拉列表插件
- 基于Bootstrap 3、JQuery及RegExp的表单验证
- RxJS核心概念之Subjet在angular2+上的应用
- 基于jquery的轻量级bootstrap校验插件
- 基于MVC5和Bootstrap的jQuery TreeView
- 基于bootstrap的JQuery绑定单击事件
- 基于bootstrap的jQuery bootstrap-treeview 多级列表树插件
- 推荐一款基于 Bootstrap 的 jQuery 表格插件Bootstrap table
- 【angular2】引入jquery及Bootstrap第三方库
- 基于jquery的bootstrap在线文本编辑器插件Summernote
- 基于jQuery、Bootstrap实现的仿知乎前端动态列表效果
- 基于Bootstrap的jQuery form表单验证插件
- 分享几款基于bootstrap和jquery的分页插件
- 基于bootstrap的响应式jQuery滚动新闻插件 _bootstrapNew
- 基于jquery的bootstrap在线文本编辑器插件Summernote
- 基于bootstrap的jQuery左右移动多选框插件 multiselect
- 平衡二叉树
- MYSQL com.mysql.jdbc.PacketTooBigException错误
- 关于SQLServer建表过程中所报的类似"xx 附近有语法错误"
- ESP8266作为Client方法收发的问题(ERROR CLOSED或ERROR 0,CLOSED)
- iOS 快速只获取Http响应头
- Angular2上应用基于jQuery的Bootstrap 3
- JEESZ-Zookeeper集群安装
- AOP
- Android开发笔记
- 百练_2972:确定进制
- select
- 使用mysql执行删除语句时出现的问题
- ES7、ES8新特性
- 程序员为什么会加班?????