jQueryUI Tabs onClick Event

A simple example showing how to use jQuery UI's tabs

by lawrence pond

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="jquery.cookies.js"></script>
<script src="jquerypp.js "></script>
<div id="AlertMessage" class="errorMessage">
  Alert Will Rogers

</div>

<div id="MessageTabs" runat="server">


  <div id="MessageTaber">
    <ul>
      <li class="tab-active"><a href="#tabInbox" rel="nofollow">Inbox</a></li>
      <li><a href="#tabOutbox">Outbox</a></li>
      <li id="xxtabAdmin" runat="server"><a href="#tabAddbox">Admin</a></li>
    </ul>

    <div id="tabInbox" class="tabs-stage">
      Inbox

    </div>


    <div id="tabOutbox">
      Outbox
    </div>

    <div id="tabAddbox" class="tabaddbox" runat="server">
      Adminbox
    </div>

  </div>
  <div id="tabid"></div>
  <h3>Set cookie</h3>
  <code>$.cookie('key', '</code>
  <input type="text"><code>');</code>
  <hr>

  <h3>Get cookie <small>Reload the page after typing</small></h3>
  <code>$.cookie('key'); <span class="get"></span></code>
  <hr>

  <h3>Delete cookie</h3>
  <button>Delete</button>

CSS

body {
    background-color: #eef;
}

 .errorMessage
    {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid #cc0000;
        padding: 8px;
        background-color: #fefeee;
        color: #cc0000;
        font-weight: bold;
        margin-bottom: 15px;
    }

   .successMessage
    {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid #000000;
        padding: 8px;
        background-color: #fefeee;
        color: green;
        font-weight: bold;
        margin-bottom: 15px;
    }

#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
/* Note that jQuery UI CSS is loaded from Google's CDN in the "Add Resources" pane to the left.  Normally this would be done in your <head> */

JavaScript

$(function () {
    // alert( $.cookie('saved_tab') || 0);
     $("#MessageTaber").tabs({
    activate: function (event, ui) {
        var active = $('#MessageTaber').tabs('option', 'active');
        $("#AlertMessage").hide(500);
        $("#tabid").html('the tab id is ' + $("#MessageTaber ul>li a").eq(active).attr("href"));
    }
}
);
    });


(function ($, document) {

    // Default Options
    var options = {
        domain: null,
        expires: 7,
        path: "/"
    };

    // Create or update a cooke
    function _set(key, value, options) {
        var date = new Date();
        date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
        var path = "; path=" + options.path;
        var domain = (options.domain !== null) ? "; domain=" + options.domain : "";
        document.cookie = key + "=" + value + expires + domain + path;
    }

    // Read a cookie
    function _get(key) {
        var keyString = key + "=";
        var cookieArray = document.cookie.split(';');
        for (var i = 0; i < cookieArray.length; i++) {
            var cookie = cookieArray[i];
            while (cookie.charAt(0) === ' ') {
                cookie = cookie.substring(1, cookie.length);
            }
            if (cookie.indexOf(keyString) === 0) return cookie.substring(keyString.length, cookie.length);
        }
        return null;
    }

    // Erase a cookie
    function _delete(key) {
        _set(key, "", $.extend({}, options, {
            expires: -1
        }));
    }

    // Define Plugin
    $.cookie = function (key, value, opts) {
        // Set defaults
        if (typeof key === "object") {
            options = $.extend(options, key);
            return null;
        } else {
            // Override defaults
            opts = $.extend(options, opts);
        }

        // Delegate intent
        if (typeof key !== "undefined") {
            if (typeof value !== "undefined") {
  ...