JavaScript提高：002：ASP.NET使用easy UI实现tab效果

最新推荐文章于 2022-02-17 13:20:38 发布

杨友山

最新推荐文章于 2022-02-17 13:20:38 发布

阅读量3.5k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yysyangyangyangshan/article/details/38307477

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近在做ASP.NET项目中，需要实现一个tab页控件。发现asp.net控件中没找到现成的。一般的实现都需要js和div配合。于是就用到了easyui里面的。使用也很简单，将easyui需要的js和样式文件都加载后。直接用div即可实现。

效果如下

代码也很简单，每个tab是一个div。引用easyui的样式即可。

页面代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>tabsPage</title>
    <link href="Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="Scripts/EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="Scripts/Common.js" type="text/javascript"></script>
</head>
<body>
  <div id="tabTop" class="easyui-tabs">
    <div title="星期一">

    </div>
    <div title="星期二">
    
    </div>
    <div title="星期三">

    </div>
    <div title="星期四">
    
    </div>
    <div title="星期五">

    </div>
    <div title="星期六">
    
    </div>
    <div title="星期日">
    
    </div>
  </div>
  
  </body>
</html>

引用文件如上一篇描述： http://blog.csdn.net/yysyangyangyangshan/article/details/38306591

代码下载：http://download.csdn.net/detail/yysyangyangyangshan/7696843

杨友山

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript提高：002：ASP.NET使用easy UI实现tab效果

最近在做ASP.NET项目中，需要实现一个tab页控件。发现asp.net控件中没找到现成的。一般的实现都需要js和div配合。于是就用到了easyui里面的。使用也很简单，将easyui需要的js和样式文件都加载后。直接用div即可实现。效果如下代码也很简单，每个tab是一个div。引用easyui的样式即可。页面代码如下： tabsPage
复制链接

扫一扫