jQuery QQ表情插件jquery.qqFace.js ---qqFace的使用

平時我們對qqFace這個jquery插件使用的並不多，但是當我們做即時通訊的時候，那它就必不可少了！

1）我們首先需要下載qqFace插件，傳送門：

                                http://www.jq22.com/jquery-info365

 2）我們直接點擊下載就可以，壓縮包中給了我們成熟的案例，我們只需要引用相應的js就可以；

3）在樣例index.html中，我們會發現有很多css樣式，我們都需要嗎？並不是，我們只需要其中的四個樣式就可以了，如圖：

 

需要的css樣式

4）有了css樣式接下來就需要引入js了，在這里我們需要引入jquery.js和jquery.qqFace.js，這時我們一定要注意jquery.js一定要在jquery.qqFace.js之前引用否則會報錯：

 

報錯樣式

5）引入css和js樣式我們直接可以愉快地粘貼樣例代碼了：

 

js代碼

6）對應的html代碼：

 

html代碼

7最終樣式：

 

頁面樣式

作者：JuMinggniMuJ
鏈接： https://www.jianshu.com/p/f0792f6c181f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

 

---------------------------------------------------------------自己項目--------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

  //qqFace加載的js
   $(function(){
       $('.emotion').qqFace({
           // id : 'facebox',
           assign:'saytext',
           path:'{{asset("/static/jQuery_qqFace/qqFace/arclist/")}}/'    //表情存放的路徑
       });
       // $(".sub_btn").click(function(){
       //     var str = $("#saytext").val();
       //     $("#show").html(replace_em(str));
       // });
   });

   //qq表情包查看結果
   function replace_em(str){
       str = str.replace(/\</g,'&lt;');
       str = str.replace(/\>/g,'&gt;');
       str = str.replace(/\n/g,'<br/>');
       str = str.replace(/\[em_([0-9]*)\]/g,'<img src="{{asset('/static/jQuery_qqFace/qqFace/arclist/$1.gif')}}" border="0" />');
       return str;
   }