HTabs-js Jquery Plugin


JQuery plugin to render Tabs and navigation content by applying it to div.

HTML

at first we must add references to "htabs.js" and "htabs.css" as below.
<script type="text/javascript" src="scripts/htabs.js"></script>

<link href='styles/HTabs.css' rel='stylesheet' type='text/css' />
HTML is as simple as having a container div contains an un-ordered list, and another div with the class 'tabs_container' contains content divs with the class 'htabs-cont' as below.
to set selected tab add class 'htabs-selec' to the anchor element.
<div id='tabDiv' style="width: 400px">
    <ul>
        <li><a href="#exp1" class='htabs-selec'>tab1</a></li>
        <li><a href="#exp2">tab2</a></li>
        <li><a href="#exp3">tab3</a></li>
        <li><a href="#exp4">tab4</a></li>
    </ul>
    <div id="tabs_container" class='htabs-container'>
        <div id='exp1' class='htabs-cont'>
            content tab 1
        </div>
        <div id='exp2' class='htabs-cont'>
            content tab 2
        </div>
        <div id='exp3' class='htabs-cont'>
            content tab 3
        </div>
        <div id='exp4' class='htabs-cont'>
            content tab 4
        </div>
    </div>
</div>

Javascript

the javascript is as below
$('#tabDiv').HTabs();
the plugin is provided with options as below
$('#tabDiv').HTabs({
    slideSpeed: 600,
    hoverClass: "hoverTest",
    tabClass: "defaultTest",
    selectedTabClass: "selectedTest",
    contentFixedHeight: true,
    contentHeight: '150px'
});

CSS

the css is included in the plugin, and a default style is provided. you can always change the style by passing three main css classes like the optiones provided in the js example above.

Demo

a demo hosted in http://hdahamsheh.github.io/HTabs-js of two tabs; one is default and another applying custom options.

source code can be found in https://github.com/hdahamsheh/HTabs-js .

Comments

Post a Comment

Popular posts from this blog

Project Server 2010 : Server Event Handlers (Part 1)

Image
Server Event handlers are the expansion points for Project Server 2010, to register a custom event handlers with project server's events, Project Server raises pre-events and post-events when Project Server Interface (PSI) methods change business objects such as Project, Task, Resource, or Timesheet. When you associate an event handler with an event, Project Server runs the event handler when that particular event occurs. To start with event handlers development, you need to create new Class Library Project, from File > New > Project and select Class Library template (Figure 1) Figure 1 Delete the default class file class1.cs and right click on the project Add > New Item select class and rename it to ProjectEventHandler.cs , that will create new class file with a class called ProjectEventHandler . Add public access modifier to make this class accessible. Add these Project Server 2010 reference, right click on the project > Add Reference on the browse ta...
Read more

Project Server 2010 : Server Event Handlers (Part 2)

Image
Now we have wrote the business logic code, and registered the dll in GAC (in Part 1 ), we will register this event handler association in Project Server Application, so that when an event is raised, our function will be triggered. lets open server side event handler from Server Settings under Operational policies chose Server Side Event Handler , this will open the following page: Figure 1 Chose the event that we need to trigger our function on, in our example from the previous post it will be Project on Creating; locate the Project parent and Creating event, it will list all the registered associations (if there are any). to add new association click on New Event Handler which will open the following page: Figure 2 the Display Information section is for the name and description that appears in the list. the System Information section is to fill the dll information from GAC, as below: Assembly Name: which is the dll's name in this format ddlName, Version=1.1....
Read more

Retrieving Sharepoint Lists' Information In Project Sites - Project Server 2010

Image
In a previous blog post we have discussed how to retrieve Risks and Issues custom columns information (built in project properties) from Sharepoint through SQL query. But ... what If I have another custom list that is not a project property by default, lets say "Project Monthly Review" that contains these columns "Month" as text, "Year" as text, and "Review" as multiline text. for retrieving this information in Sharepoint 2010 through SQL below is the query that will just do the work: SELECT  P.ProjectUID, A.tp_ListId, A.tp_IsCurrent, A.nvarcahr3  as  [ Year ], A.nvarchar4  as  [ Month ], A.nText2  as  [Review] FROM  PWA_ContentDB.dbo.AllLists  as  L   INNER   JOIN  PWA_ContentDB.dbo.AllUserData  AS  A  ON  L.tp_ID = A.tp_ListId There the trick ... again ... the new custom Sharepoint list added to this certain site template (or project site) is not connec...
Read more