Asp.net 2.0中Themes的使用简单介绍

2.0中的Themes的加入,极大的方便了皮肤样式的更换~
下面简单介绍下皮肤的使用:

添加新项--》外观文件--》名字(建议一个控键建立一个皮肤文件)

比如:TextBox.skin

内容:
  1. <asp:TextBox runat="server" CssClass="TextBoxStyle" />

  StyleSheet.css文件:

  1. /*
  2. TextBoxStyle
  3. */
  4. .TextBoxStyle
  5. {
  6.      border1px solid #808080
  7.      font-family: Geneva, ArialHelveticasans-serif
  8.      font-size12px;
  9.      color:#333333;
  10.  }  
页面中只需要在Page指令中加入Theme属性指向定义的皮肤文件:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" Theme="DataWebControls" %>

并在head标签中引入
<link type="text/css" href="StyleSheet.css" rel="stylesheet" />

页面中的所有TextBox控件就会有我们上面定义的样式~并不需要其他定义~

更神气的是:控件中的所有属性都可以在皮肤文件中定义,从而给我们开发带来了很大的便捷

如:

  1. <asp:Gridview runat="server" CssClass="DataWebControlStyle" AllowPaging="true" PageSize="10" >
  2.    <AlternatingRowStyle CssClass="AlternatingRowStyle" />
  3.    <RowStyle CssClass="RowStyle" />
  4.    <HeaderStyle CssClass="HeaderStyle" />  
  5.    
  6.    <SelectedRowStyle CssClass="SelectedRowStyle" />
  7.     
  8.     <FooterStyle CssClass="FooterStyle"/>
  9.     
  10.     <PagerStyle CssClass="PagerRowStyle" />
  11.    <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
  12.    
  13. </asp:Gridview>
上面设置了页面中所有GridView的分页属性和 页中显示的数据条数

很简单 很方便~


      
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 ASP.NET MVC 显示弹出框,可以使用 JavaScript 库或插件。以下是一些可供选择的示例: 1.使用 jQuery UI 对话框: 在 View 引用 jQuery UI 库和样式文件: ``` <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> ``` 然后在 JavaScript 文件添加以下代码: ``` $(function() { $( "#dialog" ).dialog({ autoOpen: false, modal: true }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); ``` 在 HTML 添加一个按钮,当点击时打开对话框: ``` <button id="opener">Show Dialog</button> <div id="dialog" title="Dialog Title"> <p>Dialog content goes here.</p> </div> ``` 2.使用 Bootstrap 模态框: 在 View 引用 Bootstrap 库和样式文件: ``` <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ``` 然后在 HTML 添加以下代码: ``` <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> <p>Modal content goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> ``` 当按钮被点击时,模态框会弹出显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值