1、动态生成分页组件
效果演示
有以下HTML
和CSS
:
HTML结构
<div>
<!-- 存放JS动态生成组件容器:节点A -->
<div id="jsContainer">
<div>生成分页组件:</div>
</div>
<hr>
<!-- 以下是演示demo -->
<div class="demo">
<div>(Demo1) total: 10,current: 4</div>
<ul class="pagination">
<li>首页</li>
<li>2</li>
<li>3</li>
<li class="current">4</li>
<li>5</li>
<li>6</li>
<li>末页</li>
</ul>
</div>
<div class="demo">
<div>(Demo2) total: 0,current: 0</div>
<ul class="pagination hide"></ul>
</div>
<div class="demo">
<div>(Demo3) total: 3,current: 2</div>
<ul class="pagination">
<li>1</li>
<li class="current">2</li>
<li>3</li>
</ul>
</div>
<div class="demo">
<div>(Demo4) total: 10,current: 2</div>
<ul class="pagination">
<li>1</li>
<li class="current">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>末页</li>
</ul>
</div>
<div class="demo">
<div>(Demo5) total: 10,current: 9</div>
<ul class="pagination">
<li>首页</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class="current">9</li>
<li>10</li>
</ul>
</div>
</div>
CSS样式
.demo {
margin-bottom