zoukankan      html  css  js  c++  java
  • 无意间看到原码。看到的。。。。

    简单介绍
    默认的onclick
    onmousover触发
    自动播放auto
    菜单导航
    关于嵌套
    其他应用
    一些说明
     
     
     
     
    封装了一个选项卡,不过已经不像选项卡了-_-!!!

    现稍微说明下吧,如果不明白的话,旁边有几个例子可能说明起来更清楚些

    obj.bind = ["a1","td","b1","div"];
    绑定id="a1"下的td标签为菜单,绑定id="b1"下的div标签为内容,简单么?
    td标签的数量和div标签的数量必须相同
    (若不需要显示内容,只显示菜单话,可以这个在td标签上加<td skip="true">)
    如果id="a1"下的td标签有嵌套表格,这样的话,就不是所有的td都是菜单,这时候需要用下nesting

    obj.nesting = [false,true,"",""];
    当标签tag有嵌套时,需要用到这个
    比如选项卡内容是放在div容器里,而本身这个内容里也有div标签,这时就需要用到
    菜单嵌套为false,内容嵌套为true,且会自动判断出内容标签,多数时候这样就可以了
    判断方法为,认定getElementsByTagName后第一个标签为内容第一项,其他的就用这个第一项的深度来判断
    但有些情况下,这样还是不行
    我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];
    这样就肯定不会错了(不明白的话看下例子就简单多了)

    obj.index = 0;
    默认显示第几个选项卡,序号从0开始

    obj.style = ["c1","c2","c3"]
    菜单加载的样式的className:
    菜单未选中的className是c1
    菜单选中的className是c2
    菜单onmouseover的className是c3

    obj.overStyle = false;
    选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容],对应的样式为style[2]

    obj.overChange = false;
    选项卡内容是否用onmouseover, onmouseout直接激活

    obj.menu = false;
    选项卡是菜单类型

    obj.auto = [false, 1000];
    选项卡是否自动播放,播放速度(毫秒)

    obj.creat();
    开始生成选项卡,需要onclick触发事件的话,可以obj.creat(函数名)
    所有的都会触发

    • 1
    • 2
    • 3
    • 4
    这个例子是用onclick触发的
    并设置overStyle = true;
    (over,out改变样式,但不激活)
    var bba = new opCard();
    bba.bind = ["a2","li","b2","div"];
    bba.style = ["style1","style2","style1"];
    bba.overStyle = true;
    bba.creat();
    bba = null;
    33333
    4444444

    • 1
    • 2
    • 3
    • 4
    这个例子是比上面增加skip="true"
    即<li skip="true">4</li>
    所以选项卡4是没有内容的
    你可以为选项卡的文字直接加上链接,我这里就不加了
    222222
    33333
    4444444
    • 1
    • 2
    • 3
    • 4
    这个例子是用onmouseover触发的
    (over,out直接激活)
    并且<li skip="true">3</li>[选项卡3不会被激活]
    overStyle = true;
    var cc = new opCard();
    cc.bind = ["a4","li","b4","div"];
    cc.style = ["style1","style2","style1"];
    cc.overStyle = true;
    cc.overChange = true;
    cc.creat();
    cc = null;
    33333
    4444444
    • 1
    • 2
    • 3
    • 4
    1111111
    我每3秒切换一个选项卡
    var ee = new opCard();
    ee.bind = ["a6","li","b6","div"];
    ee.style = ["style1","style2","style1"];
    ee.auto = [true, 2000];
    ee.overChange = true;
    ee.creat();
    ee = null;
    33333
    我每3秒切换一个选项卡
    4444444
    我每3秒切换一个选项卡
    注:鼠标在选项卡任意位置都会使停止播放

    下面这个结合overChange一起
    • 1
    • 2
    • 3
    • 4
    1111111
    我每2秒切换一个选项卡
    var dd = new opCard();
    dd.bind = ["a5","li","b5","div"];
    dd.style = ["style1","style2","style1"];
    dd.auto = [true, 3000];
    dd.creat();
    dd = null;
    33333
    我每2秒切换一个选项卡
    4444444
    我每2秒切换一个选项卡

    下面这个再来个<li skip="true">3</li>,且overStyle=true;
    • 1
    • 2
    • 3
    • 4
    1111111
    我每1秒切换一个选项卡
    var ff = new opCard();
    ff.bind = ["a7","li","b7","div"];
    ff.style = ["style1","style2","style1"];
    ff.auto = [true, 1000];
    ff.overChange = true;
    ff.overStyle = true;
    ff.creat();
    ff = null;
    33333
    我每1秒切换一个选项卡
    4444444
    我每1秒切换一个选项卡
    • 首页
    • 新闻
    • 论坛
    • 联系我们
    注:菜单延时一秒关闭
    这里只是演示,实际可以设置下position什么的。-o-
    多级菜单不知道能不能支持,没试过
    我见过的许多选项卡都不能用来嵌套
    但还是有些时候会用到的
    所以如您所见,这个演示本身就是一个嵌套,效果还不错
    比如图片切换什么,不过我太懒了,不写了。。。
    这个能干什么,我也不知道。。
  • 新年好啊
  • 快过年了
  • 天好冷啊
  • 大家去抢红包吧
  • 红包~!红包~!你在哪里啊?
  • 选项卡标题(或者菜单)必须和选项卡内容的数量相同,否则会出错
    即使选项卡菜单skip="true",内容也要放一个空的标签占位
    其他好像暂时没发现什么

    本来打算加入ajax的,但有些还没想好。
    效率的话,应该还行,我这个演示放了几个选项卡,似乎还不错

    写这个的目的就是以后弄选项卡只要处理样式就可以了,很多选项卡或者切换之类都是大同小异
    本来是打算弄些特效在里面,考虑会增加不少代码,所以不加了,简洁点。

    哦,还有选项卡是附加样式,不会取消原本设置的样式
    如左边的下划线是原有的样式
    啥都没有1
    啥都没有2
    啥都没有3
    啥都没有4
  • 相关阅读:
    C 实战练习题目45
    C 实战练习题目44
    C 实战练习题目43
    C 实战练习题目42 -auto定义变量
    C 实战练习题目41 -static定义静态变量
    如何0基础学习C/C++?
    2019-11-29-win10-uwp-关联文件
    2019-11-29-win10-UWP-Controls-by-function
    2019-11-29-WPF-高性能笔
    2019-11-29-WPF-使用-Win2d-渲染
  • 原文地址:https://www.cnblogs.com/fat_li/p/1907494.html
Copyright © 2011-2022 走看看