JQ实现选项卡(jQuery原型插件扩展)

下边分为两个版本，一种是点击切换选项(index.js)，一种是滑过切换选项(index1.js)

HTML文件：

jq使用jquery-1.11.3.js版本

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery选项卡</title>

    <link rel="stylesheet" href="css/reset.min.css"/>

    <link rel="stylesheet" href="css/index.css"/>

</head>

<body>

<div class="container">

    <!--<span class="select">选项一</span><span>选项二</span><span>选项三</span>-->

    <ul class="tip clear">

        <li class="cur">选项一</li>

        <li>选项二</li>

        <li>选项三</li>

    </ul>

    <div class="contain cur">页卡一</div>

    <div class="contain">页卡二</div>

    <div class="contain">页卡三</div>

</div>

<div class="container">

    <!--<span class="select">选项一</span><span>选项二</span><span>选项三</span>-->

    <ul class="tip clear">

        <li class="cur">选项一</li>

        <li>选项二</li>

        <li>选项三</li>

    </ul>

    <div class="contain cur">页卡一</div>

    <div class="contain">页卡二</div>

    <div class="contain">页卡三</div>

</div>

<script src="js/jquery-1.11.3.js"></script>

<!--jQuery原型上扩展的插件-->

<script src="js/index.js"></script>

<script type="text/javascript">

    /*$('.container').on('click', '.tip>li', function () {

        $(this).addClass('cur').siblings().removeClass('cur')

                .parent().siblings('.con').removeClass('cur')

                .eq($(this).index()).addClass('cur');

    });*/

    //事件委托：利用事件冒泡传播机制

    // 模拟选项卡的ajax请求

    /*$('.tab>.tip>li').mouseover(function () {

        var curIndex = $(this).index();

        // $(this).addClass('cur').siblings().removeClass('cur')

        //     .parent().siblings('.contain')

        //     .eq(curIndex).addClass('cur')

        //     .siblings().removeClass('cur');

        $(this).addClass('cur').siblings().removeClass('cur')

                .parent().siblings('.contain')

                .each(function (index, item) {

                    //->this:item

                    curIndex === index ? $(this).addClass('cur') : $(this).removeClass('cur');

                });

    });*/

</script>

</body>

</html>

　index.css

@charset "utf-8";

