peppyheppy/kaloo

Simple easy to use widgets for jQuery

Kaloo jQuery JS Control Suite

Kaloo is a control suite using the jQuery JS library and is meant to be used by anyone who wants dead simple controls and dynamic content added to their website. Items found in this project are as is and may still contain bugs until completion. Feel free to branch this project and come up with your own controls.

kaSlider

This little control lets you turn elements on your page into a sliding DIV or containing element for use as an image slide show or any content to slide horizontal. It also allows for the use of tabs in addition to the previous and next controls.

The build call and options

To create the slider, use the following call to build the object inside your script tags.

  $(selector).kaSlide({options});

The options

• sliderHolderClass: Class name for the container of the track. default: slider_holder
• sliderTrackClass: Class name for the track that holds the elements. default: slider_track
• sliderElementClass: Class name of elements that hold the content. default: slider_item
• sliderNextButton: Class name of the next link. default: slider_next
• sliderPreviousButton: Class name of the previous link. default: slider_previous
• autoSlide: On page load, should it slide to the current item. default: false
• currentItemClass: Class name of the current tab. default: current_item
• slideBy: Number of elements that are visible at once. Using tabs constrains this to 1. default: 1
• useTabs: Boolean. default: false
• sliderTabsClass: Class name for tabs container, typically a unordered list element. default: slider_tabs
• selectedTabClass: Class name for current tab selected. default: highlighted
• timer: This requires the jQuery Timers plugin, but allows for an “Auto Slideshow” built from tabs. Great for homepage features boxes.
  • isTimed: Makes the tabs turn into the auto slide show default: false
  • interval: Time between switching, in miliseconds (3000 == 3 seconds) default: null

HTML Setup

All elements for the slider must be contained in a unique DIV with a unique ID for all parts to work.

The sliding DIV

<div id="example_slider">
  <div class="slider_holder">
    <div class="slider_track">
      <div id="item_1" class="slider_item">
        Content goes here.
      </div>
      <div id="item_2" class="slider_item">
        Content goes here.
      </div>
      <div id="item_3" class="slider_item">
        Content goes here.
      </div>
      ...
    </div>
  </div>
  <a href="#" class="slider_previous">&laquo; Previous</a>
  <a href="#" class="slider_next">Next &raquo;</a>
</div>

The tab setup

If you need the sliding box to be controlled by tabs, use the following html to setup the tabs. The sliding area will be mandated to be constrained to slide by 1 item only if tabs are used.

<div id="example_slider">
  <ul class="slider_tabs">
    <li><a href="#" class="slider_tab">Item one</a></li>
    <li><a href="#" class="slider_tab">Item two</a></li>
    <li><a href="#" class="slider_tab">Item three</a></li>
    ...
  </ul>
  <div class="slider_holder">
    ...
  </div>
</div>

CSS

There is no need to set the css for the container or track as that is all done dynamically. You will need to set a specified with on the items that are to slide and to float.

.slider_item{
	width: 400px;
}

Future development

• Allow for sliding vertical.

kaPand

If you have ever had more text or objects than you want to show on the page and have always wanted to be able to hide/show with a simple call, then this is the control for that.

The build call and options

No need for an elementID, it reacts to any DOM elements on the page with a specific class name or tags you pass into it.

  $(*).kaPand({options});

The options

• togglerClass: Class name for the link toggler to hide/show element. default: kaPander
• toggledClass: Class name for the link toggler if items are visible. default: is_showing
• hiddenElementClass: Class name for the elements to be hidden/shown on click of toggler. default: hidden_element
• hideText: Text that shows in toggler if element is currently shown. default: …show less

HTML Setup

  Lorem ipsum dolor sit amet, consectetur adipisicing elit
  <span class="hidden_text">
    This is hidden text here.
  </span>
  <a href="#" class="kaPander">show more</a>

Currently, all items with class hidden_text will be automatically hidden on page load.

Future development

• Allow for option to show initial or not
• Allow for type of showing (currently is blind)

kaTab

Dead simple tabbed area setup without the frills. Using the href of the tab links to signify which tab to show allows for degrading to browsers that are not rendering JavaScript. You can style the tabs however you see fit.

The build call and options

  $(selector).kaTab({options});

The options

• tabClass: Class name for tabs container, typically a UL element. default: tabs
• activeClass: Class name for the active tab. default: active
• hideAll: Should all tabbed items be hidden on page load. default: false
• hasCloser: Can the tab be closed from within itself. default: false
• internalCloserClass: Class name for the link inside tabbed content to close the current tab. default: tab_closer
• timer: This requires the jQuery Timers plugin, but allows for an “Auto Slideshow” built from tabs. Great for homepage features boxes.
  • isTimed: Makes the tabs turn into the auto slide show default: false
  • interval: Time between switching, in miliseconds (3000 == 3 seconds) default: null

HTML Setup

The tabbed content is tied to the ‘href’ attribute of the tabs to hide and show. This allows for a looser page structure. For example, if the page was set up in two columns with the tabs in the left side running vertical while the tabbed content was in the right column.

  <ul class="databs">
    <li><a href="#tab_content1">Tab 1</a></li>
    <li><a href="#tab_content2">Tab 2</a></li>
    <li><a href="#tab_content3">Tab 3</a></li>
    ...
  </ul>
  <div id="tab_content1">
    Content here
  </div>
  <div id="tab_content2">
    Content here
  </div>
  <div id="tab_content3">
    Content here
  </div>
  ...

Optional internal closing link

If by chance you need to have a way of closing the current open tab from within itself, add a link inside the tabbed content.

  <div id="tab_content1" class="tabbed_content">
    Content here
    <a href="#" class="tab_closer">close tab</a>
  </div>

Future development

• Allow for AJAX calls to load tabbed content
• Add a afterShow function to help build items on the fly of other tabs. Will help with page load time.

Other controls coming soon…

• Simple drop down
• Modal box and/or tooltip