hypejunction/hypelists

此包已被 废弃 并不再维护。未建议替换包。

Elgg 的 AJAX 列表

安装: 902

依赖项: 4

建议者: 0

安全: 0

星级: 0

关注者: 1

分支: 1

类型:elgg-plugin

5.1.3 2018-08-10 21:44 UTC

README

Elgg 3.0

一组工具,可以提高用户体验并简化开发人员常见的列表模式。

功能

  • 与核心和现有插件的无缝集成
  • AJAX 列表分页和无限滚动
  • 预先和后续列表页面的懒加载
  • 列表自动刷新
  • 创建可排序/可搜索列表的界面

服务器端

以下选项被 elgg_list_entities()elgg_view_entity_list() 以及 page/components/listpage/components/gallery 视图接受。如果您的选项中有 'pagination' => true,则这些参数才会生效。需要传递给 jQuery 插件的附加选项可以以 data- 前缀开头。

  • 'list_id' STRING 是一个可选参数,但强烈建议将其传递给您的列表。列表 ID 必须对页面是唯一的。
  • 'pagination_type' STRING default(带页码导航的分页栏)或 infinite(前后导航)
  • 'position' STRING 可用于指定分页项的位置。 beforeafterboth
  • '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);