Div显示详细信息、拖动

ASP.NET会员管理系统
最新推荐文章于 2024-01-03 00:54:11 发布
原创 最新推荐文章于 2024-01-03 00:54:11 发布 · 604 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#div #textbox #asp #server #function #stylesheet

本文介绍了一个使用ASP.NET实现的会员管理系统，通过GridView展示会员详细信息并支持动态加载详情页面。系统具备显示会员基本信息、性别图标、操作按钮等功能，并集成了自定义JavaScript函数以增强用户体验。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MemberManager.aspx.cs" Inherits="member_MemberDetail" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <link href="../css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/Http.js"></script>
    <script type="text/javascript" src="../js/MyDragLibrary.js"></script>
    <script type="text/javascript">
       function ShowDetail(olinkButton,uid){
          var url = "MemberDetail.aspx?uid="+uid+"&catch="+new Date().getTime();
          var x = window.event.clientX+document.documentElement.scrollLeft;
          var y = window.event.clientY + document.documentElement.scrollTop;
          var fnCallBack=function(oResult)
          {
             var oDivResult = document.getElementById("divResult");
             var oDivContent = document.getElementById("divContent");
             if (oDivContent){
                oDivContent.innerHTML = oResult;
             }
             if (oDivResult){
                oDivResult.style.display="block";
                oDivResult.style.left = x;
                oDivResult.style.top = y;
                MyDragHandler.AttachDrag("divResult");
             }
          }
          var fnLoading=function(){
          //TODO:添加一个loading.gif
          }
          Http.get(url,fnCallBack,fnLoading,null);
       }
      
       function closeDiv(){
         var oDivResult = document.getElementById("divResult");
         if (oDivResult){
            oDivResult.style.display="none";
         }
       }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="gvMemberDetail" runat="server" BackColor="LightGoldenrodYellow"
                BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="odsGetAllMemberDetail"
                ForeColor="Black" CssClass="backStageManager" GridLines="None" AutoGenerateColumns="False">
                <FooterStyle BackColor="Tan" />
                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                <HeaderStyle BackColor="Tan" Font-Bold="True" />
                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                <Columns>
                    <asp:TemplateField HeaderText="会员编号">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("uid") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:LinkButton ID="lbtnMemberNo" OnClientClick='<%# Eval("uid", "ShowDetail(this,{0});return false") %>'
                                runat="server"><%# Eval("uid") %></asp:LinkButton>
                        </ItemTemplate>
                        <HeaderStyle BackColor="#80FFFF" />
                    </asp:TemplateField>
                    <asp:BoundField DataField="userName" HeaderText="会员名">
                        <HeaderStyle BackColor="#80FFFF" />
                    </asp:BoundField>
                    <asp:TemplateField HeaderText="性别">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("gender") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# ShowGenderImg(Eval("gender")) %>' />
                        </ItemTemplate>
                        <HeaderStyle BackColor="#80FFFF" />
                    </asp:TemplateField>
                    <asp:BoundField DataField="birth" DataFormatString="{0:d}" HeaderText="出生日期">
                        <HeaderStyle BackColor="#80FFFF" />
                    </asp:BoundField>
                    <asp:BoundField DataField="registTime" DataFormatString="{0:d}" HeaderText="注册时间">
                        <HeaderStyle BackColor="#80FFFF" />
                    </asp:BoundField>
                    <asp:TemplateField HeaderText="信息来源">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# GetInfoSource(Eval("infoSource_detail")) %>'></asp:Label>
                        </ItemTemplate>
                        <HeaderStyle BackColor="#80FFFF" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="操作">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:ImageButton ID="ibtnDelete" runat="server" ImageUrl="~/images/Delete.gif" OnClick="ibtnDelete_Click"
                                OnClientClick="return confirm('删除后将不可恢复，确认删除吗？');" CommandArgument='<%# Eval("uid") %>' />
                        </ItemTemplate>
                        <HeaderStyle BackColor="#80FFFF" />
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:ObjectDataSource ID="odsGetAllMemberDetail" runat="server" SelectMethod="GetAllMemberDetail"
                TypeName="BLL.MemberManager"></asp:ObjectDataSource>
            <br />
        </div>
        <div id="divResult" style="border-right: #003399 1px solid; border-top: #003399 1px solid;
            border-left: #003399 1px solid; border-bottom: #003399 1px solid; width: 408px;
            position: absolute; display: none; background-color: White">
            <div id="divTitle" style="width: 100%; height: 20px; text-align: right;">
                <span onclick="closeDiv()" style="width: 10px; height: 20px; cursor: pointer">
                    <img src="../images/closeWindow.gif" /></span>
            </div>
            <div id="divContent">
            </div>
        </div>
    </form>
