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

最近在做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

JavaScript提高:002:ASP.NET使用easy UI实现tab效果,布布扣,bubuko.com

时间: 2024-12-22 13:24:16

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

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

jQuery EasyUI是一组基于jQuery的UI插件集合.可以简洁的开发出功能多内容丰富的界面,而不需要开发者自己费力的写那些复杂的js代码.本文简单介绍在ASP.NET开发中引用这些js文件和样式.下面看下需要引用的基本常用的easyui文件.文件下载网上比较多,可以直接搜索下载.一些常用的文件如下图所示 在asp.net页面引用如下: 引用样式和文件 <link href="Scripts/EasyUI/themes/icon.css" rel="styles

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

前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477不过有一个问题,div的宽度太宽了,而且不随页面变化而改变.网上搜索了下,发现很多人也碰到过,而且也有解决的办法.下面看看吧.实现tab的部分代码如下:引用的easyui文件参考上文. <div id="tabTop" class="easyui-tabs"> &

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

前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),不过在ASP.NET中使用时发现了一个问题. 大家都知道,asp.net页面的控件,当控件的事件不是使用 "return js函数();"时,或者控件注册的是后台的事件,那么整个页面会重新加载的.此时这个easy ui实现的tabs标签,总是回到了第一个tab页.虽然可以借助ajax和jQuery的方法,来

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

jQuery Easy UI的使用

一.初步认识 1.什么是jQuery Easy UI jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面. 官方网站http://www.jeasyui.com 2.jQuery EasyUI有哪些特点 (1).基于 jquery 用户界面插件的集合: (2).源代码加密.商业版付费 (3).使用 EasyUI 你不需要写很多的 javascript 代码,通常只需要写 HTM

Jquery Easy UI的初步使用

总的来说,easyUI是jquery的一个很好地扩展,大大的提高了代码的开发速度,是一个很好地插件,我在使用的过程中,总体的感觉还是很不错的. 虽然相对来说,文件包稍微的有点大,但是在现在的网络世界中,这点大小就显得微不足道了,所以,在前端设计方面还是有很多的优势. 下面是一个easyUI的初步实例: <!DOCTYPE html> <html> <head> <title>Jquery Easy UI</title> <meta char

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

如下图: ①列表信息图 ②添加信息图 ③修改信息图 html代码: 1 <%@ Page Title="" Language="C#" MasterPageFile="~/UI.Web/master/MemberMasterPage.Master" AutoEventWireup="true" CodeBehind="shop.ShopList.aspx.cs" Inherits="B2B_

Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

前言 很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中. 引入.封装和调用 首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easy

JavaScript提高:004:JS获取Gridview单元格时层级问题

使用javascript获取页面中元素的属性,或者对元素进行操作.这种使用是非常多的.不过对于获取那些在页面中单一的元素,诸如,页面上的某个文本框,下拉列表,按钮等可以直接用ID获取到的这种元素,用法自然简单.这里就不多说了,太简单了.一般比较复杂的是,获取元素中的元素,比如动态生成的那些元素.这里就拿表格中的元素为例吧.知道如何获取表格中的单元格内的元素了,其他的复杂元素也就不在话下了.下面举个简单的例子,获取GridView的单元格元素.平常使用比较多的也就是这种的.行中有个操作按钮,然后对