operamasks-ui使用笔记

最新推荐文章于 2024-04-23 10:06:28 发布

kinglimy

最新推荐文章于 2024-04-23 10:06:28 发布

阅读量7.6k

点赞数

本文链接：https://blog.youkuaiyun.com/kinglimy/article/details/9028199

版权

本文介绍了operamasks-ui的基础知识，包括其简介和使用示例，并详细阐述了实现示例的步骤，帮助读者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

operamasks-ui简介

最近在项目中用到operamasks-ui实现页面多标签的功能。OperaMasks-UI遵循 LGPL 协议，开源免费。基于JQuery提供丰富的前端UI库。用户可以到该网站：http://ui.operamasks.org/website/download.html上下载。

使用示例

该用例主要实现的是在一个页面上添加多个标签，每个标签下打开一个页面。实际效果如下图所示，页面包含3个标签，每个标签打开一个页面。

示例实现步骤

1）下载operamasks-ui相关文件，新建下图所示四个页面。其中OMTest.aspx页面是主页面，其余三个页面对应三个标签下打开的子页面。

2）OMTest.aspx页面源码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OMTest.aspx.cs" Inherits="WebApplication1.OMTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>一个简单的panel</title>
    <link rel="stylesheet" type="text/css" href="css/default/om-default.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/operamasks-ui.min.js"></script>
    <script type="text/javascript">
        var id;
        var flag2 = true;
        var flag3 = true;
        $(document).ready(function () {
            $('#make-tab').omTabs({});
            id = GetQueryString("id");
            $('#make-tab').omTabs({
                onActivate: function (n, event) {
                    n++;
                    //alert('tab ' + n + ' has been activated!');
                    if (n == 2 && flag2) {
                        $("#tab" + n + " > iframe").attr("src", "OMtabTwo.aspx?" + "id=" + id);
                        flag2 = false;
                    }
                    if (n == 3 && flag3) {
                        $("#tab" + n + " > iframe").attr("src", "OMtabThree.aspx?" + "id=" + id);
                        flag3 = false;
                    }

                }
            });
            $("#tab1 > iframe").attr("src", "OMtabOne.aspx?" + "id=" + id);
            //$("#tab2 > iframe").attr("src", "OMtabTwo.aspx?" + "id=" + id);
            //$("#tab3 > iframe").attr("src", "OMtabThree.aspx?" + "id=" + id);

        });

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return (r[2]); return null;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div id="make-tab">
            <ul>
                <li>
                    <a href="#tab1">Title1</a>
                </li>
                <li>
                    <a href="#tab2">Title2</a>
                </li>
                <li>
                    <a href="#tab3">Title3</a>
                </li>
            </ul>
            <div id="tab1">
                <iframe src="" width="100%" height="800px" border=0 frameBorder='no'></iframe>
            </div>
            <div id="tab2">
                <iframe src="" width="100%" height="800px" border=0 frameBorder='no'></iframe>
            </div>
            <div id="tab3">
                <iframe src="" width="100%" height="800px" border=0 frameBorder='no'></iframe>
            </div>
        </div>
    </form>
</body>
</html>

其中，选中特定标签，触发activate事件。通过构造onActivite方法，实现延迟加载，即点击特定标签时，才加载该标签下的页面。