bet9九州应用不同Theme的办法,学习笔记

作者: 人才发展  发布:2019-09-18

bet9九州 1

1 介绍

jqGrid for ASP.NET MVC 是一个服务端组件。

  • 专为MVC    分隔 model ,view , controller 的原则,完全观察者模式
  • 非常快的速度    仅仅很少的必须的数据会从服务端发送到客户端,使用json
  • 智能的数据源操作    1000000行,过滤和搜索,不用写代码就能实现。相应速度快
  • 没有使用ViewState
  • 最小的HTML尺寸    jqgrid 使用客户端 rendering ,它意味着没有大量的数据,使用HTML被嵌套在 <table> 中
  • 基于jQuery    的客户端 基于jQuery的常见的和强大的API
  • 完全的特性    任何你想要的特性,包括 分层(hierarchy),排序sorting,过滤,分页等。
  • 主题编辑器的支持    使用主题编辑器,私人设计师设计的一组25个主题,完全的免费

 

2 系统必备

bet9九州,浏览器支持大多数主流浏览器

  • Internet Explorer - 6+
  • FireFox 3+
  • Safari 2+
  • Google Chrome 2+
  • Opera 9.5+

jQuery 版本支持 1.3.2+ 。推荐使用最新的官方稳定版。

Visual Studio 支持 05,08,10

ASP.NET MVC Framework 支持 2.0

  一开始,我准备去动手,自己修改CSS文件。这被证明是个非常费力不讨好的事情。

3 在项目上使用 jqGrid

包含三个文件夹,bin 文件夹包含组装的DLL。 themes 文件夹包含主题。任何jQuery UI ThemeRoller 做的主题都能用,你可以下载附加的主题。

要使用自带的 “Redmond” 主题,需要引用 themes 文件夹下的两个文件。ui-jqgrid.css 是唯一一个jqGrid 需要使用的CSS文件。将它加在你的主题文件后面引用。

1 <link rel="stylesheet" type="text/css" href="themes/redmond/jquery-ui-1.7.1.custom.css"/>2 <link rel="stylesheet" type="text/css" href="themes/ui.jqgrid.css"/>

js 文件夹,是jqGrid必须的脚本。按一下顺序引用

jquery-1.3.2.min.js

i18n 本地化语言

jquery.jqGrid.min.js

完全引用后的页面像这样

1 %@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<JQGridMVCExamples.Models.OrdersJqGridModel>" %> 2 <%@ Import Namespace="Trirand.Web.Mvc"%> 3 <%@ Import Namespace="JQGridMVCExamples.Models"%> 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; 6 7 <html xmlns="; 8 <head id="Head1" runat="server"> 9 <title>Performance Linq</title>10 <script type="text/javascript" src=" <script type="text/javascript" src=" <script type="text/javascript" src=" <link rel="stylesheet" type="text/css" href=" <link rel="stylesheet" type="text/css" href=" </head>16 <body>17 <div>18 <%= Html.Trirand().JQGrid(Model.OrdersGrid, "JQGrid1") %>19 </div>20 <br /><br />21 <div>22 <% Html.RenderPartial("CodeTabs"); %>23 </div>24 25 </body>26 </html>

  有一次在jQuery UI的主页【】停留的时候,一个单词很快吸引了我的注意:【themeable】,这不就是“可变主题的”的意思吗?于是我进入到【】这里,发现了下图的这个地方,他们官网的人把主题的更换叫做“主题滚轮”(哈哈哈,翻译水平一般,信达雅也不知道满足了多少)。

bet9九州 2   

  第一个TAB页里说的是【滚出我们自己的主题样式】。打开下面各个分项后,可以自己定义自己需要的样式,定义好以后,点那个下载的按钮就可以下载自己定义好的一套主题样式了。这比自己动手去改CSS文件什么的方便多了。

  第二个TAB页打开后,就发现原来他们已经准备好了很多的主题。这对于我这样的懒人很合适,这么多的样式总有一个是我想要的。

bet9九州 3

  选中自己喜欢的样式,点击下载按钮,会自动转到下载页面,然后就能把自己想要的主题样式包给下载下来了。也可以在下载页面的【Theme】区的下拉框里选择自己需要的主题,我选择的是【Cupertino】。

bet9九州 4

 

  两个压缩包下载下来(注意:不同的主题样式,压缩包名称是一样的,保存时别覆盖了),解压以后就发现,不同的主题其实只有CSS文件夹中的内容不同,也就是主题包的资源不同(主题包资源包括图片和CSS文件)。其它的都是一样的,文件夹文件名都一样,甚至于文件里面的元素的命名都是一样的。

bet9九州 5

 

  在应用的项目工程中,只需要将主题包和【jquery-ui-1.8.4.custom.min.js】文件加入工程,就可以使用可变主题的jQuery UI了。如图:

本文由bet9九州发布于人才发展,转载请注明出处:bet9九州应用不同Theme的办法,学习笔记

关键词: