using jquery ui

using jquery ui

by Terrance Smith

HTML

<form >
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js;" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<form id="subform" >             
    <div id="tabs" >                 
        <ul id="headeritems" style="position:fixed" >                     
            <li><a href="#Component" id="aComponent" >IT Tasks By Component</a></li>
            <li><a href="#Assignment" id="aAssignment" >IT Tasks By Assigned Programmer</a></li>
            <li><a href="#LastCompleted"  id="aLastCompleted" >IT Tasks Completed in the Last 30 days</a></li>
            <li><a href="#" id="excelexport" >Export to Excel</a></li>                   
        </ul>                 
        <br /><br /><br />                                  
        <div id="Component"  ></div>                 
        <div id="Assignment" ></div>                 
        <div id="LastCompleted" ></div>             
    </div>                          
    <asp:Button ID="ExportBtn" OnClick="ExportBtn_OnClick" Width="0px" Height="0px" />         
</form>         
<hidden id="currentpage" value="" />

JavaScript

$(document).ready(function() {
    $("#excelexport").bind("click", function() {
        var exportUrl = window.location.pathname.toString();
        var res = exportUrl.replace("ITTasks.aspx,", "ITTasksByComponent.aspx?IsExcel=true");
        window.open("/ASPX/Reports/Status/ITTasksByComponent.aspx?IsExcel=true");
    });
    var TabBinding = function(currentSelectedReport, contentHolderId) {
        var location = window.location.pathname.replace("ITTasks.aspx", currentSelectedReport);
        $("#currentpage")[0].value = location;
        $.get(location, function(data) {
            $("#" + contentHolderId).html(data);
        });
    };
    $(function() {
        $("#tabs").tabs();
        document.getElementById("aComponent").click();
    });
    $("#aComponent").bind("click", function() {
        TabBinding("ITTasksByComponent.aspx", "Component");
    });
    $("#aAssignment").bind("click", function() {
        TabBinding("ITTasksByAssignment.aspx", "Assignment");
    });
    $("#aLastCompleted").bind("click", function() {
        TabBinding("ITTasksByLastDays.aspx", "LastCompleted");
    });
});