Beastie Boys - Sabotage… with kids »

Quite possibly the most awesome video ever made.

May 14, 2012

Reproducing Apple’s feature switcher with jQuery and jQuery UI

Recently at work I was given the task of producing something similar to the feature switcher (like this one) that Apple is using on some of their product pages.

After a little bit of digging, I realized that I could easily build what was required by using jQuery UI’s tab functionality. Here’s how to do it.

HTML

The first thing we’ll need to do is build the HTML for the switcher. It’s pretty straightforward. The important thing to remember is to use unique IDs for each div that contains each example image and caption so they can be linked to later.

<div id="feature_switch">
    <div id="example_1">
        <p><img src="switcher_ex1.jpg" alt="Example 1"></p>

        <p class="caption">Example 1 - Lorem ipsum dolor sit amet.</p>
    </div>

    <div id="example_2">
        <p><img src="switcher_ex2.jpg" alt="Example 2"></p>

        <p class="caption">Example 2 - Lorem ipsum dolor sit amet.</p>
    </div>

    <div id="example_3">
        <p><img src="switcher_ex3.jpg" alt="Example 3"></p>

        <p class="caption">Example 3 - Lorem ipsum dolor sit amet.</p>
    </div>

    <div id="example_4">
        <p><img src="switcher_ex4.jpg" alt="Example 4"></p>

        <p class="caption">Example 4 - Lorem ipsum dolor sit amet.</p>
    </div>

    <ul>
        <li class="tab1"><a href="#example_1">Example 1</a></li>
        <li class="tab2"><a href="#example_2">Example 2</a></li>
        <li class="tab3"><a href="#example_3">Example 3</a></li>
        <li class="tab4"><a href="#example_4">Example 4</a></li>
    </ul>
</div>

<p class="caption">Example 1 - Lorem ipsum dolor sit amet.</p>

</div>

<p class="caption">Example 2 - Lorem ipsum dolor sit amet.</p>

</div>

<p class="caption">Example 3 - Lorem ipsum dolor sit amet.</p>

</div>

<p class="caption">Example 4 - Lorem ipsum dolor sit amet.</p>

</div>

<ul>

<li class="tab1"><a href="#example_1">Example 1</a></li>

<li class="tab2"><a href="#example_2">Example 2</a></li>

<li class="tab3"><a href="#example_3">Example 3</a></li>

<li class="tab4"><a href="#example_4">Example 4</a></li>

</ul>

</div>

CSS

Next, we’ll need some CSS to style the buttons below the images as well as to hide the images that are supposed to be hidden.

/* hide the non-displayed images */
.ui-tabs-hide { display: none; }

/* captions */
#feature_switch .caption {
    margin-bottom: 30px;
    margin-top: -5px;
    text-align: center;
}

/* navigation buttons */
#feature_switch ul {
    list-style: none;
    margin: 0 auto;
    text-align: center;
    width: 805px;
}

#feature_switch ul li {
    display: block;
    float: left;
    font-size: 14px;
    text-transform: uppercase;
    width: 200px;
}

#feature_switch ul li a {
    background: #f8f8f8;
    color: #1976b6;
    display: block;
    padding: 5px 0;
    text-decoration: none;
    width: 200px;
}

#feature_switch ul li a:hover { background: #e6e6e7; }

#feature_switch ul li.ui-tabs-selected a {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(18,83,133,1)), color-stop(75%,rgba(25,118,182,1)), color-stop(90%,rgba(32,124,202,1)));
    background: -moz-linear-gradient(top, rgba(18,83,133,1) 0%, rgba(25,118,182,1) 75%, rgba(32,124,202,1) 90%);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125385', endColorstr='#207cca',GradientType=0 );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125385', endColorstr='#207cca',GradientType=0 );
    color: #fff;
    text-shadow: 1px 1px 3px #333;
}

#feature_switch ul li.tab1 a {
    border: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-background-clip: padding-box;
}

#feature_switch ul li.tab2 a {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

#feature_switch ul li.tab3 a {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

#feature_switch ul li.tab4 a {
    border: 1px solid #ccc;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-background-clip: padding-box;
}

/* hide the non-displayed images */

.ui-tabs-hide { display: none; }

/* captions */

#feature_switch .caption {

margin-bottom: 30px;

margin-top: -5px;

text-align: center;

}

/* navigation buttons */

#feature_switch ul {

list-style: none;

margin: 0 auto;

text-align: center;

width: 805px;

}

#feature_switch ul li {

display: block;

