Web
Analytics
Skip to content

Concrete5

на русском языке

Базовые примеры

Здесь пример списка с плагином List.js. List.js может использоваться тремя разными способами. Это может быть существующим HTML, он может создать собственный HTML или комбинацию обоих способов.

Jonny Stroumberg

1990

Jonas Arnklint

1985

Martina Elm

1986

Gustaf Lindqvist

1983

Применение плагина List.js на существующий HTML

HTML

<div id="users">

class="search" автоматически создает поле поиска.

<input class="search" placeholder="Search" />

class="sort" автоматически создаёт кнопки сортировки. Значение атрибута date-sort указывает, что будет сортироваться.

<button class="sort" data-sort="name">
    Sort
</button>

Потомки контейнера с class="list" становятся элементами списка

<ul class="list">
    <li>

Значения innerHTML потомков с class="name" становятся значением элемента с атрибутом "name".

<h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

Javascript

var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

Применение List.js к существующему HTML и добавление элементов

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list">

Первый элемент будет использоваться в качестве шаблона при инициализации.

<li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
  </ul>

</div>
var options = {
  valueNames: [ 'name', 'born' ]
};

Эти элементы будут добавлены в список при инициализации.

var values = [
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('example-list', options, values);

Также можно добавить элементы после инициализации.

userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});

Применение List.js для создания списка с нуля

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list">

    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
  </ul>

</div>

Первый элемент будет использоваться в качестве шаблона для новых элементов.

var options = {
  valueNames: [ 'name', 'born' ]
};

Эти элементы будут добавлены в список после инициализации.

item: '<li><h3 class="name"></h3>
        <p class="born"></p></li>'
};

var values = [
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('example-list', options, values);

Можно также добавить новые элементы после инициализации.

userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});

Примеры работы плагина List.js можно посмотреть на сайте http://listjs.com/.

Там же можно скачать и прочитать документацию


Загрузка беседы