</body>
</html>
鼠标移动到div上显示制定信息或者div（自适应显示位置）
10-11
鼠标移动到div上弹出div或者信息，并且自适应显示位置；每一步代码都有详细的解释；简单，通俗易懂
jquery实现拖拽调整Div大小
10-24
在本段文字中，主要讨论了如何使用jQuery插件来实现通过拖拽来调整网页中DIV元素的大小的功能。这是一个前端开发者在进行网页设计和界面交互时常常需要的功能。通过这种方式，用户可以更加直观地对页面布局进行调整...
css实现图片信息展示
weixin_30478619的博客
09-04 329
<style> .layui-fluid{padding: 15px;} .img-responsive{display: block;width: 100%;max-width: 100% ;height: auto;} .my-layui-btn {display: inline-block;height: 38px;line-heigh...
jQuery-div点击展示详细内容
Vivinia的博客
04-11 1272
目标效果： 点击带圆点的文字，会慢慢出现绿色框包含具体内容，再点击另一类的文字，会将之前的收起后再慢慢显示新内容。 1.新建项目，导入jQuery框架。 2.创建showDetail.html页面，编写信息。 showDetail页面： $(function () { $("span[t
439day（js，jQuery同案例对比）
orangecloudy的博客
12-16 371
《2018年12月16日 》【连续439天】 标题：js，jQuery同案例对比 ； 内容： 相同功能： &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &
记一个CSS样式实现思路（鼠标聚焦时完整内容，失焦时只显示部分）
ZMJ_QQ的博客
01-03 769
鼠标聚焦时完整内容，失焦时只显示部分。使用max-width,当鼠标悬浮时，设置max-width为一个足够大的数值。或者 鼠标聚焦时计算当前元素元整的宽度
基于jquery的div拖拽功能
泯灭于众生，高歌于孤夜！
08-22 611
展示效果如图： 可进行拖拽、删除，删除后div会回到上面的待拖拽区域 源码下载地址：点击这里 html代码如下： <!-- saved from url=(0045)http://www.jq22.com/demo/jquery-tdfz20160803/ --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title&
bootstrap拖动div_BootStrap modal实现拖拽功能
weixin_39605578的博客
12-22 571
bootstrap中有javascript插件modal也就是对话框，加入拖拽功能，具体内容如下在使用modal时首选需要引用js // 完成拖拽功能 // 完成Modal编辑Html代码BootStrap Modal显示Modal×Modal titleOne fine body…CloseSave changesvar $button = $('.btn-default'),$modal = ...
jQuery div拖拽排序
lchzh1225019998的博客
10-20 1234
jQuery div拖拽排序，拥有一个以上的div就可以实现拖拽排序功能
vue中实现拖动调整左右两侧div的宽度的示例代码
10-15
左侧和右侧div根据需求设定初始宽度，调整区则需要显示为可拖动的指针。我们还可以为调整区设置一个隐藏的背景图标，当鼠标悬停时显示出来。 ```css /*拖拽相关样式*/ /*包围div样式*/ .box { width: 100%; ...
vue中解决拖拽改变存在iframe的div大小时卡顿问题
10-15
在Vue开发过程中，拖拽...总结来说，解决Vue拖拽div卡顿的关键在于创建一个透明遮罩层，并在拖动过程中控制它的显示与隐藏。通过这样的优化，可以显著提高用户在拖拽调整iframe div大小时的体验，使得操作流畅无卡顿。
js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
10-27
本示例展示了一个完善的JS拖拽功能，不仅实现了元素的自由拖动，还添加了拖动轨迹回放以及实时显示拖动距离的功能。这对于提升用户体验和增强互动性具有很大的帮助。 首先，我们需要创建一个可拖动的元素，通常是一...
Div+CSS层完美实现拖拽特效
07-06
本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效，这种特效常用于创建弹出层或可拖动的对话框，提升用户体验。 首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其...
div遍历后端传递变量 添加字符串
weixin_43608796的博客
04-16 200
div遍历后端传递变量 添加字符串
div内容里面的标签显示_真正的零基础入门之Web网站前端篇 3-网页常用标签
weixin_39858132的博客
12-18 394
零基础入门课程，对互联网感兴趣的朋友，可以点下关注。每天15分钟，21天快速入门。适应人群：适合编程零基础的朋友，适合上班族、学生、创业者、自由职业者，想要进入并了解学习互联网的人群。下面进入正文吧。1.常用标签之div。它表示一个容器或者一个盒子，里面用来放置其他元素和标签。如下图所示。2.常用标签之span。它的功能和div很相似，span可以用来装一小段文字，和div的区别就是它里面的内容是...
html 列表中 内容长 点击详情 出一个div框显示详细内容
萝卜的专栏
03-25 7398
New Document 1 2 3 4 5 6 里面的div2 里面的div2里面的div2里面的div2里面的div2里面的div2里面的div2里面的div2里面的div2里面的di
BP神经网络+PID控制Simulink仿真
最新发布
11-26
提供了基于BP（Back Propagation）神经网络结合PID（比例-积分-微分）控制策略的Simulink仿真模型。该模型旨在实现对杨艺所著论文《基于S函数的BP神经网络PID控制器及Simulink仿真》中的理论进行实践验证。在Matlab 2016b环境下开发，经过测试，确保能够正常运行，适合学习和研究神经网络在控制系统中的应用。 特点 集成BP神经网络：模型中集成了BP神经网络用于提升PID控制器的性能，使之能更好地适应复杂控制环境。 PID控制优化：利用神经网络的自学习能力，对传统的PID控制算法进行了智能调整，提高控制精度和稳定性。 S函数应用：展示了如何在Simulink中通过S函数嵌入MATLAB代码，实现BP神经网络的定制化逻辑。 兼容性说明：虽然开发于Matlab 2016b，但理论上兼容后续版本，可能会需要调整少量配置以适配不同版本的Matlab。 使用指南 环境要求：确保你的电脑上安装有Matlab 2016b或更高版本。 模型加载： 下载本仓库到本地。 在Matlab中打开.slx文件。 运行仿真： 调整模型参数前，请先熟悉各模块功能和输入输出设置。 运行整个模型，观察控制效果。 参数调整： 用户可以自由调节神经网络的层数、节点数以及PID控制器的参数，探索不同的控制性能。 学习和修改： 通过阅读模型中的注释和查阅相关文献，加深对BP神经网络与PID控制结合的理解。 如需修改S函数内的MATLAB代码，建议有一定的MATLAB编程基础。
sketch_nov26a_anjian.zip
11-26
sketch_nov26a_anjian.zip
JS+CSS实现Div拖拽与隐藏显示炫酷效果
标题“Div 随便拖拽效果”涉及到的知识点主要集中在Web前端开发领域，特别是关于元素的拖拽功能实现，以及对DIV元素的拖拽和显示/隐藏控制。通过JavaScript和CSS的结合应用，开发者可以创建出既灵活又炫酷的用户界面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值