Tech Laboratory

Overview:

Smart Tab is a flexible jQuery(a JavaScript library) Tab Control plugin.

Current Version : 0.99

Screenshots:

Demo:

1. Basic Layout view demo

2. Vertical Layout view demo

2. Bottom Layout view demo

Download:

Version – 0.99(SmartTab – 0.99.zip) Download file from SourceForge

Features:

  • Customizable tab anchors, can use images.
  • AutoProgress:- option for automatic navigation of tabs.
  • AutoProgress can be stopped when mouse hover on control and restarts when not.
  • Keyboard Navigation:- Use left/right keyboard keys to navigate through tabs(try on demo).
  • Transition Effects:- option for fade/slide effects on tab transition.
  • Option for specifying the selected tab.
  • Easly can impliment Top, Bottom and Vertical style layout(see the demo).
  • Easy to implement, Minimal HTML required.

Getting Started:

Basic Usage:

$('#tabs').smartTab();

With option parametrs:

$('#tabs').smartTab({
      selected: 0,  // Selected Tab, 0 = first step
      keyNavigation:true, // Enable/Disable key navigation
      autoProgress:false, // Auto navigate tabs on interval
      progressInterval: 3500, // Auto navigate Interval
      stopOnFocus:false, // Stops autoProgress on mouse hover and restarts when not
      transitionEffect:'none', // Effect on navigation, none/fade/slide
      tabContainerClass:'stContainer' // tab container css class name
});

Installing Smart Tab:

Step 1: Get the latest version of jQuery(www.jquery.com)

