EYEMAGINE » wizard interface http://www.eyemaginetech.com/blog Discover the latest news in Web Design, Online Marketing, and Magento Development at EYEMAGINE's blog. For more information visit eyemaginetech.com Tue, 15 May 2012 17:23:03 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Horizontal Accordions with MooTools http://www.eyemaginetech.com/blog/expandable-tabs/horizontal-accordions-with-mootools http://www.eyemaginetech.com/blog/expandable-tabs/horizontal-accordions-with-mootools#comments Mon, 27 Jul 2009 22:33:07 +0000 Andy Etemadi http://www.eyemaginetech.com/our-thoughts/?p=48 Continue reading →]]> As the average monitor resolution and width increases, the real estate of the browser window changes. When browser windows are often wider than they are tall, it makes sense to focus on new ways to display data, such as tabs, and accordions.

The Accordion Solution

As developers, we needed a solution to display multiple views of information on the same page, and wanted a sleek javascript transition effect. We chose a horizontal accordion solution based on MooTools’ kwicks. The horizontal accordion is a wide, animated tab controller. It allows us to have multiple views on a single page without all being displayed at once. When a user clicks on a tab, it will animate, and expand to the selected tab. Thus creating a accordion like javascript animated UI.

Adding accordion object events

The concept of our control is to be able to click through each ‘tab’ to expand to it’s respective view. By using MooTools transitions and effects we create what looks like an accordion. For the clicking to work, we must add events to each tab for it to expand.

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

init: function() {
    if ($$('#kwick')) {
        // create the list of kwicks
        eyemagine.accordion.kwicks = $$('#kwick .kwick');
 
        // create the transition to animate with
        eyemagine.accordion.fx = new Fx.Elements(eyemagine.accordion.kwicks, {
            wait: false,
            duration: 250,
            transition: Fx.Transitions.easeOut
        });
 
        // loop through each kwick
        kwicks.each(function(kwick, i){
            kwick.addEvent('click', function(e){
 
                // call the accordions jump function to expand to that view
                eyemagine.accordion.jumpToFrame(kwick.get('id'),false);
                e.stop();
            });
        });
 
        // call the init function for our accordion class to expand to the default view
        eyemagine.accordion.initKwick();
    }
},

Creating the accordion control

Now that we have our tabs’ actions set we need to add functionality to them. In order to expand/contract the views we need to calculate the size of what the view should be based on how many views we currently have. The content of our view is also an issue. We will need to fade the content in and out using style opacity so we do not see the content when it is not active. Here is a sample of how the accordion control would look:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

