Skip to main content

Controls

Design patterns that serve as basic building blocks.

Infinite scroll

Turn any element into an infinite scrolling region with content that loads on demand. 필요에 따라 로드 내용에 무한 스크롤 영역으로 모든 요소를 켭니다.

Name Version License URL
Fuel UX 3.15.5 BSD-3 http://getfuelux.com/javascript.html#infinite-scroll

Contents

Usage

$(selector).infinitescroll();

Because of its dependency on a dataSource, you must initialize an infinitescroll() component via JavaScript:

$('#myInfiniteScroll').infinitescroll({
  //dataSource is required to append additional content
  dataSource: function(helpers, callback){
    //passing back more content
    callback({ content: '...' });
  },
  appendToEle : $('#myInfiniteScroll1 .table-view')
});

Markup

Simply place selector on an element of your choosing (preferably class="content").

<div class="content" id="myInfiniteScroll"></div>

Loads with button

Options

You can pass options via JavaScript at initialization.

Name Type Default Description
dataSource function null Called whenever the user scrolls the specified percentage towards the bottom. Arguments passed include a helpers object and callback function. The helpers object contains current percentage and scrollTop values. The callback function appends more content to the element. Pass an object back within the callback function structured as follows: { content: '...' } If you append no additonal content, add the attribute end: true to that object. This code will append '---------' by default and prevent further dataSource calls. Pass a string value for the end attribute to append that string instead of the default.
appendToEle function null 컨텐츠를 추가할 엘리먼트를 지정
hybrid boolean OR object false Indicates whether the code will use "hybrid mode" and require the user to click a button before loading additional content. If set to true, the code will use a default "load more" icon within the button. Additionally, you can set the control to an object with the following structure: { label: (string or jQuery obj) } The code will then append the label attribute value within the button instead of the default icon.
percentage number 95 Percentage scrolled to the bottom before calling the dataSource function for more content.
button boolean btn 하이브리드 형식 로시 버튼의 class 지정

Methods

.infinitescroll('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.

.infinitescroll('disable')

Ensures the infinite scrolling region is disabled

.infinitescroll('enable')

Ensures the infinite scrolling region is enabled

.infinitescroll('end')

Disables the infinite scrolling region and appends an “end” indicator

$('#myInfiniteScroll').infinitescroll('fetchData');
$('#myInfiniteScroll').infinitescroll('fetchData', {content: 'endicator'});
Parameter description
content Optional. String or jQuery object appended as an "end" indicator. Defaults to '---------''

.infinitescroll('fetchData')

Tells the infinite scrolling region to make a call to its dataSource for additional content.

$('#myInfiniteScroll').infinitescroll('fetchData');
$('#myInfiniteScroll').infinitescroll('fetchData', {force: true});
Parameter description
force Optional. Boolean dictating whether to bypass the button click in hybrid mode and immediately call dataSoruce for more content. Defaults to false