float: left;

font-size: 14px;

text-transform: uppercase;

width: 200px;

}

#feature_switch ul li a {

background: #f8f8f8;

color: #1976b6;

display: block;

padding: 5px 0;

text-decoration: none;

width: 200px;

}

#feature_switch ul li a:hover { background: #e6e6e7; }

#feature_switch ul li.ui-tabs-selected a {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(18,83,133,1)), color-stop(75%,rgba(25,118,182,1)), color-stop(90%,rgba(32,124,202,1)));

background: -moz-linear-gradient(top, rgba(18,83,133,1) 0%, rgba(25,118,182,1) 75%, rgba(32,124,202,1) 90%);

-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125385', endColorstr='#207cca',GradientType=0 );

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125385', endColorstr='#207cca',GradientType=0 );

color: #fff;

text-shadow: 1px 1px 3px #333;

}

#feature_switch ul li.tab1 a {

border: 1px solid #ccc;

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

-webkit-background-clip: padding-box;

}

#feature_switch ul li.tab2 a {

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

border-left: 1px solid #ccc;

}

#feature_switch ul li.tab3 a {

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

border-left: 1px solid #ccc;

}

#feature_switch ul li.tab4 a {

border: 1px solid #ccc;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

-webkit-background-clip: padding-box;

}

Javascript

Finally, we need to add the javascript call to trigger jQuery UI’s tabs on our containing div:

$(document).ready(function() {
    // gallery switcher
    $('#feature_switch').tabs({
        fx: { opacity: 'toggle' }
    });
});

$(document).ready(function() {

// gallery switcher

$('#feature_switch').tabs({

fx: { opacity: 'toggle' }

});

Putting it all together

Here’s all three parts put together:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Feature Gallery Switcher</title>

        <style type="text/css">
            body {
                font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
                font-size: 14px;
            }

            /* hide the non-displayed images */
            .ui-tabs-hide { display: none; }

            /* example images */
            #feature_switch p { text-align: center; }

            /* captions */
            #feature_switch .caption {
                margin-bottom: 30px;
                margin-top: -5px;
                text-align: center;
            }

            /* navigation buttons */
            #feature_switch ul {
                list-style: none;
                margin: 0 auto;
                text-align: center;
                width: 805px;
            }

            #feature_switch ul li {
                display: block;
                float: left;
                font-size: 14px;
                text-transform: uppercase;
                width: 200px;
            }

            #feature_switch ul li a {
                background: #f8f8f8;
                color: #1976b6;
                display: block;
                padding: 5px 0;
                text-decoration: none;
                width: 200px;
            }

            #feature_switch ul li a:hover { background: #e6e6e7; }

            #feature_switch ul li.ui-tabs-selected a {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(18,83,133,1)), color-stop(75%,rgba(25,118,182,1)), color-stop(90%,rgba(32,124,202,1)));
                background: -moz-linear-gradient(top, rgba(18,83,133,1) 0%, rgba(25,118,182,1) 75%, rgba(32,124,202,1) 90%);
                -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125385', endColorstr='#207cca',GradientType=0 );
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125385', endColorstr='#207cca',GradientType=0 );
                color: #fff;
                text-shadow: 1px 1px 3px #333;
            }

            #feature_switch ul li.tab1 a {
                border: 1px solid #ccc;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                -webkit-background-clip: padding-box;
            }

            #feature_switch ul li.tab2 a {
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                border-left: 1px solid #ccc;
            }

            #feature_switch ul li.tab3 a {
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                border-left: 1px solid #ccc;
            }

            #feature_switch ul li.tab4 a {
                border: 1px solid #ccc;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                -webkit-background-clip: padding-box;
            }
        </style>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // gallery switcher
                $('#feature_switch').tabs({
                    fx: { opacity: 'toggle' }
                });
            });
        </script>
    </head>

    <body>

        <div id="feature_switch">
            <div id="example_1">
                <p><img src="switcher_ex1.jpg" alt="Example 1"></p>

                <p class="caption">Example 1 - Lorem ipsum dolor sit amet.</p>
            </div>

            <div id="example_2">
                <p><img src="switcher_ex2.jpg" alt="Example 2"></p>

                <p class="caption">Example 2 - Lorem ipsum dolor sit amet.</p>
            </div>

            <div id="example_3">
                <p><img src="switcher_ex3.jpg" alt="Example 3"></p>

                <p class="caption">Example 3 - Lorem ipsum dolor sit amet.</p>
            </div>

            <div id="example_4">
                <p><img src="switcher_ex4.jpg" alt="Example 4"></p>

                <p class="caption">Example 4 - Lorem ipsum dolor sit amet.</p>
            </div>

            <ul>
                <li class="tab1"><a href="#example_1">Example 1</a></li>
                <li class="tab2"><a href="#example_2">Example 2</a></li>
                <li class="tab3"><a href="#example_3">Example 3</a></li>
                <li class="tab4"><a href="#example_4">Example 4</a></li>
            </ul>
        </div>

    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>