accordion: {
    fx: null,
    kwicks: null,
    transitionLong: 300,
    transitionShort: 10,
 
    // initialize the accordion control
    initKwick: function() {
        $$('#kwick .kwick.init').each(function(kwick, j){
            eyemagine.accordion.jumpToFrame(kwick.get('id'),true);
        });
    },
 
    // jump to a specific view
    jumpToFrame: function(id,force) {
        var kwick = $(id);
 
        // dont jump if the view is locked
        if (kwick.hasClass('locked') && !force) {
            return;
 
        } else if ($(id)) {
 
            // get the kwick id
            var i = eyemagine.accordion.getAccordianItemId(id);
 
            // our page specific offsets
            var obj = {};
            var offsetWidth = 37;
            var totalWidth = 950 - (eyemagine.accordion.kwicks.length * 5 );
 
            // set up the width of the kwicks
            eyemagine.accordion.kwicks.each(function(other, j){
 
                // reset the offset width
                offsetWidth = 37;
 
                // loop through each clickable tab
                var titles = $$('#' + other.get('id') + ' .kwick_title').each(function(title, j){
                    offsetWidth = title.offsetWidth + 10;
 
                    if (other != kwick){
                        // set the width
                        totalWidth -= offsetWidth;
                    }
                });
 
                if (other != kwick){
                    var w = other.getStyle('width').toInt();
                    if (w != offsetWidth) obj[j] = {'width': [w, offsetWidth]};
                }
 
                // chain the tweens for fade in-out
                $$('#' + other.get('id') + ' .accordionContent').each(function(content, j){
                    if (other != kwick){
 
                        other.addEvent('click', function(e){
                            // jump to a frame based on their link attribute
                            eyemagine.accordion.jumpToFrame(other.get('link'),false);
                            e.stop();
                        });
 
                        // create and start the transisition
                        var cfx = new Fx.Tween(content, {
                            property: 'opacity',
                            duration: eyemagine.accordion.transitionLong,
                            transition: Fx.Transitions.Quart.easeOut
                        });
 
                        cfx.start(0);
 
                    } else {
 
                        other.removeClass('accordionLink');
                        other.removeEvents('click');
                        content.set('tween', {duration: eyemagine.accordion.transitionLong});
                        content.tween('opacity', 1);
                    }
                });
 
                // nav never gets pushed over so no need to chain it
                $$('#' + other.get('id') + ' .accordionNav').each(function(content, j){
                    if (other != kwick){
 
                        // fade out the view
                        content.set('tween', {duration: 'short'});
                        content.tween('opacity', '0');
 
                    } else {
 
                        // fade in the view
                        content.set('tween', {duration: 'short'});
                        content.tween('opacity', '1');
                    }
                });
            });
 
            // set the total width transition
            obj[i] = {
                'width': [kwick.getStyle('width').toInt(), totalWidth]
            };
 
            // start the total width transition
            eyemagine.accordion.fx.start(obj);
 
        }
    },
 
    // get the id of the kwick from the kwick object
    getAccordianItemId: function (name) {
        var id;
        eyemagine.accordion.kwicks.each(function(other, j){
            if (other.get('id') == name){
                id = j;
            }
        });
        return id;
    }
},

The Wizard Interface

Using the accordion object is great for selecting individual views to access. But what about a wizard like interface? In order to accomplish this we need to lock and unlock certain tabs. The easiest way to do this is by adding and removing classes. This way we can change the way these locked tabs look without any additional effort in our javascript.

1
2
3
4
5
6
7

unlock: function (id) {
    $(id).removeClass('locked');
},
 
lock: function (id) {
    $(id).addClass('locked','true');
},

Within our functions we will call the unlock functions after our javascript validation, for example:

1
2
3
4
5
6
7

validateForm: function(valid) {
    if (valid) {
        // unlock the tab and jump to the next frame
        eyemagine.accordion.unlock('next');
        eyemagine.accordion.jumpToFrame('next', false);
    }
},

Initialing the accordion and controlling the view by URL

One problem we ran into with the accordion control was that if we wanted to link to a specific view, we could only link to the page containing the views. To get around this solution we added a URL hash checker to jump to that hash.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

initKwick: function() {
    // get the hash URL from the browser
    if (window.location.hash) {
        var jumpto = window.location.hash.substr(1);
    }
 
    // check to see if we have a quick with the hash's name
    if ($(jumpto) && $(jumpto).hasClass('kwick')) {
 
        // jump to our hash url
        eyemagine.accordion.jumpToFrame(jumpto,true);
    } else {
 
        // jump to any kwick with the init class
        $$('#kwick .kwick.init').each(function(kwick, j){
            eyemagine.accordion.jumpToFrame(kwick.get('id'),true);
        });
    }
},

Practical use

Many new UI developments, such as iPhone scroll view, have been widely accepted and praised. The horizontal accordion shares many similarities to the scroll view, and is both a great way to conserve real estate and help us keep the user in the view we chose. These UIs are great for both mobile devices, and browser based navigation. By eliminating the use of conventional scroll bars we can fully customize and control what and where the data is going to be displayed. This includes a very easily expandable wizard-like interface that can help ease navigation for the end user.

]]> http://www.eyemaginetech.com/blog/expandable-tabs/horizontal-accordions-with-mootools/feed 0