Angular2上應用基于jQuery的Bootstrap 3 - iconpicker

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 -S
cnpm 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: ,
      cols: ,
      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/#