Git Product home page Git Product logo

i35tab's Introduction

i35Tab

简介

基于 jQuery 的 Tab 选项卡,预览

特点

简单!

使用

第一步:引入依赖文件

// 引入基础依赖
<script src="./js/jquery-3.4.1.js"></script>
// 引入对应插件
<script src="./js/i35.min.js"></script>

第二步:初始化代码

// 添加到 body 的最后
$("body").i35Tab();

API

参数名 类型 是否必填 默认值 描述
titles array ["News", "Sports", "Education"] 标题
contents array ["News con...", "Sports con...", "Education ..."] 内容
eventType string click 事件类型
delayTime number 0 eventType 为 mouseover 时才生效,节流时间
color string #6341a5 主题颜色
effect string default 默认普通的显示/隐藏;支持 slide、fade
autoPlay boolean/number false 自动播放时间间隔
prevChange function function() {} 切换之前触发的回调
nextChange function function() {} 切换之后触发的回调
styles object ... 所有的样式配置必须写在次对象下面
wrap object ... 外包裹
title object ... 标题包裹
titleItem object ... 标题列表
titleItemFirst object ... 第一个标题
content object ... 内容包裹
contentItem object ... 内容列表
contentItemFirst object ... 第一个内容

效果预览

最基础使用

<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/i35.min.js"></script>
<script>
$('body').i35Tab();
</script>

点我预览

改变触发事件

// mouseover 时延迟 100ms 触发
$("body").i35Tab({
    eventType: "mouseover",
    delayTime: "100"
});

点我预览

改变主题

$("body").i35Tab({
    color: "#e23839",
});

点我预览

改变切换效果

$("body").i35Tab({
    effect: "slide"
});

点我预览

自动播放

$("body").i35Tab({
    autoPlay: 2000
});

点我预览

事件回调

$("body").i35Tab({
    prevChange: function(e) {
        console.log($(e.target).find(".i35-con div:visible").html());
    },
    nextChange: function(e) {
        console.log($(e.target).find(".i35-con div:visible").html());
    }
});

点我预览

i35tab's People

Contributors

ifer-itcast avatar

Stargazers

 avatar JackFan avatar  avatar  avatar  avatar  avatar yunfeng avatar ThisAndSuper avatar zhengxiaochuan avatar  avatar  avatar omo-ls avatar hxn001 avatar  avatar  avatar  avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.