Javashop Tab页jQuery插件使用指南

一、概述

Javashop Tab页jQuery插件是一款基于jquery插件的Tab页生成器。

可用于快速生成Tab页面,有如下特点:

  •  基于jquery插件的风格,只需引入一个插件脚本和按照规格格式编写HTML,其它不用关心,生成方便灵活
  •  同个页面可生成多个Tab页,互不干扰

效果预览

 

 

二、使用说明

1.基本使用指南

1.引入选器插件:

<script type="text/javascript" 
src="/adminthemes/new/js/jquery.Tab.js"></script>

2.编写HTML:

<div id="test_tab" style="margin:20px;">
    <div class="contentTab">
        <ul class="tab">
            <li tabid="one" class="active" >第一</li>
            <li tabid="two" >第二</li>
        </ul>
    </div>

    <div class="tab-page">
        <div tabid="one" class="tab-panel" >
            <h1>我是第一个内容</h1>
        </div>
        <div tabid="two" class="tab-panel" style="display: none;" >
             <h1>我是第二个内容</h1>
        </div>
    </div>
</div>

这里需要注意的是,这个HTML格式并不是全部规定死的。只要有ul 和 class为tab-page的div,其他元素可随意增加,样式随意写。

3.调用插件生成选择器(选择需要悬浮的元素)

<script type="text/javascript">

$(function(){

    $("#test_tab").Tab();

});

</script>

如上代码在id为test_tab的div中实现了tab页。

Javashop 自动悬浮jQuery插件使用指南

一、概述

Javashop 自动悬浮jQuery插件是一款基于jquery插件的自动悬浮器。可在元素不在可视范围内时自动悬浮到页面底部。

可用于快速自动悬浮元素,有如下特点:

  •  基于jquery插件的风格,只需引入一个插件脚本,其它不用关心,生成方便灵活
  •  同个页面悬浮多个元素,互不干扰

效果预览

图1: 测试div不在可视范围内,自动悬浮到浏览器底部。

图2:测试div初始位置已在可视范围内,则显示它,不悬浮。

二、使用说明

1.基本使用指南

1.引入选器插件:

<script type="text/javascript" 
src="/themes/b2b2cv2/js/jquery.autoFloat.js"></script>

2.调用插件生成选择器(选择需要悬浮的元素)

<script type="text/javascript">

$(function(){

    $("xxx").autoFloat();

});

</script>

如上代码已实现元素自动悬浮。