開發(fā)緣由

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

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

插件簡介

其實(shí)插件簡介不必多說，用過新浪微博的應(yīng)該都懂。自認(rèn)為制作得還是比較像的：

Demo就不給了，上圖是我們學(xué)校樹洞應(yīng)用的截圖，算是校內(nèi)性質(zhì)，不提倡校外人士使用，下載文件中附帶Demo，雖然比較簡陋一些。

有何更新

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

使用方法

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

    

      

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

確保你的網(wǎng)頁中引入了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>
        
      
    
  

調(diào)用格式如下：

    

      

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

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

        
           app_id
        
        
          :
        
        
        
        
          ''
        
        
        
        
          //你的App Key
        
        
        
      
      

        
          });
        
      
    
  

如果你的表情是在textarea的同一個(gè)表單下，也可以直接這樣調(diào)用：

    

      

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

App Key的可從 新浪微博開放平臺(tái) 獲得。

下載地址

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

還有話說

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

由于前段時(shí)間博客大規(guī)模改版，再加上購置了一級(jí)域名，現(xiàn)階段訪問量比較慘淡ToT。。如蒙關(guān)照，不勝感激。。

=======================簽 名 檔=======================
原文地址（我的博客）： http://www.clanfei.com/2012/08/1644.html
歡迎訪問交流，至于我為什么要多弄一個(gè)博客，因?yàn)槲覠釔矍岸耍瑹釔劬W(wǎng)頁，我更希望有一個(gè)更加自由、真正屬于我自己的小站，或許并不是那么有名氣，但至少能夠讓我為了它而加倍努力。。
=======================簽 名 檔=======================

新浪微博表情jQuery插件 v1.2——方便地實(shí)現(xiàn)表情插入功能