设置ToolTip的DIV的显示的效果

2017-05-10 15:11:21  访问(2591) 赞(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的显示的效果 

上一条：

下一条：


 

相关评论

评论加载中……
 

发表评论

类型：
内容：
  (Alt+Enter)
 
  ┈全部┈  
 
（显示默认分类）