Skip to main content

Індекс списку

Навігація

Індекс списку

Індекс списку дозволяє миттєво отримати доступ до певного розділу перегляду списку без прокручування кожного розділу.

Макет індексу списку

Макет індексу єдиного списку досить простий:
<div class="page">
  <div class="navbar">...</div>

  <!--Елемент List Index має бути прямим дочірнім елементом сторінки -->
  <div class="list-index"></div>

  <!-- Прокручуваний вміст сторінки-->
  <div class="page-content">...</div>
</div>

Перелік методів застосунку Індекс списку

Давайте розглянемо пов’язані методи роботи програми з індексом списку:
app.listIndex.create(parameters)- створити екземпляр List Index

● parameters - object. - Об'єкт зі списком параметрів індексу

Метод повертає створений екземпляр List Index

app.listIndex.destroy(el)- знищити екземпляр List Index

● el - HTMLElement or string (with CSS Selector) or object. - Елемент List Index або екземпляр List Index для знищення.

app.listIndex.get(el)- отримати екземпляр List Index за елементом HTML.

● el - HTMLElement or string (with CSS Selector). - Елемент індексу списку.

Метод повертає екземпляр List Index

Список параметрів індексу

Тепер давайте подивимося на список доступних параметрів, необхідних для створення списку індексу:
ПараметрЗа замовчуваннямОписТип
el
Елемент індексу списку. HTMLElement або рядок із CSS-селектором елемента індексу списку
HTMLElement

string

listEl
Пов’язаний елемент перегляду списку. HTMLElement або рядок із CSS-селектором елемента List View
HTMLElement

string

indexes
auto
Масив з індексами. Якщо не передано, він автоматично згенерує його на основі елементів item-divider і list-group-title всередині переданого елементаList View у параметрі listEl
String

array

scrollList
true
Автоматично прокрутить пов’язаний список до вибраного покажчика
boolean
label
false
Вмикає спливаючу підказку з вибраним індексом, коли ви проводите пальцем по індексу списку
boolean
iosItemHeight
14
Висота одного елемента індексу. Необхідно розрахувати динамічний індекс і кількість індексів, які поміщаються на екрані. Для теми iOS
number
mdItemHeight
14
Висота одного елемента індексу. Необхідно розрахувати динамічний індекс і кількість індексів, які поміщаються на екрані. Для теми MD
number
auroraItemHeight
14
Висота одного елемента індексу. Необхідно розрахувати динамічний індекс і кількість індексів, які поміщаються на екрані. Для теми «Аврора».
number
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var listIndex = app.listIndex.create({
  el: '.list-index',
  on: {
    select: function () {
      console.log('Index selected')
    },
  },
})

Перелік методів і властивостей індексу

