blog

In this article, we’ll learn, step-by-step, how to build a simple jQuery plugin which sorts elements based on the values of their custom data attributes.

If you’re curious about the end result, have a look at the corresponding CodePen demo:

See the Pen Simple jQuery Plugin for Sorting Elements by SitePoint (@SitePoint) on CodePen.

Note: This article assumes you have a basic understanding of flexbox, as well as how to develop jQuery plugins. If you aren’t familiar with these topics, be sure to check out the links.

Accessibility Concerns

To build our plugin, we’ll take advantage of flexbox’s power.

By default, flex items are laid out according to their source order. But, by using the order property, we’re able to change their order inside the parent flex container. Items with lower order values appear first. See an example below:

See the Pen Flexbox’s “order” Property by George (@georgemarts) on CodePen.

If there are more than one items with same order values, the order for these items depends on their source order.

Although the order property allows us to easily reorder elements, it comes with an accessibility limitation: it creates a disconnection between the source order and the visual order. To better understand the problem, take a look at this article (especially at the “Source Order vs. Visual Order” section).

So, before moving on to examine how to build our plugin, please note that it won’t be accessible.

The Markup

To begin with, we define an unordered list with twelve list items:

<ul class="boxes">
  <li>
    <a href="#">
      Box1
      <div class="details">
        <span class="length">13M</span>
        <span class="price">670€</span>
      </div>
    </a>
  </li>

  <!-- more list items here -->

</ul>

Notice that inside each of our list items there is the .details element, which displays some information about the corresponding item. As we’ll see in a moment, we’ll also add custom HTML attributes to store this information.

Note: The .details element isn’t really necessary. We only use it so as to have a better understanding of how the target elements are being sorted.

Next, we identify the attributes we want to sort by. In our project, these are the price and length attributes. With that in mind, we use their names to apply custom attributes (data-price and data-length) to our list items. The values of these attributes match the text values (only the numbers) of the .length and .price elements which are part of the .details element.

For example, here are the attributes for the first list item:

<li data-length="13" data-price="670">
  <a href="#">
    Box1
    <div class="details">
      <span class="length">13M</span>
      <span class="price">670€</span>
    </div>
  </a>
</li>

At this point, we specify the elements that will be responsible for sorting the list items. We use a <select> element to do this:

<select class="b-select">
  <option disabled selected>Sort By</option>
  <option data-sort="price:asc">Price Ascending</option>
  <option data-sort="price:desc">Price Descending</option>
  <option data-sort="length:asc">Length Ascending</option>
  <option data-sort="length:desc">Length Descending</option>
</select>

As you can see, all <option> elements (except for the first one) contain the data-sort attribute. The value of this attribute uses the following convention:

<option data-sort="price:asc">

So, as the value we have the attribute we want to sort by, followed by a colon along with either the “asc” or “desc” indicator.

CSS Styles

With the markup ready, let’s add a few basic styles to our page. Specifically, we define the unordered list as a flex container and give list items width: 25%. Here are the associated CSS rules:

Continue reading %Quick Tip: User Sortable Lists with Flexbox and jQuery%