Step 2: Download the Smart Tab (http://tech-laboratory.blogspot.com)

Step 3: Include following lines to head section of your html file (Make sure that the path to the files are correct).

<link href="styles/smart_tab.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.smartTab.js"></script>

Step 4: Copy the below lines to your head section

<script type="text/javascript">
   $(document).ready(function(){
      $('#tabs').smartTab();
   });
</script>

Step 5: Copy the below html to the body section.

<div id="tabs" class="stContainer">
    <ul>

      <li><a href="#tabs-1">
            <img class='logoImage2' border="0" width="50px" src="images/Step1.png">
            <h2>Tab 1<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-2">
            <img class='logoImage2' border="0" width="50px" src="images/Step2.png">
            <h2>Tab 2<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-3">
            <img class='logoImage2' border="0" width="50px" src="images/Step3.png">
            <h2>Tab 3<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-4">
            <img class='logoImage2' border="0" width="50px" src="images/Step4.png">
            <h2>Tab 4<br />
            <small>Description</small></h2>

          </a></li>
    </ul>
    <div id="tabs-1">
        <h2>Tab 1 Title</h2>
        <p>Tab 1 Content here</p>
      </div>

    <div id="tabs-2">
        <h2>Tab 2 Title</h2>
        <p>Tab 2 Content here</p>
      </div>
    <div id="tabs-3">
        <h2>Tab 3 Title</h2>
        <p>Tab 3 Content here</p>
      </div>

    <div id="tabs-4">
        <h2>Tab 4 Title</h2>
        <p>Tab 4 Content here</p>
      </div>
</div>

Finished: That all, you are set to Go. I’m happy to hear comments and feedbacks from you. Happy Coding!!!

Overview:

Smart Cart is a flexible jQuery plugin for shopping cart. It gives an easy and clean interface for product selection section in a shopping cart.

Current Version: 0.95 beta

Screenshot:

Smart Cart
 

Demo:

view demo

Download:

Version – 0.95 beta: download source from SourceForge

Features:

  • Easy and Clean Interface for Shopping cart Product Selection.
  • Automatic Calculation of Subtotal.
  • Highlights the added items in cart list.

Installing Smart Cart 0.95 beta:

Step 1: Product List

The product list is set up in the following way

<div id=”sc_productlist” class=”scProductList”>

<div class=”scProductListItem”>

<table border=”0″ cellpadding=”2″ cellspacing=”2″>

<tr>

<td rowspan=”3″><img width=”100px” src=”images/product0.jpg” /></td>

<td><strong><span id=”prod_name100“>Apple IPhone 3G</span></strong></td>

</tr>

<tr>

<td><label>Price:</label> $<span id=”prod_price100“>1450.75</span></td>

</tr>

<tr>

<td><label>Quantity:</label>

<input name=”prod_qty” class=”scText” id=”prod_qty100” value=”1″ size=”3″ type=”text”>

<input type=”button” rel=”100” class=”scItemButton scBtn” value=”Add Product”></td>

</tr>

</table>

</div>

</div>

The items marked bold are important and follows its description:

Product Name: The product name for each product is taking from the span element with id = “<a prefix><product id>”

in this example”prod_name100“, 100 is the product id and prod_name is the prefix.

Product Price: Same way as above the product price is taking from the span.

in this example “prod_price100“, 100 is the product id and prod_price is the prefix.

Product Quantity: This time only difference is the selection from textbox instead of span element,

this is becouse product quantity is entered by the user in normal cases.

in the example the textbox with id = prod_qty100 is responsible for giving the quantity selected by the user,

here 100 is the product it and prod_qty is the prefix.

Add Product Button: This button is the trigger to add corresponding product to the cart. the css class name “scItemButton” and rel=”100

identifies the button as the trigger for the product 100.

See the demo code for the implimention example.

Step 2: Shopping Cart

<div id=”sc_cart” class=”scCart”>

<!– Selected Product ID/Quantity are stored on the <select> element below –>

<select id=”product_list” name=”product_list[]” style=”display:none;” multiple=”multiple”>

</select>

<!– Cart List Header –>

<div class=”scCartListHead”>

<table width=’100%’><tr>

<td>&nbsp;&nbsp;Product</td>

<td width=’80px’>Quantity</td>

<td width=’130px’>Amount ($)</td>

</tr></table>

</div>

<!– Cart List: Selected Products are listed inside div below –>

<div id=”sc_cartlist” class=”scCartList”></div>

<div class=”scCartListHead”>

<table width=’100%’><tr>

<td>

<!– Message Label –>

<span id=”sc_message”></span></td>

<td width=’100px’>Subtotal ($):</td>

<td width=’120px’>

<!– Sub Total Label –>

<span id=”sc_subtotal”></span>

</td>

</tr></table>

</div>

<br>

<!– Checkout Button –>

<input style=”width:200px;height:35px;float:right;” type=”submit” class=”scBtn” value=”Checkout >>”>

</div>

Step 3: Include Files

Include the following javascript and css files

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>

<script type=”text/javascript” src=”js/jquery.scrollTo-min.js”></script>

<script type=”text/javascript” src=”js/SmartCart.js”></script>

<link rel=”stylesheet” type=”text/css” href=”styles/style_smartcart.css” />

Step 4: Call the Smart Cart

<script type=”text/javascript”>

$(document).ready(function() {

$(“#sc_cart”).smartCart();

});

</script>

Using the Options

<script type=”text/javascript”>

$(document).ready(function() {

$(“#sc_cart”).smartCart({

// Most Required Options – Element Selectors

itemSelector: ‘.scItemButton’, // collection of buttons which add items to cart

cartListSelector: ‘#sc_cartlist’, // element in which selected items are listed

subTotalSelector: ‘#sc_subtotal’, // element in which subtotal shows

messageBox: ‘#sc_message’, // element in which messages are displayed

// Prefix Item Attribute Selector – Required

itemNameSelectorPrefix: ‘#prod_name’, // combination of this data and product/item id is used to get an element in product list with the item name (can be a div/span)

itemQuantitySelectorPrefix: ‘#prod_qty’, // for quantity ( should be a textbox/<select>)

itemPriceSelectorPrefix: ‘#prod_price’, // for price (can be a div/span)

// Text Labels

removeLabel: ‘remove’, // text for the “remove” link

addedLabel: ‘1 item added to cart’, // text to show message when an item is added

removedLabel: ‘1 item removed from cart’, // text to show message when an item is removed

emptyCartLabel: ‘<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Your Cart is Empty!</b> You can select items from the product list.’, // text or empty cart (can be even html)

// Css Classes

selectClass: ‘scProductSelect’, // css class for the <select> element

listClass: ‘scULList’, // css class for the list ($ol)

listItemClass: ‘scCartListItem’, // css class for the <li> list items

listItemLabelClass: ‘scListItemLabel’, // css class for the label text that in list items

removeClass: ‘scListItemRemove’, // css class given to the “remove” link

highlightClass: ‘scHighlight’, // css class given to the highlight <span>

// Other Options

highlight: true // toggle highlight effect to the added item

});

});

</script>

Please give me your feedbacks

Overview:

Smart Wizard is a flexible jQuery(a JavaScript library) plugin that gives wizard like interface. Wizards are generally used to give step by step contents into users, it gives better and clean user interface and saves space. An example of wizard can see when we install a software in our windows machine. Some websites also uses this approach on their user registration or etc.

I was looking for a good wizard control for my web project and I don’t find a good control that suits my need. So I decided to develop my own.

Current Version : 0.98

Screenshots:

Screen 1

Screen 1

Screen 2

Screen 2

Demo:

1. Basic Wizard view demo

2. Vertical Style Wizard view demo

Home Page:

Visit Home

jQuery Plugin Page:

See this on jQuery Plugin page

Download:

Version – 0.98 download file from SourceForge

License:

Creative Commons License

Features:

  • Easy to implement, Minimal HTML required.
  • Easy Navigation – Step titles are act as anchors.
  • Validation for each step.
  • Option for specifying first selected step.
  • Option for making all steps enabled.
  • Both Vertical and Horizontal Navigation.

Getting Started:

Basic Usage:

$('#smartwizard').smartWizard();

Using with option parametrs:

$('#smartwizard').smartWizard(
 {
  selectedStep: 0,  // Selected Step, 0 = first step
  errorSteps:[],    // Array Steps with errors
  enableAll:false,  // Enable All Steps, true/false
  animation:true,   // Animation Effect on navigation, true/false
  validatorFunc:validateTabs // Step validation function, Step index will be passed
 }
);

Installing Smart Wizard:

Step 1: Get the latest version of jQuery(www.jquery.com)

Step 2: Download the Smart Wizard (http://tech-laboratory.blogspot.com)

Step 3: Include following lines to head section of your html file. Make sure that the path to the files are correct.

<link href="style_wizard.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="SmartWizard.js"></script>

Step 4: also copy the below lines to your head section

<script type="text/javascript">
    $().ready(function() {
        $('#smartwizard').smartWizard();
    });
  </script>

Step 5: Copy the below html to your file’s body section and open the file on browser. That’s all!

<div id="smartwizard" class="wiz-container">
		<ul id="wizard-anchor">
			<li><a href="#wizard-1"><h2>Step 1</h2>
          <small>Description for step 1</small></a></li>
			<li><a href="#wizard-2"><h2>Step 2</h2>
          <small>Description for step 2</small></a></li>
			<li><a href="#wizard-3"><h2>Step 3</h2>
          <small>Description for step 3</small></a></li>
		</ul>
		<div id="wizard-body" class="wiz-body">
  			<div id="wizard-1" >
  			   <div class="wiz-content">
                Content for Step 1
            </div>
            <div class="wiz-nav">
              <input class="next btn" id="next" type="button" value="Next >" />
            </div>
        </div>
  			<div id="wizard-2">
  			   <div class="wiz-content">
                Content for Step 2
            </div>
            <div class="wiz-nav">
              <input class="back btn" id="back" type="button" value="< Back" />
              <input class="next btn" id="next" type="button" value="Next >" />
            </div>
        </div>
  			<div id="wizard-3">
  			   <div class="wiz-content">
            Content for Step 3
            </div>
            <div class="wiz-nav">
              <input class="back btn" id="back" type="button" value="< Back" />
              <input class="btn" id="next" type="button" value="Done" />
            </div>
        </div>
        </div>
        </div>
Follow

Get every new post delivered to your Inbox.