近期在做ASP.NET项目中,须要实现一个tab页控件。

发现asp.net控件中没找到现成的。

一般的实现都须要js和div配合。于是就用到了easyui里面的。

使用也非常easy。将easyui须要的js和样式文件都载入后。直接用div就可以实现。

效果例如以下

代码也非常easy。每一个tab是一个div。

引用easyui的样式就可以。

页面代码例如以下:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3. <title>tabsPage</title>
  4. <link href="Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
  5. <link href="Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
  6. <script src="Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
  7. <script src="Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
  8. <script src="Scripts/EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script>
  9. <script src="Scripts/Common.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12. <div id="tabTop" class="easyui-tabs">
  13. <div title="星期一">
  14.  
  15. </div>
  16. <div title="星期二">
  17.  
  18. </div>
  19. <div title="星期三">
  20.  
  21. </div>
  22. <div title="星期四">
  23.  
  24. </div>
  25. <div title="星期五">
  26.  
  27. </div>
  28. <div title="星期六">
  29.  
  30. </div>
  31. <div title="星期日">
  32.  
  33. </div>
  34. </div>
  35.  
  36. </body>
  37. </html>

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

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

JavaScript提高:002:ASP.NET使用easy UI实现tab效果的更多相关文章

  1. JavaScript提高:001:ASP.NET使用easy UI

    jQuery EasyUI是一组基于jQuery的UI插件集合.能够简洁的开发出功能多内容丰富的界面,而不须要开发人员自己费力的写那些复杂的js代码.本文简介在ASP.NET开发中引用这些js文件和样 ...

  2. JavaScript提高:003:easy UI实现tab页面自适应问题

    前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477只是有 ...

  3. easy ui 实现gridview效果

    前台: // 加载审批步骤列表 function FillStep(flowID) { $('#tbStepList').datagrid({ url: "/System/ApproverS ...

  4. JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题

    前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),只是在ASP.NE ...

  5. ASP.MVC EASY UI 入门之 —— Tree & ComboTree

    1.常规的EASY UI的tree和comboTree代码基本是官方的DEMO都有的,虽然很简单,但是还是要实践的做一次,才能更清晰的了解和使用它!先上效果图 因为用的是code first,所以数据 ...

  6. Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  8. easy ui datagrid 增,删,改,查等基本操作

    如下图: ①列表信息图 ②添加信息图 ③修改信息图 html代码: <%@ Page Title="" Language="C#" MasterPageF ...

  9. 茗洋Easy UI 1.3.5 部分问题解决系列专题[自定义alert关闭时间,自动关]

    [评论,楼层数为30的倍数的,我送你我自己的博客园的皮肤,该博客参与活动] 这次我又给大家带来的EasyUI的我研究拓展的新特性 我使用的是  EasyUI 1.3.5版本的,项目是ASP.NET M ...

随机推荐

  1. adb devices 找不到设备怎么办 --- 2

    问题现象:在电脑上安装好手机驱动后,手机进入设置---->应用程序---->开发----->勾选USB调试后连接电脑,,在CMD命令中输入adb devices发现没有设备. 解决方 ...

  2. VS2010免费插件

    用惯了VC助手后,突然用裸的VS真不习惯... 1. 在Visual Studio 2010中,我们可以通过在任何代码文件中使用快捷键“Ctrl + ,”(Ctrl键加上逗号键)调出“Quick Se ...

  3. 【Node.js】4.从一个例子切入Node js的规范

    在开始之前,需要明确的一点就是, ①Node应用是由模块组成的,每一个文件都是一个模块,有自己的作用域. ②在这个文件里定义的变量,函数,类都是私有的,对其他的文件不可见. ③在一个文件中,也就是在一 ...

  4. 手动删除SVCH0ST.EXE的方法

        最近几天在办公室的计算机上又发现了一种病毒,在进程管理器中多出了两个进程:SVCH0ST.EXE.IEXPLORE.EXE,经一番查看揭开了它们的真面目,现将清除这种病毒的方法总结如下: 病毒 ...

  5. hdoj 1159最长公共子序列

     /*Common Subsequence A subsequence of a given sequence is the given sequence with some elements ( ...

  6. JAVA之接口与实现

    /** *  * 功能:接口与实现 * 接口也体现了多态性 */package com.test; public class test5 { /**     * @param args     */  ...

  7. Linux使用nginx部署Laravel

    问题描述 Laravel是PHP下当今最受欢迎的web应用开发框架,github上start数远超第二名Symfony,以前我用这个框架做项目的时候通常就是扔到apache里面,然后配置.htacce ...

  8. mysql update 的时候使用left join和where语句

    在使用update语句的时候我们有时候需要利用left join 关联表,以下是正确操作: 效果,让指定的order表id为1,2,3数据的finish_at字段更新为freports表的create ...

  9. idea 热部署

  10. Java基础学习过程

    转载:http://blog.csdn.net/scythe666/article/details/51699954JVM 1. 内存模型( 内存分为几部分? 堆溢出.栈溢出原因及实例?线上如何排查? ...