list多列列表怎样加入超裂解

mrf

在https://chuanke.baidu.com/v5628113-208676-1281145.html百度传课的学习中，多列列表中并没有讲，点击图片或者文字进入超链接，对于介绍的产品更为详细的介绍！在我的项目中有类似的应用，不知怎样加入超链。而且这些图片、文字、超链接都在数据库里。怎么实现？！
我的前台脚本如下：
<?xml version="1.0" encoding="utf-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window"
  design="device:m;">  
  <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;top:350px;left:200px;">
    <div component="$UI/system/components/justep/data/data" autoLoad="true"
      xid="data1" idColumn="mc" onCustomRefresh="data1CustomRefresh">
      <column label="名称" name="mc" type="String" xid="xid1"/>  
      <column label="图片" name="tp" type="String" xid="xid2"/>  
      <column label="链接" name="zxwj" type="String" xid="xid3"/>  
      <data xid="default1">[{"mc":"111","tp":"222","zxwj":"1111"}]</data>
    </div>
  </div>  
  <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
    xid="panel1">
    <div class="x-panel-content" xid="content1">
      <div component="$UI/system/components/justep/contents/contents" class="x-contents x-full"
        active="0" xid="contents1">
        <div class="x-contents-content" xid="content2">
          <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
            xid="panel2">
            <div class="x-panel-top" xid="top1">
              <div component="$UI/system/components/justep/titleBar/titleBar"
                class="x-titlebar" xid="titleBar1" title="系统导航">
                <div class="x-titlebar-left" xid="left1"/>  
                <div class="x-titlebar-title" xid="title1">系统导航</div>  
                <div class="x-titlebar-right reverse" xid="right1"/>
              </div>
            </div>  
            <div class="x-panel-content" xid="content6">
             <table  width="100%"   height="100%">
            <tr>
                <td valign="middle" >
              <div component="$UI/system/components/justep/list/list" class="x-list "
                xid="list1" style="height:59px;" data="data1">
                <ul class="x-list-template x-min-height" xid="listTemplateUl1"
                  componentname="$UI/system/components/justep/list/list#listTemplateUl"
                  id="undefined_listTemplateUl1">
                  <li xid="li1" style="height:90px;" class="col-xs-4 "
                    componentname="li(html)" id="undefined_li1">
                    <div xid="div1" class="media">
                      <div xid="div2" class="media-top" style="text-align:center;">
                        <img src="" alt="" xid="image1" bind-attr-src=" val(&quot;tp&quot;)"
                          style="text-align:center;width:69px;height:50px;"/>
                      </div>
                      <div xid="div3" class="media-body" style="height:30px;text-align:center;">
                        <div component="$UI/system/components/justep/output/output"
                          class="x-output" xid="output1" style="height:40px;" bind-ref="ref(&quot;mc&quot;)"/>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
             </td>
            </tr>
        </table>
            </div>
          </div>
        </div>  
        <div class="x-contents-content" xid="content3">
          <div component="$UI/system/components/justep/windowContainer/windowContainer"
            class="x-window-container" xid="windowContainer1" src="./gyhx.w" autoLoad="true"/>
        </div>  
        <div class="x-contents-content" xid="content4">
          <div component="$UI/system/components/justep/windowContainer/windowContainer"
            class="x-window-container" xid="windowContainer2" src="./khcx.w" autoLoad="true"/>
        </div>  
        <div class="x-contents-content" xid="content5">
          <div component="$UI/system/components/justep/windowContainer/windowContainer"
            class="x-window-container" xid="windowContainer3" src="./zhxx.w" autoLoad="true"/>
        </div>
      </div>
    </div>  
    <div class="x-panel-bottom" xid="bottom1">
      <div component="$UI/system/components/justep/button/buttonGroup" class="btn-group x-card btn-group-justified"
        tabbed="true" xid="buttonGroup1" selected="button1">
        <a component="$UI/system/components/justep/button/button" class="btn btn-default btn-icon-top"
          label="主页" xid="button1" icon="glyphicon glyphicon-home" target="content2">
          <i xid="i1" class="glyphicon glyphicon-home"/>  
          <span xid="span1">主页</span>
        </a>  
        <a component="$UI/system/components/justep/button/button" class="btn btn-default btn-icon-top"
          label="关于划小" xid="button2" icon="linear linear-code" target="content3">
          <i xid="i2" class="linear linear-code"/>  
          <span xid="span2">关于划小</span>
        </a>  
        <a component="$UI/system/components/justep/button/button" class="btn btn-default btn-icon-top"
          label="信息查询" xid="button3" icon="icon-android-search" target="content4">
          <i xid="i3" class="icon-android-search"/>  
          <span xid="span3">信息查询</span>
        </a>  
        <a component="$UI/system/components/justep/button/button" class="btn btn-default btn-icon-top"
          label="我的" xid="button4" icon="icon-person" target="content5">
          <i xid="i4" class="icon-person"/>  
          <span xid="span4">我的</span>
        </a>
      </div>
    </div>
  </div>
</div>

liangyongfei

a标签里面  bind-attr-src 绑定data组件字段！就可以生成  b标签  src属性对应的值！就是超链接！

还有一种方法是！在list 点击行点击事件中，写js代码实现！

http://docs.wex5.com/wex5-ui-question-list-2019/

mrf

非常感谢你的回复！我不知道要超链接嵌入到当前页有怎么做了！

liangyongfei

mrf 发表于 2017-10-30 19:53
非常感谢你的回复！我不知道要超链接嵌入到当前页有怎么做了！

如果嵌套的页面是 x5开发的 w页面！可以使用 windowContainer ，
如果不是wex5开发的！超链接打开的也是单页应用！ 页面里没有重定向，也可以嵌套使用iframe
http://docs.wex5.com/wex5-ui-question-list-2152/

如果你打开的网页，不是单页应用，最好不要嵌套在APP 中，因为重定向会导致不是单页应用的！
可以使用浏览器打开这个网址！
http://docs.wex5.com/wex5-app-question-list-2012/

mrf

是用WEBX5开发的单页模式，但是是用windowcontainer组件怎样加入了，这个组件我在做主页的时候使用过。但是现在是在list组件线面加了div使用了media控件显示的图片和output显示的文字，那么我要点击图片或者文字要跳转到新的页面，并嵌入到当前的页面，应用的确不一样。开始的时候我也考虑过这样使用，但是不知该怎样使用，无从下手，多次尝试失败！

liangyongfei

mrf 发表于 2017-10-31 10:50
是用WEBX5开发的单页模式，但是是用windowcontainer组件怎样加入了，这个组件我在做主页的时候使用过。但是 ...

windowcontainer组件用法参考
http://doc.wex5.com/windowcontainer-like-light-iframe/
http://doc.wex5.com/comps-windowcontainer/

指定 src 属性是另一个页面的URL即可！

mrf

非常感谢你的支持！我觉得还是使用div里面的onClick写脚本可以在不同的content之间切换，达到类似网页之间的切换，但是我不知道切换的代码怎么写了？

liangyongfei

mrf 发表于 2017-11-1 16:01
非常感谢你的支持！我觉得还是使用div里面的onClick写脚本可以在不同的content之间切换，达到类似网页之间 ...

http://doc.wex5.com/comps-contents/
看文档啊！  contents组件的切换

案例
/UI2/system/components/justep/contents/demo/contents.w