当前位置: 首页 > 代码与插件 > jQuery Estorm Win8 Tab > 0.0.1

jQuery 仿win8 tab切换插件 jQuery Estorm Win8 Tab 0.0.1 发布日期:2014年06月15日 10:57:25

jQuery 仿win8 tab切换插件

浏览器支持:

  • IE10,11
  • Firefox
  • Chrome
  • Safri
  • Opera

1.可以自由配置icon图片和背景颜色;
2.第一次点击展开详细介绍,第二次关闭介绍;
3.可以配置每行显示个数,支持2行以上显示,最后一行的显示方向是反向的;
4.详细介绍可以自由配置,没有结构要求,样式也是独立的;
5带关闭按钮;
6.支持jQuery1.7以上版本,应该兼容各种浏览器;
7.源文件4K,压缩后3K;

安装使用

HTML代码:
<div class="win8-tab">
    <ul> 
        <li class="item" data-bgimage="images/demo.png" data-bgcolor="#68b1dd">
        <a href="javascript:;" class="title"><span>仿win8 tab切换插件</span></a>
        <div class="item-data">
        <h4 class="item-title"><a href="#">jQuery Prompt 仿Title提示效果</a></h4>
        <p class="item-intro">jQuery Prompt并不是要代替Title的默认提示效果,代替也没有意义。这个插件的意义就在于能显示长文本的内容,支持html代码。 </p>
        <p class="item-links">
        <a href="#">在线演示</a>
        <a href="#">代码下载</a>
        <a href="#">历史版本</a>
        </p>
        </div>
        </li>
        <li class="item" data-bgimage="images/demo.png" data-bgcolor="#8cc8d7">
        <a href="javascript:;" class="title"><span>仿win8 tab切换插件</span></a>
        <div class="item-data">
        <h4 class="item-title"><a href="#">jQuery Prompt 仿Title提示效果</a></h4>
        <p class="item-intro">jQuery Prompt并不是要代替Title的默认提示效果,代替也没有意义。这个插件的意义就在于能显示长文本的内容,支持html代码。 </p>
        <p class="item-links">
        <a href="#">在线演示</a>
        <a href="#">代码下载</a>
        <a href="#">历史版本</a>
        </p>
        </div>
        </li>
    </ul>
</div>
CSS代码:
.win8-tab { width:820px; height:400px; position:relative; margin:0 auto; }
.win8-tab a { color:#ffffff; text-decoration:none; }
.win8-tab a:hover { color:#ffffcc; }
.win8-tab li.item { position:absolute; background:#ffffff; overflow:hidden; left:50%; top:50%; margin:100px 0 0 -310px; opacity:0; }
.win8-tab .item-data { display:none; }
.win8-tab li.item a.title { width:96%; height:100%; display:block; text-align:center; font-size:14px; padding:0 3%; }
.win8-tab li.item a.title span { width:100%; display:block; position:absolute; left:0; bottom:20px; }
.win8-tab .win8-tab-showinfo { width:92%; display:block; position:absolute; left:0; padding:0 4%; color:#ffffff; font-size:13px; overflow:hidden; }
.win8-tab .win8-tab-showinfo .closed { width:32px; height:32px; display:block; overflow:hidden; text-indent:-9999px; background:url(images/closed.png) no-repeat 0 0; position:absolute; right:10px; top:10px; }
.win8-tab .win8-tab-showinfo .closed:hover { background-position:0 -32px; }
.win8-tab .win8-tab-showinfo p a { font-weight:bold; margin-right:10px; font-size:13px; }
.win8-tab .win8-tab-showinfo h4 { padding-top:25px; }
.win8-tab .win8-tab-showinfo h4 a { font-size:16px; }
JS代码:
$('.win8-tab').estormWin8tab({
    colsNum: 4, //每行显示几个, 默认4个
    itemWidth: 199, //item的宽度 默认199
    itemHeight: 199, //item的高度 默认199
    colsWidth: 8, //item之间的空隙 默认8
    containerBg: '#ffffff' //item背景颜色
});