对于我们之前所讲述的例程,手下有一个默认的页面,其次有一个整文本读取的页面,还有一个按行读取的页面;

这三个页面在运行时,都需要调用母版页;

从default.aspx跳转到readAllText页面时,需要传递文件名,或者从default.aspx跳转到readAllLine页面时需要传递文件名,或者在readAllText和readAllLine之间跳转时,也要传递文件名;

文件名传递可以使用两种方式,QueryString和Session方式:

文本阅读编辑(页面的控制)


记住,调用任何一个页面时,我们都会调用母版页。

母版页结构:

SIDERBAR是我们调用母版页时必须要建立的文件列表:

因此我们在调用母版页过程中,都需要在SODERBAR中载入文件列表(LoadMenu);

文本阅读编辑(页面的控制)

文本阅读编辑(页面的控制)



建立一个良好的LoadBar:

读取全部和分行读取按钮实际为两个超链接。点击读取全部按钮,则跳转到ReadAllText页面;点击分行读取按钮,则跳转到

ReadAllLine页面;

首先我们把default页面的菜单做出来:

文本阅读编辑(页面的控制)

当遍历文件夹下的每一个文件时,要为每一个文件建立一个层,在层中添加label和超链接,添加完成后将构建完成后的层添加到

SIDERBAR当中,当所有文件插入完成后, SIDERBAR形成如下形式:

文本阅读编辑(页面的控制)

我们要用后台代码向div_right层当中插入内容,因此做如下改进:

首先向div_right层添加属性:runat="server";

文本阅读编辑(页面的控制)

然后进入母版页(.master)的后台代码编辑页面中:文本阅读编辑(页面的控制)

进入.master.cs文件中:

添加名称空间:

文本阅读编辑(页面的控制) 

构建的元素:

在foreach中完成四件事:

1、将文件夹中的文件名取出复制给label;

2、建立两个超链接;

3、将label和超链接全部放入panel层中;

4、将构建好的层插入到div_right中;

文本阅读编辑(页面的控制)


在PageLoad事件中动态创建:

文本阅读编辑(页面的控制)

文本阅读编辑(页面的控制)


运行页面,浏览一下菜单:

文本阅读编辑(页面的控制)

样式管理(Css):

定义div_right元素中的div元素:

文本阅读编辑(页面的控制)

接下来设置两个超链接:

div_right下div中

文本阅读编辑(页面的控制)


此时的运行效果图:

文本阅读编辑(页面的控制)


改进: 

文本阅读编辑(页面的控制)

定义鼠标移上去的样式:

补充:hover选择器:

文本阅读编辑(页面的控制) 

文本阅读编辑(页面的控制) 

文本阅读编辑(页面的控制)


文本阅读编辑(页面的控制)

运行效果:

文本阅读编辑(页面的控制)

改进:

文本阅读编辑(页面的控制)

运行效果:

文本阅读编辑(页面的控制)


页面优化:

该菜单页面的运行效果,因为超链接的按钮存在,导致并不美观,可以是当鼠标移动到文件名时,相应的超链接按钮才会出现,这种操作不能在服务器端完成,因为太过于消耗资源,可以在前端通过脚本代码的方式来完成:


Jquery的使用:

我们使用Jquery时,要将Jquery代码文件拖动到.master的head当中,如图所示:

文本阅读编辑(页面的控制)

接下来在JavaScript的标签快当中编写Jquery代码:

文本阅读编辑(页面的控制)

页面载入时添加侦听器,格式固定:

mouseover:当鼠标覆盖上去时

mouseout:当鼠标移走时

文本阅读编辑(页面的控制)

运行出现问题;

此时第一次进入页面时,超链接按钮依然存在:

文本阅读编辑(页面的控制)

当将鼠标移上去在离开后,按钮消失了:

文本阅读编辑(页面的控制)

我们期望的结果时,载入时,按钮就不在,当鼠标移动过去时,按钮出现,当鼠标离开时,按钮又消失;

改进,可以在Css控制中进行更改:

文本阅读编辑(页面的控制)

运行,成功!


接下来,添加剩下的两个页面:

添加读取整行的页面:

文本阅读编辑(页面的控制)

文本阅读编辑(页面的控制)

添加读取整个文本的页面:

文本阅读编辑(页面的控制)


接下来,更改之前添加的超链接的地址指向:

含参数;

文本阅读编辑(页面的控制)

运行页面,要注意页面的地址变化:

文本阅读编辑(页面的控制)

点击txt333444.txt的分行读取超链接,注意观察页面地址的变化:

文本阅读编辑(页面的控制)

在这个页面下跳转到single.txt的读取全部,也成立:

文本阅读编辑(页面的控制)

 




相关文章:

  • 2022-12-23
  • 2021-08-15
  • 2022-02-21
  • 2022-12-23
  • 2021-10-15
  • 2021-06-15
  • 2021-10-03
  • 2021-05-14
猜你喜欢
  • 2021-06-27
  • 2021-05-31
  • 2021-09-25
  • 2021-04-10
  • 2022-12-23
  • 2021-05-29
  • 2022-12-23
相关资源
相似解决方案