Hassle-free 5 minute guide to awesome data picking in hierarchies

This is the fourth entry in our “Hassle-free” 5 minute guide series for making data-picking awesome in you app.

What?!?! Under 5 minutes? Keep on reading …

What you need

Time needed   Under 5 minutes of time
Tools needed   A text editor and a browser
Time needed   Wanting to make data picking from hierarchies awesome in your app

What you’ll be doing?

You will be rendering a treelist scroller and making browsing and picking data from a hierarchy easy in your mobile/tablet webapp or hybrid app (PhoneGap).

So let’s get started.

Download Mobiscroll Treelist Scroller

Download the Treelist Scroller

Add Mobiscroll to your app

Oh wow. Just a few clicks and your almost done.

1
2

<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!-- The HTML: unordered hierarchical lists -->
<ul id="i">
    <li data-val="America">America
        <ul>
            <li data-val="USA">USA
                <ul>
                    <li data-val="Washington">Washington</li>
                    <li data-val="Los Angeles">Los Angeles</li>
                    <li data-val="San Francisco">San Francisco</li>
                </ul>
            </li>
            <li data-val="Canada">Canada
                <ul>
                    <li data-val="Vancouver">Vancouver</li>
                    <li data-val="Winnipeg">Winnipeg</li>
                    <li data-val="Calgary">Calgary</li>
                </ul>
            </li>
            <li data-val="Brazil">Brazil
                <ul>
                    <li data-val="Rio de Janeiro">Rio de Janeiro</li>
                    <li data-val="Sao Paolo">Sao Paolo</li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-val="Europe">Europe
        <ul>
            <li data-val="France">France
                <ul>
                    <li data-val="Paris">Paris</li>
                    <li data-val="Toulouse">Toulouse</li>
                    <li data-val="Marseille">Marseille</li>
                    <li data-val="Lyon">Lyon</li>
                </ul>
            </li>
            <li data-val="Germany">Germany
                <ul>
                    <li data-val="Berlin">Berlin</li>
                    <li data-val="Frankfurt">Frankfurt</li>
                    <li data-val="Hamburg">Hamburg</li>
                </ul>
            </li>
            <li data-val="Spain">Spain
                <ul>
                    <li data-val="Madrid">Madrid</li>
                    <li data-val="Barcelona">Barcelona</li>
                    <li data-val="Saragosa">Saragosa</li>
                </ul>
            </li>
            <li data-val="Italy">Italy
                <ul>
                    <li data-val="Rome">Rome</li>
                    <li data-val="Palermo">Palermo</li>
                    <li data-val="Genoa">Genoa</li>
                    <li data-val="Torino">Torino</li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-val="Asia">Asia
        <ul>
            <li data-val="China">China
                <ul>
                    <li data-val="Shanghai">Shanghai</li>
                    <li data-val="Hong Kong">Hong Kong</li>
                    <li data-val="Beijing">Beijing</li>
                </ul>
            </li>
            <li data-val="Japan">Japan
                <ul>
                    <li data-val="Tokyo">Tokyo</li>
                    <li data-val="Kagoshima">Kagoshima</li>
                    <li data-val="Osaka">Osaka</li>
                </ul>
            </li>
        </ul>
 
    </li>
</ul>
1
2
3
4

//The Javascript: initializing the component
$(function(){
      $("#i").mobiscroll().treelist({labels: ['Region', 'Country', 'City']});
});

Enjoy the magic

NO way! Already?

Optional but RECOMMENDED

If this is not sharable, what is?
If this was awesome and made you smile, spread the word!

Resources

You’ll find all resources you need to build the example and a step by step guide in text, without images.

Step by Step Guide

  1. Go to http://download.mobiscroll.com/list and choose the library you’re using (We support jQuery, jQuery Mobile, Zepto JS and Intel App Framework formerly known as jQMobi)
  2. Choose the theme you like (There is a default theme added initially)
  3. Hit that download button
  4. Load the page you’d like to enhance with the Mobiscroll Treelist Scroller in your favorite IDE or Text Editor
  5. Include the necessary CSS and JS files that came in your download package
  6. Add the hierarchical list to your markup and link mobiscroll to it
  7. Open up your favorite browser or rather pick up your phone, we’re supporting all the major platforms (Android, iOS, Windows Phone 8, BlackBerry and Amazon Kindle) and navigate to the URL where you have your app
  8. Enjoy the glory!
  9. Share what you just learned

Downloads

Download the Treelist Scroller
Download the Example

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!

Tags: , , , , , ,