原始碼

<h2>PageList VE Content Sample for Galio</h2>
<gallery widths="300px" heights="200px" perrow="2">
圖片:PageList1.jpg
圖片:PageList2.jpg
</gallery>
<table border=1>
  <tr><th class="tag">VE Tag</th></tr>
  <tr><td>
<pre>&lt;isee:pageList name=&quot;list1&quot; skin=&quot;listNx1-left&quot; items=&quot;&lt;%=ctrl.getListItems()%&gt;&quot; onSelect=&quot;list1Select&quot;/&gt;</pre>
This VE tag appears in /demo/pageListNx1.jsp of ISEE Demo project
  </td></tr>
  <tr><th>Style</th></tr>
  <tr><td>
<pre>.ve1 {
  position:absolute;
  left:90px;
  top:80px;
}
.ve1 .veNpgInd img{
  margin-left:50px;
}
.ve1 td{
  display:table;
  font:bold 24px sans-serif;
  text-align:center;
  border-collapse: collapse
}
.ve1 .veSelInd{
  display:table-cell;
  vertical-align:middle;
}
.ve1 .veSelInd img{
  width:21px;height:21px;
}
.ve1 a{
  background-image:url(/iseeDemo/skinLib/plist/001/s0.png);
  width:191px;
  height:41px;
  display:block;
  overflow:hidden;
  color:#ffffff;
  text-decoration: none;
  -ant-highlight-color:transparent;
}
.ve1 a:focus{
  background-image:url(/iseeDemo/skinLib/plist/001/s1.png);
}</pre>
  </td></tr>
  <tr><th>Structure</th></tr>
  <tr><td>
<pre>&lt;div id='z1' class='ve1'&gt;
  &lt;div class='veHeader'&gt;
    &lt;span class='veLpgInd'&gt;
      &lt;img name='z1Lpg' src='/iseeDemo/skinLib/plist/001/p0.gif' width='23' height='12'&gt;
    &lt;/span&gt;
    &lt;span id='z1pi' class='vePi'&gt;1/3&lt;/span&gt;
  &lt;/div&gt;
  &lt;table border='0' class='veList' cellpadding='0' cellspacing='6'&gt;
    &lt;tr&gt;&lt;td&gt;
      &lt;a href='javascript:list1.onclick(0)' style='margin-left:0px'&gt;item 1&lt;/a&gt;
      &lt;div class='veSelInd'&gt;&lt;img name='z1SelImg0' src='/iseeDemo/skinLib/plist/001/c0.gif'&gt;&lt;/div&gt;
    &lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;
      &lt;a href='javascript:list1.onclick(1)' style='margin-left:5px'&gt;item 2&lt;/a&gt;
      &lt;div class='veSelInd'&gt;&lt;img name='z1SelImg1' src='/iseeDemo/skinLib/plist/001/c0.gif'&gt;&lt;/div&gt;
    &lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;
      &lt;a href='javascript:list1.onclick(2)' style='margin-left:15px'&gt;item 3&lt;/a&gt;
      &lt;div class='veSelInd'&gt;&lt;img name='z1SelImg2' src='/iseeDemo/skinLib/plist/001/c0.gif'&gt;&lt;/div&gt;
    &lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;
      &lt;a href='javascript:list1.onclick(3)' style='margin-left:30px'&gt;item 4&lt;/a&gt;
      &lt;div class='veSelInd'&gt;&lt;img name='z1SelImg3' src='/iseeDemo/skinLib/plist/001/c0.gif'&gt;&lt;/div&gt;
    &lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;
      &lt;a href='javascript:list1.onclick(4)' style='margin-left:50px'&gt;item 5&lt;/a&gt;
      &lt;div class='veSelInd'&gt;&lt;img name='z1SelImg4' src='/iseeDemo/skinLib/plist/001/c0.gif'&gt;&lt;/div&gt;
    &lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class='veNpgInd'&gt;
    &lt;img name='z1Npg' src='/iseeDemo/skinLib/plist/001/np1.png' width='23' height='12'&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
  </td></tr>
  <tr><th>Javascript</th></tr>
  <tr><td>
<pre>&lt;script type='text/javascript'&gt;
  var z1Dp=new Array(&quot;item 1&quot;,&quot;item 2&quot;,&quot;item 3&quot;,&quot;item 4&quot;,&quot;item 5&quot;,
                      &quot;item 6&quot;,&quot;item 7&quot;,&quot;item 8&quot;,&quot;item 9&quot;,&quot;item 10&quot;,
                      &quot;item 11&quot;,&quot;item 12&quot;,&quot;item 13&quot;,&quot;item 14&quot;,&quot;item 15&quot;);
  function z1SwapImage(name,on,index){
    switch(name){
    case 'lastPage':
      if(on) document.z1Lpg.src='/iseeDemo/skinLib/plist/001/lp1.png';
      else document.z1Lpg.src='/iseeDemo/skinLib/plist/001/p0.gif';
      break;
    case 'nextPage':
      if(on) document.z1Npg.src='/iseeDemo/skinLib/plist/001/np1.png';
      else document.z1Npg.src='/iseeDemo/skinLib/plist/001/p0.gif';
      break;
    case 'curSel':
      if(on) document.images['z1SelImg'+index].src='/iseeDemo/skinLib/plist/001/c1.png';
      else document.images['z1SelImg'+index].src='/iseeDemo/skinLib/plist/001/c0.gif';
      break;
    }
  }
  var list1=new iscl.PageListCtrl(window,'z1',5,1,z1Dp,-1,list1Select,null,null,z1SwapImage);
&lt;/script&gt;</pre>
  </td></tr>
</table>