hypejunction / hypelists
此包已被 废弃 并不再维护。未建议替换包。
Elgg 的 AJAX 列表
5.1.3
2018-08-10 21:44 UTC
Requires
- php: >=5.3
- composer/installers: ~1.0
This package is auto-updated.
Last update: 2020-03-01 00:13:18 UTC
README
一组工具,可以提高用户体验并简化开发人员常见的列表模式。
功能
- 与核心和现有插件的无缝集成
- AJAX 列表分页和无限滚动
- 预先和后续列表页面的懒加载
- 列表自动刷新
- 创建可排序/可搜索列表的界面
服务器端
以下选项被 elgg_list_entities()
、elgg_view_entity_list()
以及 page/components/list
和 page/components/gallery
视图接受。如果您的选项中有 'pagination' => true
,则这些参数才会生效。需要传递给 jQuery 插件的附加选项可以以 data-
前缀开头。
'list_id'
STRING 是一个可选参数,但强烈建议将其传递给您的列表。列表 ID 必须对页面是唯一的。'pagination_type'
STRINGdefault
(带页码导航的分页栏)或infinite
(前后导航)'position'
STRING 可用于指定分页项的位置。before
、after
、both
'num_pages'
INT 可用于指定要显示的页码导航项的数量,使用 0 仅显示“下一页”和“上一页”链接'lazy_load'
INT 可用于初始化页面懒加载'auto_refresh'
INT 可用于指定在多少秒的间隔内获取新项目'reversed'
BOOL 可用于指定反转列表。如果列表已反转,则假定新项目位于列表的末尾
客户端
已从服务器端接收必要参数的列表将自动实例化。如果您需要以编程方式实例化列表,请使用 $.hypeList(options)
。
// Instantiate a new list $('.elgg-list.my-list').hypeList({ baseUrl: false, // Data source count: 0, // Number of items in the list offset: 0, // Current offset from the beginning of the list offsetKey: 'offset', // Offset key limit: 10, // Number of items per page listId: '', // List identifier unique to the page pagination: 'default', // Pagination type: 'default', 'infinite' paginationPosition: 'after', // Pagination position: 'before', 'after', 'both' paginationNumPages: 10, // Number of page links to display in the pager classActive: 'elgg-state-selected', // CSS class pertinent to active elements classDisabled: 'elgg-state-disabled', // CSS class pertinent to disabled elements classLoading: 'elgg-state-loading', // CSS class pertinent to pending elements textNoResults: '', // Text displayed when no items were found in the list textNext: elgg.echo('next'), // Text for next link textPrev: elgg.echo('previous'), // Text for previous link keyTextBefore: 'lists:add:before', // Language key for before link (will receive limit as parameter) keyTextAfter: 'lists:add:after', // Language key for before link (will receive limit as parameter) lazyLoad: 10, // Number of pages to lazy load autoRefresh: 60, // Fetch new items at this interval (in seconds) reversed: false, // List is reversed that is new items are appended to the end of the list scrollTopOffset: -100, // Additional offset in pixels for when the page is scrolled to the top of the list listTime: 0, // Timestamp at which the list was generated, sent with AJAX requests showEffect: 'highlight', // jQuery UI effect used for toggling item visibility selectorDelete: '.elgg-menu-item-delete > a', // CSS selector of an anchor that will trigger a delete action }); // Public methods // Navigate to a page with a certain index // For default pagination type, page with pageIndex is loaded and displayed // For infinite pagination type, all pages in range from currently visible pages to the page with pageIndex are loaded and displayed $('.elgg-list').trigger('goToPage', [pageIndex]); // Trigger refresh // Reloads the page and appends new items if any // If no pageIndex is provided, it's determined by pagination type // goToPage parameter can be used to navigate to the page once new items have been fetched // goToPage flag is useful when a new post was made and you want to display the post to the user $('.elgg-list').trigger('fetchNewItems', [pageIndex, goToPage]); // Remove items from the list and reindex $('.elgg-list').trigger('removeItems', [$items]); // Add new items to the list $('.elgg-list').trigger('addFetchedItems', [ajaxData]); // Events // Event triggered whenever the list is first rendered // Callback will receive list options as a second parameter $('.elgg-list').on('ready', callback); // Event triggered whenever an item is added, removed or hidden from a list // Callback will receive list options as a second parameter $('.elgg-list').on('change', callback);