xieshengjie
/
gdsx


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
							<html>
<head>

<script src="<%=request.getContextPath() %>/resource/plugin/jqueryui/js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>


<script src="<%=request.getContextPath() %>/resource/plugin/jqueryui/js/ui.tabs.paging.js"></script>
<script type="text/javascript">
$(function($) {
   $('#example').tabs();
   $('#example').tabs('paging', { cycle: true, follow: true } );
});
</script>
<style>
.tabs { 
   background-color: #eee; 
   border-bottom: 1px solid #ccc; 
   list-style: none;
   margin: 0; 
   padding: 10px 5px 1px 5px;
   zoom:1; 
}
.tabs:after { 
   display: block; 
   clear: both; 
   content: " "; 
}
.tabs li {
   float: left; 
   margin: 0 1px 0 0; 
   padding-left: 5px; 
}
.tabs a {
   display: block; 
   position: relative; 
   top: 1px; 
   border: 1px solid #ccc;
   border-bottom: 0; 
   z-index: 2; 
   padding: 2px 9px 3px; 
   color: #444; 
   text-decoration: none;
   white-space: nowrap;
}
.tabs a:focus,
.tabs a:active { 
   outline: none; 
}
.tabs a:hover,
.tabs a:focus,
.tabs a:active { 
   background: #fff; 
   cursor: pointer; 
}
.ui-tabs-active a { 
   background-color: #fff; 
   color: #000; 
   font-weight: bold; 
   padding: 2px 8px 1px; 
   border-bottom: 1px solid #fff; 
   border-top: 3px solid #f1f1f1; 
   border-left: 1px solid #f1f1f1; 
   border-right: 1px solid #f1f1f1; 
   margin-bottom: -1px; 
   overflow: visible;
}
.ui-tabs-hide { 
   display: none; 
   background-color: #fff 
}
.ui-tabs-panel {
   padding: 0.5em;
}
.ui-tabs-paging-next { 
   float: right !important;
}
.ui-tabs-paging-prev a,
.ui-tabs-paging-next a {
   display: block; 
   position: relative; 
   top: 1px; 
   border: 0;
   z-index: 2; 
   padding: 0px; 
   color: #444; 
   text-decoration: none;
   background: #eee; 
   cursor: pointer;
}
.ui-tabs-paging-next a:hover,
.ui-tabs-paging-next a:focus,
.ui-tabs-paging-next a:active,
.ui-tabs-paging-prev a:hover,
.ui-tabs-paging-prev a:focus,
.ui-tabs-paging-prev a:active { 
   background: #eee; 
}
.ui-tabs-paging-disabled {
   visibility: hidden;
}
</style>
</head>
<body>
<div id="example" style="width:500px">
  <ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
    <li><a href="#tab5">Tab 5</a></li>
    <li><a href="#tab6">Tab 6</a></li>
    <li><a href="#tab7">Tab 7</a></li>
    <li><a href="#tab8">Tab 8</a></li>
    <li><a href="#tab9">Tab 9</a></li>
    <li><a href="#tab10">Tab 10</a></li>
    <li><a href="#tab11">Tab 11</a></li>
    <li><a href="#tab12">Tab 12</a></li>
    <li><a href="#tab13">Tab 13</a></li>
    <li><a href="#tab14">Tab 14</a></li>
    <li><a href="#tab15">Tab 15</a></li>

  </ul>
  <div id="tab1">Tab 1</div>
  <div id="tab2">Tab 2</div>
  <div id="tab3">Tab 3</div>
  <div id="tab4">Tab 4</div>
  <div id="tab5">Tab 5</div>
  <div id="tab6">Tab 6</div>
  <div id="tab7">Tab 7</div>
  <div id="tab8">Tab 8</div>
  <div id="tab9">Tab 9</div>
  <div id="tab10">Tab 10</div>
  <div id="tab11">Tab 11</div>
  <div id="tab12">Tab 12</div>
  <div id="tab13">Tab 13</div>
  <div id="tab14">Tab 14</div>
  <div id="tab15">Tab 15</div>
</div>
</body>
</html>