« Подготовлено: Yworld-Новости Software и Web технологий » Решения на CSS Решения на jQuery CSS плюс jQuery SEO публикации

Панель для сайта jQuery и CSS

jixedbar (0.0.5 Branch/Development) - a jQuery fixed bar plugin. (https://code.google.com/p/jixedbar/)

Last update: September 21, 2010

Release Notes

Overview

jixedbar is a jQuery plugin that lets you fix a horizontal bar at the bottom of your website or web application. This project was inspired by Facebook’s fixed application/menu bar.

How-to

  1. Get the latest copy of jixedbar, you can get it in two(2) ways:
    1. Project's download page (the easy way).
    2. or checkout the source code at Google Subversion (SVN) repository:
         svn checkout https://jixedbar.googlecode.com/svn/trunk/ jixedbar
      
  2. Extract or copy the source on your web root then include this simple codes inside your HTML Head:
    <link type="text/css" href="/path/to/themes/default/jx.stylesheet.css" rel="stylesheet"/>
    <script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/path/to/src/jquery.jixedbar.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
    		$("#sample-bar").jixedbar();
        });
    </script>
    

    Notes:

    • This package includes jQuery 1.4.2. Check for the latest version and if needed replace with the latest version/release.
    • Replace with the appropriate path. (scripts, themes, etc)

    Sample bar/menu items

    <div id="sample-bar">
    
       <ul>
          <li title="Home"><a href="https://your.domain.tld/"><img src="img/home.png" alt="" /></a></li>
       </ul>
    
       <span class="jx-separator-left"></span>
       
       <ul>        
          <li title="Around The Web"><a href="#"><img src="img/web.png" alt="Get Social" /></a>
             <ul>
                <li><a href="https://www.facebook.com/account-name"><img src="img/facebook.png" title="Facebook" />Facebook</a></li>
                <li><a href="https://twitter.com/account-name"><img src="img/twitter.png" title="Twitter" />Twitter</a></li>
                <li><a href="https://www.flickr.com/photos/account-name/"><img src="img/flickr.png" title="Flickr" />Flickr</a></li>
             </ul>
          </li>
       </ul>
       
       <span class="jx-separator-left"></span>
       
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
       
       <ul class="jx-bar-button-right">
          <li title="Feeds"><a href="#"><img src="img/feed.png" alt="" /></a>
             <ul>
                <li><a href="https://your.domain.tld/feed/"><img src="img/feed.png" title="Content Feeds" />Content Feed</a></li>
                <li><a href="https://your.domain.tld/comments/"><img src="img/comment.png" title="Comment Feeds" />Comment Feed</a></li>
             </ul>
          </li>
       </ul>
       
       <span class="jx-separator-right"></span>
       
    </div>
    

Behaviors

You can pass parameters on jixedbar to change how it look and/or behaves.

Option Type Description Default
showOnTop Boolean Position the bar on top, instead of the default bottom. false
transparent Boolean Make the bar transparent. false
opacity Float Set bar's opacity level. (0.0 ~ 1.0) 0.9
slideSpeed String or Integer Set bar's hide/show slide effect speed. (fast ~ slow or 200 ~ 600) fast
roundedCorners Boolean Enable or disable bar's rounded corner property. true
roundedButtons Boolean Enable or disable button's rounded corner property. true
menuFadeSpeed String or Integer Set menu fade effect speed. (fast ~ slow or 200 ~ 600) 250
tooltipFadeSpeed String or Integer Set tooltip fade effect speed. (fast ~ slow or 200 ~ 600) slow
tooltipFadeOpacity Float Set tooltip fadeout opacity effect. (0.0 ~ 1.0) 0.8

Example:

$("#sample-bar").jixedbar({
    showOnTop: true,
    transparent: true,
    opacity: 0.5,
    slideSpeed: "slow",
    roundedCorners: false,
    roundedButtons: false,
    menuFadeSpeed: "slow",
    tooltipFadeSpeed: "fast",
    tooltipFadeOpacity: 0.5
});

Themes/Styles

You can customize the bar's look/style by modifiying the bundled theme. Choose the theme that you want to modify (under "themes" directory) and edit the "jx.bar.css" stylesheet file. Also you can create your own by copying from one of the existing theme (for reference) and save it under "themes" directory with a different theme name.

CSS Class Reference:

Class Description
jx-bar Style for the main bar
jx-bar span Separators. (width, background-color)
jx-separator-left Separator's position. (float left)
jx-separator-right Separator's position. (float right)
jx-bar-button li Defines bar's button style.
jx-bar-button li:hover Button hover effect.
jx-bar-button li a:* Button's anchor text style.
jx-bar-button-tooltip Button's tooltip style.
jx-bar div Text container and arrow indicator style.
jx-bar iframe iframe tag style.
jx-nav-menu Drop up/down menu style.
jx-nav-menu a:hover Menu item hover effect.
jx-nav-menu ul li a Style for menu items.
jx-nav-menu-active Style for active button. (button clicked state)
jx-arrow-up Arrow indicator. (Up state)
jx-arrow-down Arrow indicator. (Down state)
jx-tool-point-dir-down Tooltip pointer direction state. (Down state)
jx-tool-point-dir-up Tooltip pointer direction state. (Up state)
jx-hide Hide container style.
jx-show Show container style.

You can also change/replace the icons, if you wish to.

Browser Compatibility

Tested to work on Firefox, Chrome and IE8 browsers.

Support

Do you like this project? If Yes, then please show your support by (any of the following):

Credits

Around the web

Find jixedbar around the web:

License

jixedbar is available for use in all personal or commercial projects under both MIT and GPL licenses.

Используйте и настраивайте панель по своему усмотрению.