AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

常见后台jquery ui tabs方法实战

2016-01-09 2382
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

这里写图片描述

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>童梦无忧后台</title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/easy_ui/js/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/easy_ui/js/easyui-lang-zh_CN.js"></script>
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="js/easy_ui/css/easyui.css" />
        <!--<link rel="stylesheet" href="css/homepage.css" />
        <link rel="stylesheet" href="css/common.css" />-->
        <style>
            body {
                overflow: hidden;
                height: 100%;
            }

            .panel {
                height: 100%;
                overflow-y: auto;
            }

            html,
            body {
                height: 100%;
            }

            .container {
                height: 100%;
            }

            .all-title {
                margin-left: 350px;
                font-size: 14px;
                line-height: 48px;
            }

            .left_box {
                width: 200px;
                font-size: 14px;
                background: blueviolet;
                color: red;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                overflow-y: auto;
                /*出现滚动条*/
            }

            .right_box {
                margin-left: 200px;
                height: 100%;
            }

            .left_highlight {
                background: blue;
                height: 30px;
                display: block;
                line-height: 30px;
                padding-left: 20px;
                overflow: hidden;
            }

            .son_menu {
                background: green;
            }

            .son_menu li {
                height: 40px;
                line-height: 40px;
                color: #fff;
                padding-left: 59px;
                border-bottom: 1px solid red;
            }

            .son_menu li a {
                color: #fff;
            }

            .son_menu li.selected {
                background: brown;
            }

            .workstation {
                height: 48px;
                width: 100%;
                overflow: hidden;
                background: palevioletred;
            }

            .userInfo {
                width: 350px;
                font-size: 14px;
                line-height: 48px;
                color: black;
                margin: 0 auto;
                border: 1px solid red;
            }

            .quit {
                margin-left: 30px;
                font-size: 16px;
                cursor: pointer;
                border: 1px solid blue;
            }

            .quit i {
                margin-right: 5px;
                margin-top: 2px;
            }

            .tabs-panels {
                border-color: blue;
                height: 800px;
            }

            #tt {
                width: 100%;
                height: 700px;
                overflow-y: auto;
            }
            /*自定义 easy UI */


            .tabs-header,
            .tabs-tool {
                background: peru;
            }

            div.tabs-header {
                border: 1px solid green; 
            }
            ul.tabs {
                border-bottom: 1px solid #cacacd;
                height: 34px;
            }

            .tabs li.tabs-selected a.tabs-inner {
                background: pink;
                color: black;
            }

            .tabs li a.tabs-inner {
                background: #f2f2f2;
                color: #5a5a5a;
                border: 1px solid red;
                padding: 0 25px;
                border-radius: 0px;
            }

            .tabs li a.tabs-inner:hover {
                background: yellow;
            }

            .tabs li.tabs-selected a.tabs-inner {
                border: 1px solid red;

            }
        </style>
    </head>

    <body>
        <div class="containers">
            <div class="left_box">
                <ul class="left_ul">
                    <li class="left_list">
                        <span class="left_highlight">APP版本管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('添加APPle','versions_add.html')">添加APP版本</a>
                            </li>
                            <li>
                                <a href="javascript:;" onclick="addTabs('APP版本列表','https://www.baidu.com/')">APP版本列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">消息管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('消息推送','')">消息推送</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">帖子管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('主帖列表','invitation.html')">主帖列表</a>
                            </li>
                            <li>
                                <a href="javascript:;" onclick="addTabs('分配推荐','')">分配推荐</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">聊天室管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('聊天室管理','')">聊天室管理</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">漂流瓶管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('问题列表','bottle.html')">问题列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">预约管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('预约列表','')">预约列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">文章管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('文章上传','')">文章上传</a>
                            </li>
                            <li>
                                <a href="javascript:;" onclick="addTabs('文章列表','')">文章列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">提现管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('提现列表','')">提现列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">举报管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('举报列表','')">举报列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">用户管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('用户列表','')">用户列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">设置</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('修改密码','')">修改密码</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="right_box">
                <div class="workstation">
                    <!--<div class="fl" style="margin-left: 350px">-->
                    <!--童梦无忧后台-->

                    <!--</div>-->
                    <div class="userInfo">
                        当前登录用户：<span>sdfasd</span>
                        <span class="quit"><i class="glyphicon glyphicon-off"></i>退出</span>
                    </div>
                </div>
                <div id="tt">

                </div>
            </div>

        </div>

        <!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>-->

        <script type="text/javascript">
            $(function() {
                var heightSon = document.body.scrollHeight - 48;
                $(".panel-body").height(heightSon);
                $(".tabs-panels").height(heightSon);
                $("#tt").height(heightSon);
                $(".mainweb").height(heightSon - 30);
                    var url1 = 'https://www.baidu.com/';
                    var heightSon = document.body.scrollHeight - 48;
                    $("#tt").tabs({});
                    //默认打开百度
                    var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0"  src="' + url1 + '" style="width:100%;height:100%;"></iframe>';
                    $('#tt').tabs('add', {
                        title: '百度，你好',
                        content: content,
                        closable: true,
                    });
                    $(".son_menu li").click(function() {
                        $(this).addClass("selected").siblings("li").removeClass("selected");
                        $(this).parents(".left_list").siblings(".left_list").find(".son_menu").children("li").removeClass("selected");
                    })
                })
                //添加tabs
            function addTabs(title, url) {
                                if ($('#tt').tabs('exists', title)) {    //判断是否存在此选项卡
                                    $('#tt').tabs('select', title);
                                    $('#tt').tabs('update', {
                                        tab: select
                                    });
                                } else {
                                    var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
                                    $('#tt').tabs('add', {
                                        title: title,
                                        content: content,
                                        closable: true,
                                    });
                                }
//              var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
//              $('#tt').tabs('add', {
//                  title: title,
//                  content: content,
//                  closable: true,
//              });
            }

            //全部显示
            var heightSon = document.body.scrollHeight - 48;

            function modified(wer) {
                $(".panel-body").height(heightSon);
                $(".tabs-panels").height(heightSon);
                $("#tt").height(heightSon);
                $(".mainweb").height(heightSon - 30);
            }
        </script>
    </body>

