How to Make a Flat Styled jQuery UI Combo Box Widget (Part 2)

How to Make a Flat Styled jQuery UI Combo Box Widget (Part 2)

Designmodo user interface kits are a great starting place for a number of projects, including the framework for a variety of widgets that work great with a little jQuery help.

In this video, developer David East uses follows up on ways to use the combo box you used in Part 1 of this video series. He explains how to take your box and give the widget some additional functionality, such autocomplete.

The widget will feature flat styling and works with parts from Designmodo’s Square UI kit.

This step-by-step tutorial is easy to follow and you can watch it while working on your own combo box. It is recommended to start with Part 1: How to Create a Flat Styled Combo Box with Square UI before completing this tutorial.

What you will learn in this tutorial: How to add a widget or plugin built in Photoshop to your website and add functionality to it with jQuery. (And why creating the widget in this manner is a good option for your site.)

Video run time: 45 minutes

Skill level: Intermediate to advanced coding and knowledge of development tools, including jQuery, is recommended. Users will also need a working knowledge of Adobe Photoshop.

Download Source Code

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @_davideast.

Newsletter

6 Comments
  1. Roman Aug 31, 12:15 am

    Really love your tutorials, can’t wait to see more of them :).

    Reply
    +5
  2. John Dervishi Aug 31, 1:59 am

    Man, you make the best tutorials ever. Can’t wait to see more :)

    Reply
    +3
  3. Nikos Sep 3, 9:01 pm

    Thanks for the excellent tutorial and the resources.

    Reply
    +3
  4. Jorge Correa Sep 10, 7:13 pm

    Thank you so much for your tutorial.

    Really useful.

    From Spain ;-)

    Reply
    0
  5. turbo_MaCk Sep 15, 2:22 pm

    Combobox for select multiple with keyboard control base on this tutorial:
    https://github.com/turboMaCk/multiple-combo-box

    Reply
    -1
  6. Mike Etts Oct 13, 6:58 pm

    Awesome video, a boatload of info. Many thanks for sharing your deep expertise. I don’t know if the download is out of date but I believe the button calls should be “.options” instead of “#options” i.e., $(‘#options’).combobox(‘destroy’); ==> $(‘.options’).combobox(‘destroy’);

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters


Download Web Design Freebies & Resources

psd

You have Successfully Subscribed!