PageListGalio

<isee:pageList name="list1" skin="listNx1-left" items="<%=ctrl.getListItems()%>" onSelect="list1Select"/>

This VE tag appears in /demo/pageListNx1.jsp of ISEE Demo project

.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);
}

<div id='z1' class='ve1'>
  <div class='veHeader'>
    <span class='veLpgInd'>
      <img name='z1Lpg' src='/iseeDemo/skinLib/plist/001/p0.gif' width='23' height='12'>
    </span>
    <span id='z1pi' class='vePi'>1/3</span>
  </div>
  <table border='0' class='veList' cellpadding='0' cellspacing='6'>
    <tr><td>
      <a href='javascript:list1.onclick(0)' style='margin-left:0px'>item 1</a>
      <div class='veSelInd'><img name='z1SelImg0' src='/iseeDemo/skinLib/plist/001/c0.gif'></div>
    </td></tr>
    <tr><td>
      <a href='javascript:list1.onclick(1)' style='margin-left:5px'>item 2</a>
      <div class='veSelInd'><img name='z1SelImg1' src='/iseeDemo/skinLib/plist/001/c0.gif'></div>
    </td></tr>
    <tr><td>
      <a href='javascript:list1.onclick(2)' style='margin-left:15px'>item 3</a>
      <div class='veSelInd'><img name='z1SelImg2' src='/iseeDemo/skinLib/plist/001/c0.gif'></div>
    </td></tr>
    <tr><td>
      <a href='javascript:list1.onclick(3)' style='margin-left:30px'>item 4</a>
      <div class='veSelInd'><img name='z1SelImg3' src='/iseeDemo/skinLib/plist/001/c0.gif'></div>
    </td></tr>
    <tr><td>
      <a href='javascript:list1.onclick(4)' style='margin-left:50px'>item 5</a>
      <div class='veSelInd'><img name='z1SelImg4' src='/iseeDemo/skinLib/plist/001/c0.gif'></div>
    </td></tr>
  </table>
  <div class='veNpgInd'>
    <img name='z1Npg' src='/iseeDemo/skinLib/plist/001/np1.png' width='23' height='12'>
  </div>
</div>

<script type='text/javascript'>
  var z1Dp=new Array("item 1","item 2","item 3","item 4","item 5",
                      "item 6","item 7","item 8","item 9","item 10",
                      "item 11","item 12","item 13","item 14","item 15");
  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);
</script>