.container {

    width: 600px;

    height: 400px;

    margin: 20px auto;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.container .tip li {

    float: left;

    width: 200px;

    text-align: center;

    line-height: 40px;

    font-size: 18px;

    background-color: lightblue;

    cursor: pointer;

}

.container .tip li.cur {

    background-color: lightsteelblue;

}

.container .contain {

    display: none;

    width: 600px;

    height: 300px;

    line-height: 300px;

    font-size: 20px;

    text-align: center;

    background-color: lightsteelblue;

}

.container .contain.cur {

    display: block;

}

　reset.min.css代码：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:0;padding:0}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}ul,ol{list-style:none}a{text-decoration:none;background-color:transparent}a:hover,a:active{outline-width:0;text-decoration:none}table{border-collapse:collapse;border-spacing:0}hr{border:0;height:1px}img{border-style:none}img:not([src]){display:none}svg:not(:root){overflow:hidden}html{-webkit-touch-callout:none;-webkit-text-size-adjust:100%}input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]),video:not([controls]){display:none;height:0}progress{vertical-align:baseline}mark{background-color:#ff0;color:#000}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,select,textarea{font-size:100%;outline:0}button,input{overflow:visible}button,select{text-transform:none}textarea{overflow:auto}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.clear:after{display:block;height:0;content:"";clear:both}

index.js代码：

$.fn.extend({

    changeTab: function (index, type) {

        //->this:current tab

        index = index || 0;

        type = type || 'click';

        var $list = $(this).find('.tip>li'),

            $contain = $(this).find('.contain');

        //->select default

        $list.removeClass('cur').eq(index).addClass('cur');

        $contain.removeClass('cur').eq(index).addClass('cur');

        //->click

        var preIndex = index;

        $(this).on(type, function (e) {

            var tar = e.target,

                $tar = $(tar),

                tarTag = tar.tagName.toUpperCase();

            //->TARGET IS TAB

            if (tarTag === 'LI' && $tar.parent().hasClass('tip')) {

                //->REMOVE

                $list.eq(preIndex).removeClass('cur');

                $contain.eq(preIndex).removeClass('cur');

                //->ADD

                var curIndex = $tar.index();

                $tar.addClass('cur');

                $contain.eq(curIndex).addClass('cur');

                preIndex = curIndex;

            }

        });

    }

});

// $('#tab1').changeTab(0, 'mouseover');
// $('#tab2').changeTab(2);
$('.container').each(function () {
$(this).changeTab();
});

index1.js代码：

$.fn.extend({

    changeTab: function (index, type) {

        $.each(this, function () {

            //->this:current tab

            index = index || 0;

            type = type || 'click';

            var $list = $(this).find('.tip>li'),

                $contain = $(this).find('.contain');

            //->select default

            $list.removeClass('cur').eq(index).addClass('cur');

            $contain.removeClass('cur').eq(index).addClass('cur');

            //->click

            var preIndex = index;

            $(this).on(type, function (e) {

                var tar = e.target,

                    $tar = $(tar),

                    tarTag = tar.tagName.toUpperCase();

                //->TARGET IS TAB

                if (tarTag === 'LI' && $tar.parent().hasClass('tip')) {

                    //->REMOVE

                    $list.eq(preIndex).removeClass('cur');

                    $contain.eq(preIndex).removeClass('cur');

                    //->ADD

                    var curIndex = $tar.index();

                    $tar.addClass('cur');

                    $contain.eq(curIndex).addClass('cur');

                    preIndex = curIndex;

                }

            });

        });

    }

});

// $('#tab1').changeTab(0, 'mouseover');

// $('#tab2').changeTab(2);

$('.container').changeTab(0, 'mouseover');

JQ实现选项卡(jQuery原型插件扩展)的更多相关文章

jQuery的noConflict以及插件扩展
一.noConflict函数 JavaScript有很多插件,如果jQuery对象的$与其他插件冲突,我们可以使用noConflict()方法去掉$或者使用其他的符号代替注:noConflict() ...
利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...
jquery自定义插件——以选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
aspx中的表单验证 jquery.validate.js 的使用以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲上面是效果,下面来说使用步骤 jQuery.Valid ...
jQ效果：jQuery时间轴插件jQuery Timelinr
前言这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
jQuery插件扩展方法
jQuery为扩展插件提拱了两个方法,分别是: jQuery.extend(object) —— 给jQuery对象添加方法. jQuery.fn.extend(object) —— 为扩展jQuer ...
jQuery插件扩展extend的实现原理
相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的 ...
jQuery笔记之工具方法extend插件扩展
jQuery工具方法 $.extend()插件扩展(工具方法) $.fn.extend()插件扩展(实例方法) 浅度克隆.深度克隆两个方法基本是一样的,唯一不同的就是调用方式不一样 -------- ...
jQuery 第九章工具方法之插件扩展 $.extend() 和 $.fn.extend()
$.extend() $.fn.extend() -------------------------------------------------- $.extend() 插件扩展(工具方法) jq ...

随机推荐

【Codeforces Round #460 (Div. 2) D】Substring
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果有环 ->直接输出-1 (拓扑排序如果存在某个点没有入过队列,说明有环->即入队的节点个数不等于n 否则. 说明可以 ...
Android Studio升级到0.8.1后怎样设置字体大小？
升级到0.8.1后.打开设置字体大小页面.你会发现无论是Default还是Darcula,都不同意你改变字体的大小.事实上这个是由于这两个模式是Android Studio自带模式,所以不同意你修改, ...
Image与byte[]数组的相互转换
近期项目有个需求是关于图片操作的,须要将图片保存到数据库中.经过尝试才知道Image类型文件是不能直接存储到数据库中的.保存之前须要我们做一步转换:将Image转换成字节数组类型Byte ...
Oracle HR 例子用户的建立 10g,11g均可
Oracle HR 例子用户的建立 10g,11g均可先将附件(见文章尾部)上的 10 个 .sql 文件放入这个路径中 : $ORACLE_HOME/demo/schema/human_resou ...
centOS6.3(64bit)Hadoop的Eclipse开发环境搭建
操作系统centos6.3(64位) 一个namenode 两个datanode Hadoop版本号:hadoop-1.1.2 Eclipse版本号:eclipse-standard-kepler-S ...
C# 开发 —— 数组类对象接口
数组类型是从抽象基类 Array 派生的引用类型,通过new运算符创建数组并将数组元素初始化为他们的默认值一维数组 type[] arrayname; 数组的长度不是声明的一部分,而且数组必须在访问 ...
centos7 docker镜像源设置
由于docker他的镜像下载地址是国外官网源需要修改添加 Docker 加速镜像(阿里云专属) 安装/升级你的Docker客户端推荐安装1.10.0以上版本的Docker客户端,参考文档 dock ...
运行 CMD 时，參数加引號常见问题
在调用 CMD 时.如脚本中用 WScript.Shell 调用. 假设參数中有包括空格的长路径名时,必需要加引號才干正确被识别. 是的,大家都知道要加引號.但怎么加却easy被误解.这个问题,不时地 ...
hdu5400Arithmetic Sequence
//一个序列,两个公差d1,d2 //问有多少个区间使得这个区间存在一个点,它的左边是公差为d1的序列 //它的右边是公差为d2的序列 //直接存入每一个点向左和向右延伸的公差长度,乘一下即可 //还 ...
STL中向量vector笔记
vector的本质是:数组的封装特点:读取能在常数时间内完成 Vector成员函数函数表述 c.assign(beg,end) c.assign(n,elem) 将[beg; end)区间中的数 ...

JQ实现选项卡(jQuery原型插件扩展)

JQ实现选项卡(jQuery原型插件扩展)的更多相关文章

随机推荐

热门专题