MyTabLab

by anandhinava

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">New Market View</a>

        </li>
        <li><a href="#tabs-2">Favorites</a>

        </li>
         <li><a href="#tabs-2">Total Price Shopper</a>

        </li>
    </ul>
    <div id="tabs-1">
        <div class="ui-widget">
            <label for="city">Your city:</label>
            <input id="city" />Powered by <a href="http://geonames.org">geonames.org</a>

        </div>
        <div class="ui-widget" style="margin-top: 2em; font-family: Arial;">Result:
            <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widgetcontent"></div>
        </div>
    </div>
    <div id="tabs-2">
        <div>
            <button id="rerun">Run last action</button>
        </div>
        <div id="dialog" title="Confirm dialog">
            <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
        </div>
    </div>
</div>

CSS

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

JavaScript

$(function () {
    $("#tabs").tabs();
});

$(function () {
    function log(message) {
        $("<div>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
    }

    $("#city").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function (data) {
                    response($.map(data.geonames, function (item) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            log(ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
});

$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {

            Ok : function () {
                $(this).dialog("close");
            }
        },


        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $("#rerun").click(function () {
        $("#dialog").dialog("open");
    });
});