前台tab左右箭头移动界面

最新推荐文章于 2024-03-11 11:26:29 发布
最新推荐文章于 2024-03-11 11:26:29 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： 前台 文章标签： java html 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44630850/article/details/105001934
版权 
前台tab左右箭头移动界面
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Tab - Layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        .layui-tab-title li {
            border-bottom: 1px solid #e6e6e6;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layadmin-pagetabs" style="position: relative;margin: 0px;padding: 0px;">
            <div class="layui-icon layui-icon-prev" id="left_button"  style="position: absolute;left: 0;background-color: #ffffff;width:40px;height:40px;text-align: center;line-height: 40px;color: #000000;"></div>
            <div class="layui-icon  layui-icon-next" id="right_button" style="position: absolute;right: 190px;background-color: #ffffff;width:40px;height:40px;text-align: center;line-height: 40px;color: #000000;"></div>
            <div class="layui-tab layui-tab-brief" lay-unauto="" lay-filter="test1"
                 style="left: 20px;position: relative;width:80%;overflow: hidden;">
                <ul class="layui-tab-title"  style="border-bottom: none;" >
                    <li class="layui-this" lay-id="111">文章列表1</li>
                    <li lay-id="222">发送信息2</li>
                    <li lay-id="333">权限分配3</li>
                    <li lay-id="444">审核4</li>
                    <li lay-id="555">订单管理5</li>
                    <li lay-id="333">权限分配6</li>
                    <li lay-id="444">审核7</li>
                    <li lay-id="555">订单管理8</li>
                    <li lay-id="333">权限分配9</li>
                    <li lay-id="444">审核10</li>
                    <li lay-id="555">订单管理11</li>
                    <li lay-id="333">权限分配12</li>
                    <li lay-id="444">审核13</li>
                    <li lay-id="555">订单管理14</li>
                    <li lay-id="333">权限分配15</li>
                </ul>

                <div class="layui-tab-content" style="height: 100px;">
                    <div class="layui-tab-item layui-show">1</div>
                    <div class="layui-tab-item">2</div>
                    <div class="layui-tab-item">3</div>
                    <div class="layui-tab-item">4</div>
                    <div class="layui-tab-item">5</div>
                    <div class="layui-tab-item">6</div>
                    <div class="layui-tab-item">7</div>
                    <div class="layui-tab-item">8</div>
                    <div class="layui-tab-item">9</div>
                    <div class="layui-tab-item">10</div>
                    <div class="layui-tab-item">11</div>
                    <div class="layui-tab-item">12</div>
                    <div class="layui-tab-item">13</div>
                    <div class="layui-tab-item">14</div>
                    <div class="layui-tab-item">15</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var oli = document.getElementsByTagName("li");
    for(let i=0; i<oli.length; i++){
            oli[i].onclick = function () {
                alert(this.innerHTML);
                testAjax()
            };
        };

    function testAjax() {

        $.ajax({

            type:'POST',

            data:{"id":6},

            contentType :'application/json',

            dataType:'json',

            url :'saveJsonUser',

            success :function(data) {
                console.log("OK")
                console.log(data)
            },
            error :function(e) {

                alert("error");

            }

        });

    }
    /*function imgFormUpload() {
        $.ajax({
            dataType: 'json',
            url: "https://www.baidu.com",
            success: function (data) {
            alert("submit success");
        }
    });
    }*/
    //JavaScript代码区域
    layui.use(['element', 'jquery'], function () {
        var element = layui.element;
        var $ = layui.jquery;
        var active = {
            tabadd: function (url, id, name) {
                element.tabAdd('test1', {
                        title: name
                        ,
                        content: '<iframe data-frameid="' + id + '" scrolling="no" frameborder="0" src="' + url + '" style="width:100%;"></iframe>' //支持传入html
                        ,
                        id: id
                    }
                );
                element.render('tab');
            },
            tab_change: function (data_id) {
                location.hash = 'test1=' + data_id;
                var layid = location.hash.replace(/^#test1=/, '');
                element.tabChange('test1', layid);
            }

        };
        //向右移动
        var less_width=0;sum_total=0;less_sum_title=0;tab_click_list=[];
        var total_list=[];   //记录菜单滚动宽度
        $('#right_button').click(function () {
            var sum_title=parseFloat($('.layui-tab-title').width());
            //temp_data存上一次宽度
            var temp_width=0;temp_data=0;one_total_list=0;
            var temp_total=$('.layui-tab-title li[lay-id]').length;
            for (var i=sum_total;i<temp_total;i++){
                tab_click_list.push($('.layui-tab-title li').eq(i).attr("lay-id"));
                temp_width = parseFloat($('.layui-tab-title li').eq(i).width())+30;
                if (less_width > sum_title+less_sum_title) {
                    less_width = less_width - temp_data;
                    less_sum_title = less_width;
                    break;
                } else {
                    //console.log('ok');
                    less_width += temp_width;
                    temp_data = temp_width;
                    sum_total=i;
                }
            }

            if (sum_total < temp_total-1) {
                //用列表记录菜单滚动所有宽度
                total_list.push(-less_width);
                console.log(total_list,'个数');
                var css = {
                    "left": -less_width,
                };
                $('.layui-tab-title').css(css);
            }

        });


        //向左移动
        var left_sum_width = 0;less_total_list=0;less_one_total=2;
        $('#left_button').click(function () {
            var sum_title=parseFloat($('.layui-tab-title').width());
            //temp_data存上一次宽度
            var temp_width=0;temp_data=0;
            var temp_total=$('.layui-tab-title li[lay-id]').length;
            less_total_list=total_list.length-less_one_total;
            ceshi = -total_list[less_total_list];
            if (less_total_list >= 0) {
                console.log(less_total_list, "less_total_list");
                var css = {
                    "left": total_list[less_total_list]
                };
                $('.layui-tab-title').css(css);
                less_one_total += 1;
            } else if (less_total_list < 0) {
                var css = {
                    "left": 0
                };
                $('.layui-tab-title').css(css);
                //清除所有已赋值的变量
                less_width=0;sum_total=0;less_sum_title=0;total_list=[];
            }
        });

        //移动函数
        function right_func(){
            var less_width=0;sum_total=0;less_sum_title=0;
            var total_list=[];   //记录菜单滚动宽度
            var sum_title=parseFloat($('.layui-tab-title').width());
            //temp_data存上一次宽度
            var temp_width=0;temp_data=0;one_total_list=0;
            var temp_total=$('.layui-tab-title li[lay-id]').length;
            for (var i=sum_total;i<temp_total;i++){
                console.log($('.layui-tab-title li').eq(i).attr("lay-id"),"lay-id");
                temp_width = parseFloat($('.layui-tab-title li').eq(i).width())+30;
                if (less_width > sum_title+less_sum_title) {
                    less_width = less_width - temp_data;
                    less_sum_title = less_width;
                    break;
                } else {
                    //console.log('ok');
                    less_width += temp_width;
                    temp_data = temp_width;
                    sum_total=i;
                }
            }

            if (sum_total < temp_total-1) {
                //用列表记录菜单滚动所有宽度
                total_list.push(-less_width);
                console.log(total_list,'个数');
                var css = {
                    "left": -less_width,
                };
                $('.layui-tab-title').css(css);
            }

        }



        //监听导航点击
        element.on('nav(test)', function (elem) {
            //console.log(elem);
            var data_click = $(this);
            var url = elem.parent('dd').children('a').attr('data-url');
            var data_id = elem.parent('dd').children('a').attr('data-id');
            var text_ch = elem.parent('dd').children('a').text();
            //只有获取到data_id才会执行，以防一级菜单点击后创建tab标签
            if (data_id) {
                //console.log('ok');
                //console.log($('.layui-tab-title li[lay-id]'));
                var isJudge = false;
                var sum_width = 0;
                $.each($('.layui-tab-title li[lay-id]'), function () {
                    //console.log($(this).width(), 'widhth');
                    sum_width += parseInt($(this).width());
                    //console.log($(this).attr("lay-id"));
                    //console.log(data_click.attr("data-id"));
                    if (($(this).attr("lay-id")) == (data_click.attr("data-id"))) {
                        isJudge = true;
                    }
                });
                //如果tab标签没有就添加并移到相应位子
                if (!isJudge) {
                    active.tabadd(url, data_id, text_ch);
                    active.tab_change(data_id);
                    var tab_click_total=$('.layui-tab-title li[lay-id]').length;
                    for (var b=0;b<tab_click_total;b++){
                        //判断是否在tab标签内，并移动
                        var temp_b=$.inArray(data_id, tab_click_list);
                        if (temp_b==-1){
                            $('#right_button').click();
                        }else if(temp_b>0){
                            tab_click_list=[];
                            break;
                        }
                    }
                    console.log(tab_click_list);
                    isJudge = false;
                }else {
                    active.tab_change(data_id);
                    tab_click_list=[];
                    var css = {
                        "left": 0
                    };
                    $('.layui-tab-title').css(css);
                    //清除所有已赋值的变量
                    less_width = 0;sum_total = 0;less_sum_title = 0;                    total_list = [];
                    var tab_click_total=$('.layui-tab-title li[lay-id]').length;
                    for (var b=0;b<tab_click_total;b++){
                        //判断是否在tab标签内，并移动
                        console.log(tab_click_list,"tab_click_list");
                        var temp_b=$.inArray(data_id, tab_click_list);
                        if (temp_b==-1){
                            $('#right_button').click();
                        }else if(temp_b>0){
                            tab_click_list=[];
                            break;
                        }
                    }
                }
            }

        });

        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function () {
            location.hash = 'test1=' + this.getAttribute('lay-id');
            console.log(location.hash);
        });
        var layid = location.hash.replace(/^#test1=/, '');
        element.tabChange('test1', layid);
    });
</script>

</body>
</html>
后台代码实现
package com.jinyi.HelloWorld.Controller;

import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;

@RestController
public class TabController {
    @GetMapping("tab")
    public ModelAndView testTab(){
        return new ModelAndView("tab");
    }

    @PostMapping("saveJsonUser")
    public Map saveJsonUser(HttpServletRequest request, String id){
        String parameter = request.getParameter(id);
        Map result=new HashMap();

        result.put("success",id);
        System.out.println(id);
        System.out.println(parameter);
        return result;

    }
}
心宇激扬
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现的带左右箭头的tab标签代码，tab里面可以放html代码，不限于文字
05-18
JavaScript实现的带左右箭头的tab标签代码，tab里面可以放html代码，不限于文字
左右箭头点击实现一行超出可视区域的tab切换
卡卡罗特的博客
11-26 5555
tab切换是网页布局中很常用的一个设计，如果我们的选项卡有很多个，一行显示不下，就需要把剩余的部分先隐藏，点击触发显示切换。如下图：  具体代码实现如下： 默认显示第一个（下标是0），可视区域7个选项卡。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta...
LAYUI 后台页面，切换TAB后刷新当前激活的TAB页面内容
最新发布
leiyanglove的博客
03-11 793
【代码】LAYUI 后台页面，切换TAB后刷新当前激活的TAB页面内容。
layui.js中table的cols属性详细介绍
一切从零开始
06-26 4304
layui.js 中table的cols属性介绍 ，templet的用法
layui实现的左侧动态菜单栏以及动态操作tab项，点击切换实现数据刷新
hmily43的博客
05-08 3672
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
左右移动tab页面切换效果
04-03
这是可以实现了左右移动tab页面切换效果，源码Tab Carousel，实现特殊效果的tab界面，左右移动tab的时候，页面的切换会有淡入淡出的效果，除了可以左右切换tab之外，每个tab还可以上下滑动，也就是所谓的 Panels ...
android 可左右移动Tab页
06-26
在Android开发中，实现可左右移动的Tab页是一种常见的需求，尤其在构建具有多个功能模块的应用时。Tab页设计能够帮助用户轻松地在不同的内容区域之间切换，提高用户体验。本项目名为“android 可左右移动Tab页”，...
Tab菜单左右移动组件 异步加载数据
11-14
采用Jquery 及 Javascript自定义了一个TabMenuComponent对象， 能够点击左右按钮实现平滑左右移动1个或多个Tab菜单，一次移动标签个数、移动速度、正反方向移动可以定制，点击Tab异步加载内容。
TAB箭头标签jQuery幻灯片特效代码
03-20
而“箭头”则是指左右移动的指示符，用户可以通过点击箭头来向前或向后浏览幻灯片。这种结合了选项卡和箭头的幻灯片设计，既提供了直观的导航方式，也增强了用户体验。 该jQuery幻灯片特效具备以下特点： 1. **...
原生js实现带左右箭头可滑动的tab效果
yolo_link的博客
10-09 2445
方便控制左右按钮的禁用状态设置，我采用button组件的图标按钮。可视区域为黄色框①，包含可视tab蓝色框②以及左右箭头红色框；绿色框③就是所有的tab了，②和③的关系就是卡槽和卡带的关系。控制菜单tab左右箭头的显隐。
tab切换，左右加箭头，点击箭头实现tab切换
凡尘
09-08 362
tab切换，左右加箭头，点击箭头实现tab切换
使用.LayUI实现动态选项卡Tab的强大功能
2201_75869073的博客
07-12 2248
通过本文，我们了解了如何使用.LayUI来创建动态选项卡Tab，并展示了其强大的功能。借助.LayUI框架提供的丰富组件和灵活的API，我们可以轻松实现动态选项卡Tab，为用户提供更好的使用体验。希望这篇博客对你有所帮助，祝你在Web开发中取得成功！
layui从子iframe打开父iframe的tab选项卡
weixin_33912246的博客
09-05 1147
数据表格字段： {field: 'novelId', title: '小说ID',width:100,templet: '<div><a href="javascript:;" _href="/contentManage/content-chapters.html" novelName="{{d.name}}" onclick="showChapters(this,{{d.no...
layui弹窗自适应变大_layui弹窗宽度固定高度自适应界面
weixin_39622901的博客
12-18 826
//默认上下15px的边距高度，可根据需要修改function layuiDialogFitScreen(){var layui_title_height=$(window.parent.document).find(".layui-layer-title").height();var border_margin=30;var minH=150;var _margin=0;var _top=$(w...
jquery实现同时展示多个tab标签+左右箭头实现来回滚动
weixin_30415801的博客
11-09 1290
内容： jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果： 蓝色框圈起来的分别是向上翻、向下翻俩按钮。绿色框分别是用户点击菜单后，出现相应的tab标签，当tab标签太多内容显示不下时，左右两边的按钮就可以实现看后面的tab标签和看之前的tab标签。小颖一开...
tab左右箭头切换(修改后)
08-03 833
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0037)http://www.shzhixun.net/platform.ht...
elementui-Tabs 标签页固定高度&内容超出高度可滚动
热门推荐
qq_42730111的博客
12-06 1万+
1、说明 当我们使用Tabs标签页的时候，直接套进去会发现标签下的内容的自适应的，会根据你的内容的大小进行扩展（如下图）。。 2、效果 也许你会觉得这并不符合你的需求，需要的是把内容的高度设置为100%同时有滚动效果 3、实现方法 给内容设置滚动样式即可 .el-tabs__content{ height: calc(100vh - 110px); overflow-y: auto; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值