</html>
文章标签：
JavaScript
前端开发
容器
数据安全/隐私保护
关键词：
UI实战
UI方法
UI jquery
jQuery方法
UI后台
cometwo123
目录
相关文章
霍格沃兹测试开发学社
|
25天前
|
Web App开发 前端开发 JavaScript
Playwright极速UI自动化实战指南
Playwright告别Selenium痛点，以智能等待、强大选择器、网络拦截与多设备模拟四大利器，提升自动化效率与稳定性。本文通过实战代码详解其加速秘籍，助你构建高效、可靠的UI测试方案。
霍格沃兹测试开发学社
178 0
霍格沃兹测试开发学社
|
7天前
|
人工智能 自然语言处理 JavaScript
Playwright MCP在UI回归测试中的实战：构建AI自主测试智能体
Playwright MCP结合AI智能体，革新UI回归测试：通过自然语言驱动浏览器操作，降低脚本编写门槛，提升测试效率与覆盖范围。借助快照解析、智能定位与Jira等工具集成，实现从需求描述到自动化执行的闭环，推动测试迈向智能化、民主化新阶段。
霍格沃兹测试开发学社
114 4
卓伊凡
|
1月前
|
存储 消息中间件 人工智能
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
卓伊凡
60 4
程序员潘Sir
|
1月前
|
JavaScript 前端开发 开发者
鸿蒙应用开发从入门到实战（六）：ArkTS声明式UI和组件化
鸿蒙开发语言ArkTS在继承了Typescrip语法的基础上，主要扩展了声明式UI开发相关的能力。
程序员潘Sir
58 0
霍格沃兹测试开发学社
|
2月前
|
传感器 人工智能 JavaScript
Playwright实战：写UI自动化脚本，速度直接起飞
简介： 测试工程师老王因UI自动化问题深夜奋战，反映出传统测试工具的局限性。微软开源的Playwright凭借智能等待、跨域操作、移动端模拟与网络拦截等强大功能，正迅速取代Selenium，成为新一代自动化测试标准。其稳定高效的设计显著降低维护成本，助力企业构建高质量测试流程。
霍格沃兹测试开发学社
207 0
土木林森
|
12月前
|
存储 JavaScript 开发者
探索鸿蒙新世界：ArkUI框架实战指南，解锁HarmonyOS应用UI设计的无限可能！
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具，支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理，通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
土木林森
952 3
卓伊凡
|
8月前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
卓伊凡
356 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
李游Leo
|
7月前
|
开发框架 缓存 自然语言处理
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别，展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素：数据驱动、组件化和状态管理，并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后，通过构建完整TODO应用实战，结合调试优化指南，帮助开发者掌握声明式UI设计精髓，感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维，共同推动HarmonyOS生态发展。
李游Leo
313 3
哈你真皮
|
10月前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
哈你真皮
92 0
二二*一一
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
二二*一一
185 6

热门文章

最新文章

  • 1
    执行决策UI：一种更快观察、定位、决策和打破竞争对手的惊人方式
  • 2
    鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
  • 3
    使用 Playwright MCP 实现 UI 自动化测试
  • 4
    Playwright极速UI自动化实战指南
  • 5
    抓紧上车，别再错过啦， Github 开源后台管理平台，Naive UI ！！！
  • 6
    【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
  • 7
    鸿蒙应用开发从入门到实战（六）：ArkTS声明式UI和组件化
  • 8
    Playwright MCP在UI回归测试中的实战：构建AI自主测试智能体
  • 9
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
  • 10
    18个使用 jQuery 制作的创意网站欣赏
  • 1
    【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发四
    188
  • 2
    【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发之常见布局
    243
  • 3
    UI自动化测试中的元素等待机制解析
    135
  • 4
    48.[HarmonyOS NEXT RelativeContainer案例五] 精确表单布局：辅助线定位技术打造专业级UI
    100
  • 5
    44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局：打造灵活精准的UI定位系统
    139
  • 6
    09.HarmonyOS Next数据驱动UI开发：ForEach与动态渲染完全指南(上)
    112
  • 7
    06.HarmonyOS Next UI进阶：Text组件与视觉样式完全指南
    211
  • 8
    【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发三
    171
  • 9
    【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发二
    187
  • 10
    【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发一
    182

    • 相关课程

    更多
  • jQuery开发教程

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI
    • 下一篇
    阿里云无影云电脑免费使用_免费申请教程