EZo UIBuilder中嵌入微博分享按鈕【實例】

時間 2019-11-18

標籤 ezo uibuilder 嵌入微博分享按鈕實例简体版

原文原文鏈接

EZo UIBuilder中除了能夠經過GUL 標籤快速畫出gxt 效果的畫面外，還能夠輕鬆嵌入html標籤及javascript，實現web端的任意擴展性。經過SN分享相關文章已成爲網站不可缺乏的一部分。如下爲在GUL中嵌入sina 微博分享按鈕的實例代碼：javascript

<page>  
  <hp>  
    <div id="sinaweibo">  
    </div>  
  </hp>  
  <js init='js:this'>  
    <![CDATA[ 
    var _w = 72 , _h = 16; 
    var param = { 
      url:location.href, 
      type:'3', 
      count:'1', /**是否顯示分享數，1顯示(可選)*/ 
      appkey:'', /**您申請的應用appkey,顯示分享來源(可選)*/ 
      title:'', /**分享的文字內容(可選，默認爲所在頁面的title)*/ 
      pic:'', /**分享圖片的路徑(可選)*/ 
      ralateUid:'', /**關聯用戶的UID，分享微博會@該用戶(可選)*/ 
      language:'zh_cn', /**設置語言，zh_cn|zh_tw(可選)*/ 
      rnd:new Date().valueOf() 
    } 
    var temp = []; 
    for( var p in param ){ 
      temp.push(p + '=' + encodeURIComponent( param[p] || '' ) ) 
    } 
    var sinaweiboDiv = document.getElementById("sinaweibo"); 
    //sinaweiboDiv.setAttribute("height",_h); 
    //console.log(sinaweibo); 
    sinaweibo.innerHTML = '<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>'; 
    ]]>  
  </js>  
</page>

一、<hp></hp>中能夠嵌入html標籤html

二、<js></js>標籤內寫javascript代碼java

三、 <div id="sinaweibo"> </div> 圖片定位位置web

四、經過sina微博開放平臺取得所需的分享按鈕JS代碼http://open.weibo.com/sharebuttonapp

分享按鈕應用在EZo UIBuilder 快速打造滬深股市實時行情的demo地址:http://www.ezoui.com/tryit/User/feizhang/sinastock.gul網站

ps：GUL標籤含義請查閱官網http://www.ezoui.com.cn
關鍵點用sinaweibo.innerHTML代碼替代微博平臺生成的document.write進行代碼定位ui