<head>

<title>Feature Gallery Switcher</title>

body {

font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;

font-size: 14px;

}

/* hide the non-displayed images */

.ui-tabs-hide { display: none; }

/* example images */

#feature_switch p { text-align: center; }

/* captions */

#feature_switch .caption {

margin-bottom: 30px;

margin-top: -5px;

text-align: center;

}

/* navigation buttons */

#feature_switch ul {

list-style: none;

margin: 0 auto;

text-align: center;

width: 805px;

}

#feature_switch ul li {

display: block;

float: left;

font-size: 14px;

text-transform: uppercase;

width: 200px;

}

#feature_switch ul li a {

background: #f8f8f8;

color: #1976b6;

display: block;

padding: 5px 0;

text-decoration: none;

width: 200px;

}

#feature_switch ul li a:hover { background: #e6e6e7; }

#feature_switch ul li.ui-tabs-selected a {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(18,83,133,1)), color-stop(75%,rgba(25,118,182,1)), color-stop(90%,rgba(32,124,202,1)));

background: -moz-linear-gradient(top, rgba(18,83,133,1) 0%, rgba(25,118,182,1) 75%, rgba(32,124,202,1) 90%);

-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125385', endColorstr='#207cca',GradientType=0 );

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125385', endColorstr='#207cca',GradientType=0 );

color: #fff;

text-shadow: 1px 1px 3px #333;

}

#feature_switch ul li.tab1 a {

border: 1px solid #ccc;

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

-webkit-background-clip: padding-box;

}

#feature_switch ul li.tab2 a {

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

border-left: 1px solid #ccc;

}

#feature_switch ul li.tab3 a {

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

border-left: 1px solid #ccc;

}

#feature_switch ul li.tab4 a {

border: 1px solid #ccc;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

-webkit-background-clip: padding-box;

}

</style>

$(document).ready(function() {

// gallery switcher

$('#feature_switch').tabs({

fx: { opacity: 'toggle' }

});

</script>

</head>

<body>

<p class="caption">Example 1 - Lorem ipsum dolor sit amet.</p>

</div>

<p class="caption">Example 2 - Lorem ipsum dolor sit amet.</p>

</div>

<p class="caption">Example 3 - Lorem ipsum dolor sit amet.</p>

</div>

<p class="caption">Example 4 - Lorem ipsum dolor sit amet.</p>

</div>

<ul>

<li class="tab1"><a href="#example_1">Example 1</a></li>

<li class="tab2"><a href="#example_2">Example 2</a></li>

<li class="tab3"><a href="#example_3">Example 3</a></li>

<li class="tab4"><a href="#example_4">Example 4</a></li>

</ul>

</div>

</body>

</html>

And here’s the finished switcher in action.

Feedback

If you have any questions or run into any problems, please don’t hesitate to contact me.

April 30, 2012

It’s Time for an App Store Reset »

Macdrifter:

I would appreciate a purifying rain to cleanse the App Store of cruft. If Apple pressed a rest button and removed all apps that have not been updated in the past 12 months I would buy more. I would worry less about abandon-ware but it would also be easier to indentify the cream of the crop apps.

Yes, please.

April 17, 2012

Portland panorama

Posted in Photography

A panorama of downtown Portland taken from the southeast corner of the Morrison Bridge. Shot using the Pano iPhone app.

April 16, 2012

Site update - 2012-04-16

Posted in Site

High resolution images are now being served up to devices with retina displays using retina.js. If you’re using a new iPad or an iPhone 4 or 4S, you’ll see the high-res versions of the images on the site.

May 15, 2012

Beastie Boys - Sabotage… with kids »

May 14, 2012

Reproducing Apple’s feature switcher with jQuery and jQuery UI

HTML

CSS

Javascript

Putting it all together

Feedback

April 30, 2012

It’s Time for an App Store Reset »

April 17, 2012

Portland panorama

April 16, 2012

Site update - 2012-04-16

About the Author

Archives

Categories

Tweet, Tweet!