開發緣由

自從新浪微博開放平臺推出以來，各種微博應用層出不窮，作為新浪微博的忠實用戶之一，我也曾開發過幾個微博應用，對于微博發布應用來說，有一個功能是必不可少的，那就是表情。表情功能的實現雖說不難，但卻比較繁瑣，首先要了解新浪微博開放平臺的表情API，然后通過某種方式調用，如果通過網頁后臺代碼直接讀取儲存到JavaScript變量中，又會拖慢網頁加載速度，如果采用AJAX讀取，又要解決跨域問題，即便成功讀取到表情數據了，又必須考慮表情分類，翻頁等等等等問題，還需要考慮表情的插入方式并非簡單的在文本最后插入，而是在光標所在處插入，還應該能夠替換掉已選中文字，還要涉及到不同瀏覽器的兼容問題……

好吧，上面這段文字你可以跳過不看，你只需要知道表情功能的實現非常繁瑣就行了（+_+），為了方便以后微博應用的開發，同樣方便其他應用開發者，此款表情插件就此誕生。

插件簡介

其實插件簡介不必多說，用過新浪微博的應該都懂。自認為制作得還是比較像的：

Demo就不給了，上圖是我們學校樹洞應用的截圖，算是校內性質，不提倡校外人士使用，下載文件中附帶Demo，雖然比較簡陋一些。

有何更新

• 修正同一頁面中對不同文本框使用該插件時插入位置錯誤的BUG（感謝 @Belin_love 提出）

使用方法

首先不要忘記在head中加載CSS文件：

    

      

        
          <style
        
        
        
        
          type
        
        
          =
        
        
          "text/css"
        
        
        
        
          href
        
        
          =
        
        
          "jquery.sinaEmotion-1.0.css"
        
        
          ></style>
        
      
    
  

確保你的網頁中引入了jQuery庫：

    

      

        
          <script
        
        
        
        
          type
        
        
          =
        
        
          "text/javascript"
        
        
        
        
          src
        
        
          =
        
        
          "http://code.jquery.com/jquery-1.8.0.min.js"
        
        
          ></script>
        
      
    
  

然后引入js文件：

    

      

        
          <script
        
        
        
        
          type
        
        
          =
        
        
          "text/javascript"
        
        
        
        
          src
        
        
          =
        
        
          "jquery.sinaEmotion-1.0.min.js"
        
        
          ></script>
        
      
    
  

調用格式如下：

    

      

        
          $
        
        
          (
        
        
          '#face'
        
        
          ).
        
        
          sinaEmotion
        
        
          ({
        
        
        
        
          //表情按鈕
        
        
        
      
      

        
           target
        
        
          :
        
        
          $
        
        
          (
        
        
          '.emotion'
        
        
          )
        
        
        
        
          //目標文本框，可以是input或者是textarea
        
        
        
      
      

        
           app_id
        
        
          :
        
        
        
        
          ''
        
        
        
        
          //你的App Key
        
        
        
      
      

        
          });
        
      
    
  

如果你的表情是在textarea的同一個表單下，也可以直接這樣調用：

    

      

        
          $
        
        
          (
        
        
          '#face'
        
        
          ).
        
        
          sinaEmotion
        
        
          ();
        
      
    
  

App Key的可從 新浪微博開放平臺 獲得。

下載地址

谷歌開源項目地址： http://code.google.com/p/jquery-sina-emotion/
新浪微盤下載地址： http://vdisk.weibo.com/s/b0y9I

還有話說

如果您愿意支持一下的話，歡迎戳一戳我的博客→ http://www.clanfei.com ←

由于前段時間博客大規模改版，再加上購置了一級域名，現階段訪問量比較慘淡ToT。。如蒙關照，不勝感激。。

=======================簽 名 檔=======================
原文地址（我的博客）： http://www.clanfei.com/2012/08/1644.html
歡迎訪問交流，至于我為什么要多弄一個博客，因為我熱愛前端，熱愛網頁，我更希望有一個更加自由、真正屬于我自己的小站，或許并不是那么有名氣，但至少能夠讓我為了它而加倍努力。。
=======================簽 名 檔=======================

新浪微博表情jQuery插件 v1.2——方便地實現表情插入功能