Question

我在Liferay 6.2中使用Alloy UI分页组件，我试图自定义prev和nextc控件，我有这样的事情：

<div id="myDataTable"></div>    
<div id="pagination" class="aui-pagination aui-pagination-centered">
    <ul class="aui-pagination-content">
      <li><a href="#">Prev</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">Next</a></li>
    </ul>
 </div>

myDataTable是......一个DataTable组件

然后是YUI代码：

new Y.Pagination({
        contentBox: '#pagination .aui-pagination-content',
        circular:false,
        page: 1,
        strings: {
            prev:'&laquo;',
            next: '&raquo;',
        },
        on: {
          changeRequest: function(event) {
            if (event.state.page === 1) {
              dataTable.set('data', data1);
            } else if (event.state.page === 2) {
              dataTable.set('data', data2);
            } else if (event.state.page === 3) {
              dataTable.set('data', data3);
            }
          }
        },
        total:3
      }).render();

我想要做的是隐藏分页中的所有页面，并且只使用背景图像的prev和next控件，我注意到您可以通过更改YUI代码上的字符串来更改控件但仅限于允许ASCII字符，我需要包含图像或在那里插入CSS代码的方法。任何帮助都将非常感激。

Answer 1

可能你可以用CSS做到这一点。左侧导航按钮将是第一个子项，右侧按钮将是分页内容类的最后一个子项。调用render方法后，您可以通过JS

设置导航按钮的innerHTML

Y.one('.pagination-content .pagination-control:first-child').setHTML('<div>Content of left navigation button</div>');
Y.one('.pagination-content .pagination-control:last-child).setHTML('<div>Content of right navigation button</div>');

AlloyUI：自定义分页组件

1 个答案: