新版 ~ 表情貼圖、左右滑動式頁籤 ---- 撰寫測試中  

希望 ~ 各位賀冰友、能提供意見和建議 ....

STEP 1: 編排樣板

STEP 2: 載入表情符號 圖像

$.getJSON( url [ data ] [ success ] )

<div id="images"></div>
 
<script>
(function() {
  var APIurl='http://emma.pixnet.cc/album/elements?callback=?';
  $.getJSON( APIurl, {
    user:"e717",
    set_id:"7410921",
    trim_user:1,
    with_detail:1,
    page:1
  })
    .done(function( data ) {
      $.each( data, function( i, item ) {
        $( "images" ).html( i +" : " item );
        if ( i === 1 ) {
          return false;
        }
      });
    });
})();
</script>

images

STEP 3:取回的資料

 total : 184
 per_page : 100
 page : 1
 set : [object Object]
 elements : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],
 message : List albumelements successfully
 error : 0
  等分析完之後 ~ 再來分配裝設 ...... 太累了~~~~ 休息一下    目啾快脫窗 囉  

STEP 4:


看起來、表情貼圖 App、好像並沒有很複雜，程式碼也不長 ...
 
目前已完成的程式碼 ~
 
<script type="text/javascript">// <![CDATA[
$(function(){
       
var ta={user:"e717",set_id:"7410921",trim_user:1,with_detail:1,page:1};
var reg=new RegExp('http://pic.pimg.tw/e717/(.+)?','i');
var page1=[],page2=[],page3=[],page4=[],page5=[];

var loadpic = function( ax, bx, cx ) {

$.getJSON('http://emma.pixnet.cc/album/elements?callback=?',ax)
 .done(function( data ) {

 $.each( data.elements, function( i, item ) {

if(i<36){
 bx.append('<img src="http://pic.pimg.tw/e717/'+ item.original.match(reg)[1]+'" class="comment-emotion-item" />');
}  
    else{
    cx[i]='<img src="http://pic.pimg.tw/e717/'+ item.original.match(reg)[1]+'" class="comment-emotion-item" />';
    }     
      });});
    };
//---------------------

loadpic( ta,$("#page-01"),page1);
ta.set_id="13321966"; loadpic( ta,$("#page-02"),page2);


$("#icon-load").on('click',function(){
    $.each( page1, function( i, item ) { $("#page-01").append(page1[i]); });
    $.each( page2, function( i, item ) { $("#page-02").append(page2[i]); });
});

$('#icon-card').on('click',".comment-emotion-item",function(){

var MyStr = '[:emotion'+ $(this).attr('src').match(reg)[1]+']';
    MyComm = document.getElementById('comment_text');

if(MyComm.selectionStart || MyComm.selectionStart == '0'){
    var startPos = MyComm.selectionStart;
    var endPos = MyComm.selectionEnd;
        MyComm.value = MyComm.value.substring(0, startPos) + MyStr +
        MyComm.value.substring(endPos);
    }

        else{ MyComm.value += MyStr; }
 startPos+= MyStr.length;
MyComm.setSelectionRange(startPos,startPos);
  MyComm.focus();});

});
// ]]></script>

延伸閱讀 : 插入表情符號APP ~ 懶人包

文章標籤
全站熱搜
創作者介紹
創作者 灰 鴿 的頭像
灰 鴿

❤️灰鴿❤️

灰 鴿 發表在 痞客邦 留言(32) 人氣(242)