从ITOO的2.0 中期开始,勇霞师姐让我尝试着参照Java版的代码将.net的窗体实现类似百度的搜索界面,说起来并不难,今天我来将这个小功能分享给大家:
这个功能主要有两部分:
1.窗体加载时简单大方的界面:
2.点击“查询”后窗体的正常显示:
下面是具体代码:
首先是html代码:
<span style="font-size:18px;"> <a href="#" class="easyui-linkbutton c6" iconCls="icon-reload" style="width: 2%; margin: 0 5px; float: left;" onClick="SwitchToggole()" ></a>
</span>
[ 使用该代码添加一个按钮,也就是添加按钮左侧的效果切换按钮。]
然后是js代码:
<span style="font-size:18px;">//视图转换的功能方法:搜索框居中或者表格居中
//先使用函数加载窗体的数据,<strong><span style="color:#ff0000;">这句代码必须有</span></strong>
$(function () {
var switchFlag = 0;
DataGridCenter();
SearchBoxCenter();
})
//视图转换的方法
function SwitchToggole() {
if (switchFlag == 0) {
SearchBoxCenter();
} else {
DataGridCenter();
}
}
----------------------------搜索框居中的方法--------------------------------
//$("#search_box").click(function () {
function SearchBoxCenter() {
$("#upload").css('display', 'none');
$("#ContentAreas").css('display', 'none') //实现内容区域的隐藏
$("#tips").css('display', 'none');
$("#a").css({ //搜索框和按钮的外层div
"display": "block",
"position": "relative",
"left": "55%",
"top": "240px",
"height": "25px",
"font-size": "16px",
"width": "400px"
});
$("#footer").css({ //脚注的设置
"font-size":"16px",
"display":"block",
"margin-left": "45%",
"margin-top":"25%",
"margin-bottom":"120px"
});
switchFlag = 1; //执行完之后,将switchFlag的值设置为1,值的变化实现效果的切换
};
------------------------表格居中的方法-------------------------------
function DataGridCenter() {
$("#ContentAreas").css('display', 'block');
$("#upload").css('display', 'block');
$("#tips").css('display', 'block'); // 隐藏“请选择实体”和下拉框
//搜索框区域的样式
$("#a").removeAttr("style"); //移除该div的样式,重新设定
$("#a").css({
"display": "block",
"position":"fixed",
"top":"30px",
"left": "260px",
"width":"400px",
"margin-bottom":"5px"
});
$("#footer").css('display', 'none');
//执行完之后将数值转化为0
switchFlag = 0;
};</span>
这个功能主要是在css的基础上,对按钮的数值进行分析变换,实现效果的切换。
PS:
之前的实现过程中,出现过这样的问题:
界面中部分div为0,但在VS中是确切的值。这个问题出现的原因是:在实现第一幅图的界面时,窗体中表格的属性均为隐鲹,所以窗体没有加载出DataGrid的样式。所以在js代码中添加:
在加载时,先调用DataGridCenter()的方法将所有的样式都加载出来,但加载不代表显示给用户看,只是程序内部执行该方法,然后再调用SearchBoxCenter()方法,这样就可以将关于表格的所有样式都加载出来,只是不显示,而不会出现样式数据加载不出来的问题。
到这里,这个功能就实现了,有什么问题,欢迎指点。