Отже, щоб створити індекс списку, ми повинні викликати:
var listIndex = app.listIndex.create({ /* parameters */ })
Після цього у нас є його ініціалізований екземпляр (наприклад, змінна listIndex у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість Опис
listIndex.app
Посилання на глобальний екземпляр застосунку
listIndex.el
Елемент HTML індексу списку
listIndex.$el
Примірник Dom7 з елементом HTML індексу списку
listIndex.ul
Динамічно створений внутрішній елемент HTML <ul>
listIndex.$ul
Екземпляр Dom7 із динамічно створеним внутрішнім елементом HTML <ul>
listIndex.listEl
HTML-елемент пов’язаного списку, переданий у параметрі listEl
listIndex.$listEl
Примірник Dom7 із пов’язаним HTML-елементом List, переданим у параметрі listEl
listIndex.indexes
Масив з обчисленими індексами
listIndex.params
Список параметрів індексу
Методи
МетодОпис
listIndex.update()
Перераховує індекси, розміри та повторно відображає індекс списку
listIndex.scrollListToIndex(itemContent)
Прокручує пов’язаний список до вказаного вмісту покажчика
listIndex.destroy()
Знищує екземпляр індексу списку
listIndex.on(event, handler)
Додати обробник подій
listIndex.once(event, handler)
Додати обробник подій, який буде видалено після запуску
listIndex.off(event, handler)
Видалити обробник подій
listIndex.off(event)
Видалити всі обробники для вказаної події
listIndex.emit(event, ...args)
Запустити подію на примірнику індексу

Список подій індексу

Індекс списку запускатиме такі події DOM в елементі індексу списку та події в екземплярі застосунку та індексу списку:

Події DOM

ПодіяОб'єктОпис
listindex:select
Елемент індексу списку

<div class="list-index">

Подія буде ініційована під час вибору індексу, а не клацанням або гортанням
listindex:click
Елемент індексу списку

<div class="list-index">

Подія буде ініційована після клацання індексу
listindex:beforedestroy
Елемент індексу списку

<div class="list-index">

Подія буде ініційована безпосередньо перед тим, як екземпляр List Index буде знищено

Події екземплярів застосунку та індексу списку

Екземпляр List Index генерує події як для власного екземпляра, так і для екземпляра застосунку. Події екземплярів за стосунку мають однакові назви з префіксом listIndex.
ПодіяАргументОписОб'єкт
select
(listIndex, itemContent)
Подія буде ініційована під час вибору індексу, а не клацанням або гортанням. Як аргумент обробник події отримує екземпляр індексу списку та вміст вибраного елемента індексу
listIndex
listIndexSelect
(listIndex, itemContent)
Подія буде ініційована під час вибору індексу, а не клацанням або гортанням. Як аргумент обробник події отримує екземпляр індексу списку та вміст вибраного елемента індексу
app
click
(listIndex, itemContent)
Подія буде ініційована після клацання індексу. Як аргумент обробник події отримує екземпляр індексу списку та вміст елемента індексу на який клацнули
listIndex
listIndexClick
(listIndex, itemContent)
Подія буде ініційована після клацання індексу. Як аргумент обробник події отримує екземпляр індексу списку та вміст елемента індексу на який клацнули
app
beforeDestroy
(listIndex)
Подія буде ініційована безпосередньо перед тим, як екземпляр List Index буде знищено. Як аргумент обробник події отримує екземпляр індексу списку
listIndex
listIndexBeforeDestroy
(listIndex)
Подія буде ініційована безпосередньо перед тим, як екземпляр List Index буде знищено. Як аргумент обробник події отримує екземпляр індексу списку
app

Автоматична ініціалізація індексу списку

Якщо вам не потрібно використовувати API індексу списку, а ваш індекс списку знаходиться всередині сторінки та представлений у DOM у момент ініціалізації сторінки, тоді його можна автоматично ініціалізувати, просто додавши додатковий клас list-index-init:
<!-- Додайте клас ініціалізації списку-індексу -->
<div class="list-index list-index-init"></div>
У цьому випадку, якщо вам потрібно отримати доступ до створеного екземпляра List Index, ви можете скористатися методом програми app.listIndex.get:
var listIndex = app.listIndex.get('.list-index');

var indexes = listIndex.indexes;
// зробити щось з індексами
Під час використання автоматичної ініціалізації може знадобитися передати додаткові параметри. ви можете встановити всі доступні параметри за допомогою атрибутів даних (data-)в елементі індексу списку:
<div class="page">
  ...

  <!-- параметри, задані за допомогою атрибутів даних -->
  <div class="list-index"
    data-list-el=".contacts-list"
    data-label="true"
    data-indexes="auto"
  ></div>

  <div class="page-content">
    <div class="list contacts-list">
      ...
    </div>
  </div>
</div>

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-list-index-width: 16px;
  --t4-list-index-font-size: 11px;
  --t4-list-index-font-weight: 600;
  /* --t4-list-index-text-color: var(--t4-theme-color); */
  --t4-list-index-item-height: 14px;
  --t4-list-index-label-text-color: #fff;
  /* --t4-list-index-label-bg-color: var(--t4-theme-color); */
  --t4-list-index-label-font-weight: 500;
}
.ios {
  --t4-list-index-label-size: 44px;
  --t4-list-index-label-font-size: 17px;
  --t4-list-index-skip-dot-size: 6px;
}
.md {
  --t4-list-index-label-size: 56px;
  --t4-list-index-label-font-size: 20px;
  --t4-list-index-skip-dot-size: 4px;
}
.aurora {
  --t4-list-index-font-size: 12px;
  --t4-list-index-label-size: 32px;
  --t4-list-index-label-font-size: 12px;
  --t4-list-index-label-font-weight: 600;
  --t4-list-index-skip-dot-size: 4px;
}

