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