设置ToolTip的DIV的显示的效果
2017-05-10 15:11:21 访问(2587) 赞(0) 踩(0)
-
<script type="text/javascript" >
// 当前全局的ID //
var curDataGuid = "";
// 找到ToolTip对应的Item //
function FindToolTipDivHtml(pkId)
{
var eA = EPI.ZnbmItemHtmlArray;
if (eA == null)
return null;
var iLen = eA.length;
var i = 0;
for(i = 0;i<iLen;++i)
{
if (eA[i].PkId == pkId)
return eA[i];
}
return null;
}
// 设置ToolTip对应的Item //
function SetToolTipDivHtmlToArray(pkId,theHtml) {
var item = FindToolTipDivHtml(pkId);
if (item != null) {
item.TheHtml = theHtml;
return;
}
if (EPI.ZnbmItemHtmlArray == null) {
EPI.ZnbmItemHtmlArray = new Array();
}
item = new ZnbmItemHtml();
item.PkId = pkId;
item.TheHtml = theHtml;
EPI.ZnbmItemHtmlArray.push(item);
}
function SetToolTipDivHtml(pkId)
{
// 设置ToolTipDiv的HTML //
if (curDataGuid == pkId)
return;
curDataGuid = pkId;
// 缓存中有数据 //
var item = FindToolTipDivHtml(pkId);
if (item != null)
{
$("#ToolTipDivMain").html(item.TheHtml);
return;
}
var ajaxUrl = "ToolTipDivShow";
// 获得搜索的数据 //
var ajxData = [];
ajxData.push({ name: "_id", value: curDataGuid });
$.ajax({
cache: false,
async: true,
url: ajaxUrl,
type: "post",
data: ajxData,
success: function (rData) {
if (rData == null)
return;
var showHtml = "";
if (rData.IsSucc) {
showHtml = rData.Html;
}
else
{
showHtml = "";
}
SetToolTipDivHtmlToArray(rData.PkId, showHtml);
if (rData.PkId != curDataGuid)
return;
$("#ToolTipDivMain").html(showHtml);
}
});
}
function AfterTableList(rData)
{
$("td[dcname='thename']").hover(function () {
// 获得tr //
var curTr = $(this).parent("tr");
if (curTr == null || curTr == undefined)
return;
// 获得对应的id //
var theId = curTr.attr("data-guid");
if (theId == null || theId == "" || theId == undefined)
return;
SetToolTipDivHtml(theId);
// 如果找到span //
// 用span的位置 //
var cityObj = $(this).find("span");
if (cityObj == null || cityObj == undefined)
{
cityObj = $(this).find("a");
}
if (cityObj == null || cityObj == undefined) {
cityObj = $(this);
}
var cityOffset = $(cityObj).offset();
if (cityOffset == null || cityOffset == undefined)
{
var cityOffset = $(this).offset();
}
$("#ToolTipDiv").css({ left: cityOffset.left + cityObj.outerWidth() + "px", top: cityOffset.top + "px" }).fadeIn(500);
}, function () {
// $("body").app
$("#ToolTipDiv").hover(function () {
$("#ToolTipDiv").show();
}, function () {
$('#ToolTipDiv').delay(1).fadeOut(100);
});
//$('#ToolTipDiv').delay(1).fadeOut(100);
});
$("#close").on("click", function () {
$("#ToolTipDiv").delay(1).fadeOut(100);
});
}
</script>
-
<!--tooltip扩展css-->
<style type="text/css">
.ToolTipDiv {
width: 370px;
height: 180px;
background: rgba(0,0,0,0.6);
display: none;
position: absolute;
}
.close {
right: 0;
top: 0;
width: 18px;
height: 18px;
background: rgba(255,0,0,0.5);
text-align: center;
z-index: 999;
position: absolute;
cursor: pointer;
}
.close_icon {
color: #fff;
font-size: 13px;
font-weight: bold;
}
.tooltip_left {
width: 120px;
height: 180px;
background: rgba(0,0,0,0.4);
float: left;
}
.tooltip_right {
width: 250px;
height: 180px;
background: rgba(0,0,0,0.2);
float: right;
}
.tooltipInfo {
width: 120px;
height: 80px;
top: 0;
text-align: center;
}
.img {
width: 100px;
height: 65px;
margin-top: 10px;
}
.infoDiv {
width: 100px;
height: 100px;
bottom: 0;
}
.tbl_tooltipInfo {
width: 120px;
height: 100px;
bottom: 0;
}
.infoItem {
font-size: 12px;
font-family: 'Microsoft YaHei';
color: #ddd;
padding-left: 8px;
}
.infoValue {
font-size: 12px;
font-family: 'Microsoft YaHei';
color: #ddd;
}
.tbr_tooltipInfo {
width: 250px;
height: 180px;
}
.item {
width: 80px;
}
.look_detail {
font-size: 12px;
font-family: 'Microsoft YaHei';
color: rgb(7,200,111);
}
</style>
-
<!-- tooltip扩展 -->
<div id="ToolTipDiv" class="ToolTipDiv">
<div id="close" class="close">
<span class="close_icon">×</span>
</div>
<div id="ToolTipDivMain">
</div>
</div>
<!-- tooltip扩展End -->
-
/// <summary>
/// 加载内容
/// </summary>
/// <param name="xdbHelper"></param>
/// <returns></returns>
protected ToolTipDivShowResult
ToolTipDivShowOper(DBHelper xdbHelper)
{
// string strHtml = @"
// <div id=""tooltip_left"" class=""tooltip_left"">
// <div id=""imgDiv"" class=""tooltipInfo"">
// <img src=""" + strPhyPath + @"/Content/icon/ydc.jpg"" class=""img"" />
// </div>
// <div id=""infoDiv"" class=""infoDiv"">
// <table id=""tb_info"" class=""tbl_tooltipInfo"">
// <tr>
// <td>
// <span class=""infoItem"">车牌：</span>
// </td>
// <td>
// <span class=""infoValue"">C 70562</span>
// </td>
// </tr>
// <tr>
// <td>
// <span class=""infoItem"">部门：</span>
// </td>
// <td>
// <span class=""infoValue"">设备部</span>
// </td>
// </tr>
// <tr>
// <td>
// <span class=""infoItem"">类型：</span>
// </td>
// <td>
// <span class=""infoValue"">引导车</span>
// </td>
// </tr>
// </table>
// </div>
// </div>
// <div id=""tooltip_right"" class=""tooltip_right"">
// <table id=""tb_detailInfo"" class=""tbr_tooltipInfo"">
// <tr>
// <td class=""item"">
// <span class=""infoItem"">加油时间：</span>
// </td>
// <td>
// <span class=""infoValue"">2017-04-21 10:20</span>
// </td>
// </tr>
// <tr>
// <td>
// <span class=""infoItem"">加油地点：</span>
// </td>
// <td>
// <span class=""infoValue"">第六加油站</span>
// </td>
// </tr>
// <tr>
// <td>
// <span class=""infoItem"">燃油油类：</span>
// </td>
// <td>
// <span class=""infoValue"">0#国V 柴油</span>
// </td>
// </tr>
// <tr>
// <td>
// <span class=""infoItem"">加油卡号：</span>
// </td>
// <td>
// <span class=""infoValue"">70001203</span>
// </td>
// </tr>
// <tr>
// <td>
// <span class=""infoItem"">客户信息：</span>
// </td>
// <td>
// <span class=""infoValue"">机务工程部(内场) - E0006</span>
// </td>
// </tr>
// <tr>
// <td>
// <span class=""infoItem"">加油明细：</span>
// </td>
// <td>
// <span class=""infoValue"">(加油量)50升 (总价)400元</span>
// </td>
// </tr>
// <tr>
// <td>
// <span class=""infoItem"">资产信息：</span>
// </td>
// <td>
// <a href=""#"" class=""look_detail"">查看详情</a>
// </td>
// </tr>
// </table>
// </div>
//";
// 逻辑方法 //
eKing.SzdfPage.Helpers.eKingSzdfPageHelper
wh
=
eKing.SzdfPage.Helpers.eKingSzdfPageHelper.ekInstance;
ToolTipDivShowResult theResult = new ToolTipDivShowResult();
// 通过http获得参数 //
HttpContextName hcn = HttpContextName.instance;
// 获得关键字 //
string strId = Request.Form[hcn._id];
if (strId == null || strId.Length == 0)
{
theResult.IsSucc = false;
theResult.Msg = "没有获得关键字";
return theResult;
}
theResult.PkId = strId;
bool bIsCreate = true;
if (xdbHelper == null)
{
xdbHelper
=
SlowX.DAL.Helpers.DBHelper.CreateDBHelper();
}
else
{
// 没有打开链接 //
bIsCreate = xdbHelper.IsNotOpen();
}
try
{
if (bIsCreate)
xdbHelper.OpenDBHelper();
eKing.SzdfLib.Model.VGAS.UTB_SZDF_VGAS_ITEM
modelVgas
=
wh.VgasItemModelGetByStrId(strId, xdbHelper);
if(modelVgas == null)
{
if (bIsCreate)
xdbHelper.EndDBHelper();
theResult.IsSucc = false;
theResult.Msg = "没有获得燃油实体";
return theResult;
}
// 业务操作逻辑 //
eKing.SzdfLib.Business.VZC.UTB_SZDF_VZC_ITEM
bll
=
eKing.SzdfLib.Business.VZC.UTB_SZDF_VZC_ITEM.instance;
// 数据表查询逻辑条件 //
eKing.SzdfLib.Entity.VZC.UTB_SZDF_VZC_ITEM
entity
=
new eKing.SzdfLib.Entity.VZC.UTB_SZDF_VZC_ITEM();
// 查询相关的接口方法 //
IQueryDriver iq = entity;
iq.AddIQueryItemWithEntityFieldInfo
(
entity._ID,
modelVgas.ZC_Id
);
// 获得对应的一条记录的实体值 //
eKing.SzdfLib.Model.VZC.UTB_SZDF_VZC_ITEM
model
=
bll.GetBaseModel(entity, xdbHelper)
as
eKing.SzdfLib.Model.VZC.UTB_SZDF_VZC_ITEM;
if(model == null)
{
if (bIsCreate)
xdbHelper.EndDBHelper();
theResult.IsSucc = false;
theResult.Msg = "没有获得资产实体";
return theResult;
}
string strHtml = @"
<div id=""tooltip_left"" class=""tooltip_left"">
<div id=""imgDiv"" class=""tooltipInfo"">
<img src=""" + strPhyPath + @"/Content/icon/ydc.jpg"" class=""img"" />
</div>
<div id=""infoDiv"" class=""infoDiv"">
<table id=""tb_info"" class=""tbl_tooltipInfo"">
<tr>
<td>
<span class=""infoItem"">车牌：</span>
</td>
<td>
<span class=""infoValue"">" + model.PlateNumber + @"</span>
</td>
</tr>
<tr>
<td>
<span class=""infoItem"">部门：</span>
</td>
<td>
<span class=""infoValue"">" + model.UseDep_Id__GetText(null,true,"",xdbHelper) + @"</span>
</td>
</tr>
<tr>
<td>
<span class=""infoItem"">类型：</span>
</td>
<td>
<span class=""infoValue"">"+model.VehType_Id__GetText(null,true,"",xdbHelper)+@"</span>
</td>
</tr>
</table>
</div>
</div>
<div id=""tooltip_right"" class=""tooltip_right"">
<table id=""tb_detailInfo"" class=""tbr_tooltipInfo"">
<tr>
<td class=""item"">
<span class=""infoItem"">加油时间：</span>
</td>
<td>
<span class=""infoValue"">"+modelVgas.Refuel_Time.ToString("yyyy-MM-dd HH:mm:ss")+ @"</span>
</td>
</tr>
<tr>
<td>
<span class=""infoItem"">加油地点：</span>
</td>
<td>
<span class=""infoValue"">" + modelVgas.Station_Id__GetText(null, true, "", xdbHelper) + @"</span>
</td>
</tr>
<tr>
<td>
<span class=""infoItem"">燃油油类：</span>
</td>
<td>
<span class=""infoValue"">" + modelVgas.OilType_Id__GetText(null, true, "", xdbHelper) + @"</span>
</td>
</tr>
<tr>
<td>
<span class=""infoItem"">加油卡号：</span>
</td>
<td>
<span class=""infoValue"">70001203</span>
</td>
</tr>
<tr>
<td>
<span class=""infoItem"">客户信息：</span>
</td>
<td>
<span class=""infoValue"">机务工程部(内场) - E0006</span>
</td>
</tr>
<tr>
<td>
<span class=""infoItem"">加油明细：</span>
</td>
<td>
<span class=""infoValue"">(加油量)50升 (总价)400元</span>
</td>
</tr>
<tr>
<td>
<span class=""infoItem"">资产信息：</span>
</td>
<td>
<a href=""#"" class=""look_detail"">查看详情</a>
</td>
</tr>
</table>
</div>
";
theResult.IsSucc = true;
theResult.Html = strHtml;
if (bIsCreate)
xdbHelper.EndDBHelper();
}
catch (Exception err)
{
if (bIsCreate)
xdbHelper.TranDBHelper();
// throw err;
theResult.IsSucc = false;
theResult.Msg = err.Message;
}
finally
{
if (bIsCreate)
xdbHelper.FinallyDBHelper();
}
return theResult;
}
/// <summary>
/// 加载
/// </summary>
/// <returns></returns>
public ActionResult ToolTipDivShow()
{
ToolTipDivShowResult opResult = null;
try
{
opResult = ToolTipDivShowOper(null);
}
catch (Exception err)
{
opResult = new ToolTipDivShowResult();
opResult.IsSucc = false;
opResult.Msg = err.Message;
}
ContentResult theResult = new ContentResult();
theResult.ContentEncoding = UTF8Encoding.UTF8;
// 返回Json格式 //
theResult.ContentType = MIMETypes.Json;
// Json内容 //
// 比如：//
// {"ItemList":[{"TheName":"txtd_TheName","TheValue":"eKing"},{"TheName":"txtd_TheCode","TheValue":"SZDF"}]} //
theResult.Content = opResult.ToJson();
return theResult;
}
标签：
设置ToolTip的DIV的显示的效果 
上一条：
下一条：
相关评论
发表评论