Katniss v1.0

Today is Tuesday, Dec 25, 2012 5:30pm

Using 16.8 GB of your 51.7 GB

38% full

UI Elements & Widgets

This is a sample description for dashboard page...

Content Title (Default)

<h4 class="widgettitle">Title goes here...</h4>

Tabbed Widget View Source

Tab 1
Tab 2
Tab 3

Your content goes here for tab 1

Your content goes here for tab 2

Your content goes here for tab 3

jQuery('#tabs').tabs();

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Tab 1</a></li>
      ...
   </ul>
   <div id="tabs-1"> ... </div>
   ...
</div>

Accordion Widget View Source

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

List item one
List item two
List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

jQuery('#accordion').accordion();

<div id="accordion" class="accordion">
   <h3><a href="#">Section 1</a></h3>
   <div> content goes here... </div>
   <h3><a href="#">Section 2</a></h3>
   <div> content goes here... </div>
   ...
</div>

Color Picker View Source

<input type="text" name="colorpicker" class="input-mini" id="colorpicker" />
<span id="colorSelector" class="colorselector">
   <span></span>
</span>

jQuery('#colorSelector').ColorPicker({
   onShow: function (colpkr) {
      jQuery(colpkr).fadeIn(500);
      return false;
   },
   onHide: function (colpkr) {
      jQuery(colpkr).fadeOut(500);
      return false;
   },
   onChange: function (hsb, hex, rgb) {
      jQuery('#colorSelector span').css('backgroundColor','#'+hex);
      jQuery('#colorpicker').val('#'+hex);
   }
});

Sliders View Source

Normal Slider

Snap To Increments

Withdrawal:

Range Slider

Price Range:

Fixed Minimum

Maximum price:

Fixed Maximum

Maximum price:

Vertical Slider

<div id="slider"></div>

// normal slider
jQuery("#slider").slider({value: 40});

// slider snap to increments
jQuery("#slider2").slider({
   value:100,
   min: 0,
   max: 500,
   step: 50,
   slide: function(event, ui) {
      jQuery("#amount").text("$"+ui.value);
   }
});
jQuery("#amount").text("$" + jQuery("#slider").slider("value"));

// refer to js/slider.js to view other slide sources

Widget Title

Content goes here...

<h4 class="widgettitle nomargin shadowed">Widget Title</h4>
<div class="widgetcontent bordered shadowed">
   Content goes here...
</div>

Content Title (2)

<h4 class="widgettitle ctitle">Title goes here...</h4>

Your content goes here for tab 1

Your content goes here for tab 2

Your content goes here for tab 3

jQuery('#tabs2').tabs();

<div id="tabs2" class="tabs2">
   <ul>
      <li><a href="#tabs-1">Tab 1</a></li>
      ...
   </ul>
   <div id="tabs-1"> ... </div>
   ...
</div>

List item one
List item two
List item three

Section 4

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

jQuery('#accordion2').accordion();

<div id="accordion2" class="accordion2">
   <h3><a href="#">Section 1</a></h3>
   <div> content goes here... </div>
   <h3><a href="#">Section 2</a></h3>
   <div> content goes here... </div>
   ...
</div>

Date Picker View Source

mm / dd / yyyy

<input id="datepicker" type="text" name="date" />

jQuery( "#datepicker" ).datepicker();

Growl Notifications View Source

Basic growl Long live growl message

<a id="growl" class="btn">Basic growl</a>
<a id="growl2" class="btn">Long live growl message</a>

jQuery('#growl').click(function(){
   jQuery.jGrowl("Hello world!");
});

jQuery('#growl2').click(function(){
   var msg = "This notification will live a little longer.";
   jQuery.jGrowl(msg, { life: 5000 });
});

Alert Boxes (Draggable) View Source

Basic Alert Confirm Box Prompt Box Dialog with HTML support

<a class="btn alertboxbutton"><small>Basic Alert</small></a>
<a class="btn confirmbutton"><small>Confirm Box</small></a>
<a class="btn promptbutton"><small>Prompt Box</small></a>
<a class="btn alerthtmlbutton"><small>HTML support</small></a>

// alert box
jQuery('.alertboxbutton').click(function(){
   jAlert('This is a custom alert box', 'Alert Dialog');
});

// confirm box
jQuery('.confirmbutton').click(function(){
   jConfirm('Can you confirm this?', 'Dialog', function(r) {
      jAlert('Confirmed: ' + r, 'Confirmation Results');
   });
});

// promptbox
jQuery('.promptbutton').click(function(){
   jPrompt('Type something:', '', 'Dialog', function(r) {
      if( r ) alert('You entered ' + r);
   });
});

// alert with html
jQuery('.alerthtmlbutton').click(function(){
   jAlert('HTML, like <strong>, <em>, <u>, etc.!');
});

Sortable List View Source

Item 1
Item 2
Item 3

<ul id="sortable" class="sortlist">
   <li><div class="label">...</div></li>
   ...
</ul>

jQuery("#sortable").sortable();

Sortable List With Content View Source

Item 1

Content goes here...
Item 2

Content goes here... can be any html element
Item 3

Content goes here... can be any html element

<ul id="sortable2" class="sortlist">
   <li>
      <div class="label">...</div>
      <div class="details">... </div>
   </li>
</ul>

jQuery("#sortable2").sortable();
jQuery('.showcnt').click(function(){
   var t = jQuery(this);
   var det = t.parents('li').find('.details');
   if(!det.is(':visible')) {
      det.slideDown();
      t.removeClass('icon-arrow-down').addClass('icon-arrow-up');
   } else {
      det.slideUp();
      t.removeClass('icon-arrow-up').addClass('icon-arrow-down');
   }
});

Ajax Image Loaders

You can create your own loader images by going to ajaxload.info