//var resizeTimer = null;
//防止window.resize重复
//var resetStyle = function () {
// if (resizeTimer) clearTimeout(resizeTimer);
// resizeTimer = setTimeout("pagestyle()", 300);
//}
///设置遮盖层的高度
//var pagestyle = function () {
// var bH = $(document).height();
// var bW = $(document).width();
// $("div_overlay").css({ width: bW, height: bH });
//}
function NumObj() {
NumObj.Add();
}
NumObj.Add = function () {
NumObj.id++;
NumObj.index = NumObj.index + 2;
}
NumObj.id = 1;
NumObj.index = 998;
///显示弹出层
function Show(content, options) {
var defaults = {
title: '标题', // 标题文本,若不想显示title请通过CSS设置其display为none
width: '400px',
height: '280px'
};
NumObj();
var id_div_overlay;
var id_div_drag;
id_div_overlay = "div_overlay_" + NumObj.id;
id_div_drag = "div_drag_" + NumObj.id;
id_close = "close_" + NumObj.id;
var options = $.extend(defaults, options);
var div_overlay = $("<div class=\"div_overlay\" id=\"" + id_div_overlay + "\"> </div>");
div_overlay.css("z-index", NumObj.index);
$("body").prepend(div_overlay);
var div_drag = $("<div class=\"div_drag\" id=\"" + id_div_drag + "\"></div>");
var div_bar = $("<div class=\"bar\"><span class=\"title\">" + options.title + "</span> <a id=\"" + id_close + "\" class=\"close\" >[关闭]</a> </div>");
var div_content = $("<div class=\"content\"></div>");
div_drag.append(div_bar).append(div_content);
div_content.html(content);
div_drag.css({ "height": options.height, "width": options.width, "z-index": NumObj.index + 1 });
$("body").prepend(div_drag);
$(".content").height($("#" + id_div_drag).height() - $(".bar").height());
var bH = $(document).height();
var bW = $(document).width();
$("#" + id_div_drag).css("left", (($(document).width()) / 2 - (parseInt($("#" + id_div_drag).width()) / 2)) + "px")
.css("top", (($(document).height()) / 2 - (parseInt($("#" + id_div_drag).height()) / 2)) + "px");
$("#" + id_close).bind("click", function () {
$("#" +id_div_overlay).remove();
$("#" + id_div_drag).remove();
});
//移动事件
div_bar.mousedown(function (e)//e鼠标事件
{
$(this).css("cursor", "move"); //改变鼠标指针的形状
var offset = $(this).offset(); //DIV在页面的位置
var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove", function (ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件
{
$("#" + id_div_drag).stop(); //加上这个之后
var _x = ev.pageX - x; //获得X轴方向移动的值
var _y = ev.pageY - y; //获得Y轴方向移动的值
$("#" + id_div_drag).animate({ left: _x + "px", top: _y + "px" }, 10);
});
});
$(document).mouseup(function () {
$(".bar").css("cursor", "default");
$(this).unbind("mousemove");
})
///
}
@{
ViewBag.Title = "Grid";
}
@section Head{
<script type="text/javascript" src="@Url.Content("~/Scripts/myMsgBox.js")"></script>
<style type="text/css">
.table
{
border-collapse: collapse;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
font-size: 13px;
height: 24px;
line-height: 24px;
color: #000;
text-align: center;
}
.table tr th
{
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
font-size: 13px;
height: 24px;
line-height: 24px;
}
.table tr td
{
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
body, html
{
font-family: Calibri;
font-size: 12px;
line-height: 18px;
}
.div_drag
{
background-color: #F0FBEB;
border: 1px solid #9BDF70;
display: block;
position: absolute;
}
.bar
{
background: none repeat scroll 0 0 #9BDF70;
color: #FFFFFF;
cursor: move;
height: 30px;
width: 100%;
}
.div_overlay
{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #f5f5f5;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.bar .title
{
float: left;
}
.bar A
{
cursor: pointer;
text-decoration: none;
float: right;
}
.content
{
width: 100%;
overflow:auto;
background: none repeat scroll 0 0 #FFFFFF;
}
</style>
<script type="text/javascript" src="../../Scripts/jquery-1.7.2.js"></script>
}
@model MvcApplication.Models.PageTableModels
<h2>@ViewBag.Date_Time</h2>
@{
string html_Table = "<Table class=\"table\" width=\"100%\"cellspacing= 1 align=\"center\">";
html_Table += "<tr><th>测试1</th><th>测试2</th><th>测试3</th></tr>";
foreach (System.Data.DataRow row in Model.dataTable.Rows)
{
html_Table += "<tr><td>" + row[0] + "</td><td>" + row[1] + "</td><td>" + row[2] + "</td></tr>";
}
html_Table += "</Table>";
}
<div>@Html.Raw(html_Table)</div>
@Html.ActionLink("首页", "Grid", new { id = 1 })
@Html.ActionLink("下页", "Grid", new { id = Model.PageIndex + 1 < Model.PageCount ? Model.PageIndex + 1 : Model.PageCount })
@Html.ActionLink("上页", "Grid", new { id = Model.PageIndex - 1 > 1 ? Model.PageIndex - 1 : 1 })
@Html.ActionLink("末页", "Grid", new { id = Model.PageCount })
<input id="Button1" type="button" value="button" />
<select id="Select1">
<option >测试1</option>
<option >测试2</option>
<option >测试3</option>
</select>
@section Script
{
<script type="text/javascript">
function Test() {
Show(" <table><tr> <td> 测试1 </td> <td> <input id=\"txt_1\" type=\"text\" /></td> </tr> <tr> <td> 测试2 </td> <td> <input id=\"txt_2\" type=\"text\" /> </td></tr><tr> <td> 测试1 </td> <td> <input id=\"txt_1\" type=\"text\" /> </td> </tr><tr><td> 测试3 </td> <td> <input id=\"btn_Test\" value=\"弹出\" type=\"button\" onclick=\"Test();\" /> </td></tr> </table>", { title: '测试标题' });
}
// <input id="Button1" type="button" value="button" onclick="Test();" />
$(function () {
$("#Button1").click(function () {
Show(" <table><tr> <td> 测试1 </td> <td> <input id=\"txt_1\" type=\"text\" /></td> </tr> <tr> <td> 测试2 </td> <td> <input id=\"txt_2\" type=\"text\" /> </td></tr><tr> <td> 测试1 </td> <td> <input id=\"txt_1\" type=\"text\" /> </td> </tr><tr><td> 测试3 </td> <td> <input id=\"btn_Test\" type=\"button\" value=\"弹出\" onclick=\"Test();\" /> </td></tr> </table>", { title: '测试标题' });
});
})
</script>
}