Приклади: 

<template>
  <div class="page navbar-fixed" data-page="home">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">List Index</div>
      </div>
    </div>
    <div class="list-index"></div>
    <div class="page-content">
      <div class="list simple-list contacts-list indexed-list-init">
        <div class="list-group">
          <ul>
            <li class="list-group-title">A</li>
            <li>Aaron</li>
            <li>Adam</li>
            <li>Aiden</li>
            <li>Albert</li>
            <li>Alex</li>
            <li>Alexander</li>
            <li>Alfie</li>
            <li>Archie</li>
            <li>Arthur</li>
            <li>Austin</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">B</li>
            <li>Benjamin</li>
            <li>Blake</li>
            <li>Bobby</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">C</li>
            <li>Caleb</li>
            <li>Callum</li>
            <li>Cameron</li>
            <li>Charles</li>
            <li>Charlie</li>
            <li>Connor</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">D</li>
            <li>Daniel</li>
            <li>David</li>
            <li>Dexter</li>
            <li>Dylan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">E</li>
            <li>Edward</li>
            <li>Elijah</li>
            <li>Elliot</li>
            <li>Elliott</li>
            <li>Ethan</li>
            <li>Evan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">F</li>
            <li>Felix</li>
            <li>Finlay</li>
            <li>Finley</li>
            <li>Frankie</li>
            <li>Freddie</li>
            <li>Frederick</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">G</li>
            <li>Gabriel</li>
            <li>George</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">H</li>
            <li>Harley</li>
            <li>Harrison</li>
            <li>Harry</li>
            <li>Harvey</li>
            <li>Henry</li>
            <li>Hugo</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">I</li>
            <li>Ibrahim</li>
            <li>Isaac</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">J</li>
            <li>Jack</li>
            <li>Jacob</li>
            <li>Jake</li>
            <li>James</li>
            <li>Jamie</li>
            <li>Jayden</li>
            <li>Jenson</li>
            <li>Joseph</li>
            <li>Joshua</li>
            <li>Jude</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">K</li>
            <li>Kai</li>
            <li>Kian</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">L</li>
            <li>Leo</li>
            <li>Leon</li>
            <li>Lewis</li>
            <li>Liam</li>
            <li>Logan</li>
            <li>Louie</li>
            <li>Louis</li>
            <li>Luca</li>
            <li>Lucas</li>
            <li>Luke</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">M</li>
            <li>Mason</li>
            <li>Matthew</li>
            <li>Max</li>
            <li>Michael</li>
            <li>Mohammad</li>
            <li>Mohammed</li>
            <li>Muhammad</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">N</li>
            <li>Nathan</li>
            <li>Noah</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">O</li>
            <li>Oliver</li>
            <li>Ollie</li>
            <li>Oscar</li>
            <li>Owen</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">R</li>
            <li>Reuben</li>
            <li>Riley</li>
            <li>Robert</li>
            <li>Ronnie</li>
            <li>Rory</li>
            <li>Ryan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">S</li>
            <li>Samuel</li>
            <li>Sebastian</li>
            <li>Seth</li>
            <li>Sonny</li>
            <li>Stanley</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">T</li>
            <li>Teddy</li>
            <li>Theo</li>
            <li>Theodore</li>
            <li>Thomas</li>
            <li>Toby</li>
            <li>Tommy</li>
            <li>Tyler</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">W</li>
            <li>William</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">Z</li>
            <li>Zachary</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $on }) => {
    $on('pageInit', () => {
      var listIndex = $t4.listIndex.create({
        // ".list-index" element
        el: '.list-index',
        // List el where to look indexes and scroll for
        listEl: '.contacts-list',
        // Generate indexes automatically based on ".list-group-title" and ".item-divider"
        indexes: 'auto',
        // Scroll list on indexes click and touchmove
        scrollList: true,
        // Enable bubble label when swiping over indexes
        label: true,
      });
    })

Techno4 Framework