地服系统列表：ToolTip效果的实现

2017-06-05 17:00:33 访问(1836) 赞(0) 踩(0)

实现效果：

如果刷代码实现的话，需要设置几个属性：

1、设置TableAttribute

// ZNBM\eKing.SzdfLib\TableAttribute\VGAS\UTB_SZDF_VGAS_ITEM__Page.cs


            // 自定义扩展CSS样式 //
            this.EmSelectFlagFillCss = SlowX.Core.Enums.SelectFlag.EmSelectFlag.是;

            // 自定义扩展JS //
            this.EmSelectFlagFillJs = SlowX.Core.Enums.SelectFlag.EmSelectFlag.是;

            // 是否显示ToolTip的浮层 //
            this.EmSelectFlagFillToolTipDiv = SlowX.Core.Enums.SelectFlag.EmSelectFlag.是;

2、设置EkSzdfTable

// ZNBM\eKing.SzdfPage\Areas\ZnbmOil\VGAS\VgasItem\EkSzdfTable__Page.cs

            // 填充关键字的值 //
            // 则在tr上面有属性 data-guid="{pk}"
            this.IsFillPkValue = true;


            // 名称 //
            ekx = _TheName;

            // 填充显示字段 //
            ekx.EmSelectFlagFillDC
                = 
                EkPageCreate.Enums.SelectFlag.EmSelectFlag.是;

            ekx.EmShowLogicV
                = 
                EkPageCreate.Enums.ShowLogic.EmShowLogic.主显查看;

3、定义css

// Website\Management\Content\css\Areas\ZnbmOil\VGAS\VgasItem\index.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);
}

4、定义js

// Management\Content\backstage\Areas\ZnbmOil\VGAS\VgasItem\index.js

function JsSetEPI() {
    // 扩展设置EPI的属性 //
    // EPI.PageSize = 10;

    // 是否扩展表格绑定后的方法 //
    // 自定义浮层需要 //
    EPI.IsOverrideAfterTableList = true;
}



function SetToolTipDivHtml(pkId) {
    // 设置ToolTipDiv的HTML //
    if (EPI.CurSelectedId == pkId)
        return;

    EPI.CurSelectedId = pkId;

    // 缓存中有数据 //
    var item = FindToolTipDivHtml(pkId);
    if (item != null) {
        $("#ToolTipDivMain").html(item.TheHtml);
        return;
    }

    var ajaxUrl = "ToolTipDivShow";
    // 获得搜索的数据 //
    var ajxData = [];

    ajxData.push({ name: "_id", value: EPI.CurSelectedId });

    $.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 != EPI.CurSelectedId)
                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").last();

        if (cityObj == null || cityObj == undefined) {
            cityObj = $(this).find("a").last();
        }

        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 () {

        $("#ToolTipDiv").hover(function () {
            // 显示 //
            $("#ToolTipDiv").show();
        }, function () {
            // 延迟消失 //
            $('#ToolTipDiv').delay(1).fadeOut(100);
        });
    });

    $("#close").on("click", function () {
        // 延迟消失 //
        $("#ToolTipDiv").delay(1).fadeOut(100);
    });
}

5、控制器cs代码

// Management\Areas\ZnbmOil\Controllers\VGAS\VgasItem\VgasItemController__Logic.cs

        #region 实现ToolTip的DIV显示

        /// <summary>
        /// 加载内容
        /// </summary>
        /// <param name="xdbHelper">数据库链接串</param>
        /// <returns></returns>
        protected ToolTipDivShowResult
            ToolTipDivShowOper(DBHelper xdbHelper)

        {
            // 逻辑方法 //
            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/qyc.png"" class=""img"" />
            </div>
            <div id=""infoDiv"" class=""infoDiv"">
                <table id=""tb_info"" class=""tbl_tooltipInfo"">
                    <tr>
                        <td style=""white-space: nowrap;"">
                            <span class=""infoItem"">车牌：</span>
                        </td>
                        <td>
                            <span class=""infoValue"">" + model.PlateNumber + @"</span>
                        </td>
                    </tr>
                    <tr>
                        <td style=""white-space: nowrap;"">
                            <span class=""infoItem"">部门：</span>
                        </td>
                        <td>
                            <span class=""infoValue"">" + model.UseDep_Id__GetText(null,true,"",xdbHelper) + @"</span>
                        </td>
                    </tr>
                    <tr>
                        <td style=""white-space: nowrap;"">
                            <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"">"+modelVgas.OilCardNumber+@"</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class=""infoItem"">客户信息：</span>
                    </td>
                    <td>
                        <span class=""infoValue"">"+modelVgas.CustomName+ @"</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class=""infoItem"">加油明细：</span>
                    </td>
                    <td>
                        <span class=""infoValue"">" + modelVgas.ShowJYMX() + @"</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;
        }

        #endregion 实现ToolTip的DIV显示

6、Index.cshtml 的tooltip扩展代码

Management\Areas\ZnbmJygl\Views\JyglHyitem\Index.cshtml



<!-- 添加ToolTip扩展的html -->
<!-- tooltip扩展 -->
<div id="ToolTipDiv" class="ToolTipDiv">
    <div id="close" class="close">
        <span class="close_icon">×</span>
    </div>
    <div id="ToolTipDivMain">
    </div>
</div>
<!-- tooltip扩展End -->

// Management\Areas\ZnbmOil\Controllers\VGAS\VgasItem\VgasItemController__Logic.cs

        #region 实现ToolTip的DIV显示

        /// <summary>
        /// 加载内容
        /// </summary>
        /// <param name="xdbHelper">数据库链接串</param>
        /// <returns></returns>
        protected ToolTipDivShowResult
            ToolTipDivShowOper(DBHelper xdbHelper)

        {
            // 逻辑方法 //
            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/qyc.png"" class=""img"" />
            </div>
            <div id=""infoDiv"" class=""infoDiv"">
                <table id=""tb_info"" class=""tbl_tooltipInfo"">
                    <tr>
                        <td style=""white-space: nowrap;"">
                            <span class=""infoItem"">车牌：</span>
                        </td>
                        <td>
                            <span class=""infoValue"">" + model.PlateNumber + @"</span>
                        </td>
                    </tr>
                    <tr>
                        <td style=""white-space: nowrap;"">
                            <span class=""infoItem"">部门：</span>
                        </td>
                        <td>
                            <span class=""infoValue"">" + model.UseDep_Id__GetText(null,true,"",xdbHelper) + @"</span>
                        </td>
                    </tr>
                    <tr>
                        <td style=""white-space: nowrap;"">
                            <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"">"+modelVgas.OilCardNumber+@"</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class=""infoItem"">客户信息：</span>
                    </td>
                    <td>
                        <span class=""infoValue"">"+modelVgas.CustomName+ @"</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class=""infoItem"">加油明细：</span>
                    </td>
                    <td>
                        <span class=""infoValue"">" + modelVgas.ShowJYMX() + @"</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;
        }

        #endregion 实现ToolTip的DIV显示

// Management\Content\backstage\Areas\ZnbmOil\VGAS\VgasItem\index.js

function JsSetEPI() {
    // 扩展设置EPI的属性 //
    // EPI.PageSize = 10;

    // 是否扩展表格绑定后的方法 //
    // 自定义浮层需要 //
    EPI.IsOverrideAfterTableList = true;
}



function SetToolTipDivHtml(pkId) {
    // 设置ToolTipDiv的HTML //
    if (EPI.CurSelectedId == pkId)
        return;

    EPI.CurSelectedId = pkId;

    // 缓存中有数据 //
    var item = FindToolTipDivHtml(pkId);
    if (item != null) {
        $("#ToolTipDivMain").html(item.TheHtml);
        return;
    }

    var ajaxUrl = "ToolTipDivShow";
    // 获得搜索的数据 //
    var ajxData = [];

    ajxData.push({ name: "_id", value: EPI.CurSelectedId });

    $.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 != EPI.CurSelectedId)
                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").last();

        if (cityObj == null || cityObj == undefined) {
            cityObj = $(this).find("a").last();
        }

        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 () {

        $("#ToolTipDiv").hover(function () {
            // 显示 //
            $("#ToolTipDiv").show();
        }, function () {
            // 延迟消失 //
            $('#ToolTipDiv').delay(1).fadeOut(100);
        });
    });

    $("#close").on("click", function () {
        // 延迟消失 //
        $("#ToolTipDiv").delay(1).fadeOut(100);
    });
}

// Website\Management\Content\css\Areas\ZnbmOil\VGAS\VgasItem\index.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);
}

// ZNBM\eKing.SzdfPage\Areas\ZnbmOil\VGAS\VgasItem\EkSzdfTable__Page.cs

            // 填充关键字的值 //
            // 则在tr上面有属性 data-guid="{pk}"
            this.IsFillPkValue = true;


            // 名称 //
            ekx = _TheName;

            // 填充显示字段 //
            ekx.EmSelectFlagFillDC
                = 
                EkPageCreate.Enums.SelectFlag.EmSelectFlag.是;

            ekx.EmShowLogicV
                = 
                EkPageCreate.Enums.ShowLogic.EmShowLogic.主显查看;

// ZNBM\eKing.SzdfLib\TableAttribute\VGAS\UTB_SZDF_VGAS_ITEM__Page.cs


            // 自定义扩展CSS样式 //
            this.EmSelectFlagFillCss = SlowX.Core.Enums.SelectFlag.EmSelectFlag.是;

            // 自定义扩展JS //
            this.EmSelectFlagFillJs = SlowX.Core.Enums.SelectFlag.EmSelectFlag.是;

            // 是否显示ToolTip的浮层 //
            this.EmSelectFlagFillToolTipDiv = SlowX.Core.Enums.SelectFlag.EmSelectFlag.是;

Management\Areas\ZnbmJygl\Views\JyglHyitem\Index.cshtml



<!-- 添加ToolTip扩展的html -->
<!-- tooltip扩展 -->
<div id="ToolTipDiv" class="ToolTipDiv">
    <div id="close" class="close">
        <span class="close_icon">×</span>
    </div>
    <div id="ToolTipDivMain">
    </div>
</div>
<!-- tooltip扩展End -->

上一条：

下一条：

发表评论

类型：

留言

建议

疑问

内容：

(Alt+Enter)

┈全部┈

SlowX框架的升级
新LBS开发
数据库编码规范
.net编码规范
代码风格
知识
- boolstrap
  - swal
- GMap.NET
- ArcGis
- LigerUI
- C#
  - 代码生成工具常用代码
  - 常用代码
    - 计算机信息
    - 注册表
    - 货币
  - 外部dll的使用
  - Boolean
  - WebControls
    - DropDownList
    - WebControl
    - CheckBoxList
    - RadioButtonList
    - Button
    - DataGrid
    - TextBox
  - DataSet
  - DateTime
  - HttpContext
  - String
  - Math
    - Int类型
    - Long类型
    - Decimal类型
  - File
  - Byte
  - Image
  - Office
    - Excel
    - Word
    - PowerPoint
  - 加密和解密
  - 枚举
  - 正则表达式
  - Xml
  - 反射
  - 数组
  - Socket
  - HTML
  - 逻辑类
  - 接口
  - 数据库逻辑方法
  - 枚举
  - Unit
  - 校验
- MapInfo
- WinForm
  - DataGridView
  - DateTimePicker
  - RichTextBox
  - 常用代码
  - 网络
  - 自定义控件
  - TreeView
  - ComboBox
  - ListView
  - PropertyGrid
  - TabControl
  - ToolStripDropDownButton
  - WebBrowser
  - 线程
  - Image
  - 系统
  - 转载
- 百度地图
- 片段代码
  - Asp.NET
  - 待归类
  - 逻辑代码
  - 桌面软件
- .net逻辑代码
  - winform开发
  - 待归类
  - 图片处理
- HTML和JS
  - DIV+CSS
  - JS组建
  - HTML
  - jQuery
    - Ajax
  - 纯JavaScript
  - SVG
- 数据库
  - Access
  - Oracle
  - SQLite
  - SqlServer
- FineUI
  - FineUI.DropDownList
  - 常用代码
  - FineUI.Grid
  - FineUI.Tree
  - FineUI.Button
  - FineUI.CheckBoxList
  - FineUI.TextBox
  - 逻辑应用
- MFC
  - 入门
- 插件Addin
- 待整理
- 数据库教程
  - 数据表
  - 数据库练习
- Asp.net
  - 应用
- 文章
- ASP
巫霜
- 定制平台
  - ZX
    - Classes
    - Helpers
  - ZXPageCore
    - Enums
    - Helpers
    - Configs
- 开发系统
  - 控件
  - 应用
  - JS
  - 其他
- SlowX.Core
- 经验交流
- 命名规则
  - .net程序
  - 数据库
- 我的片段代码
- WebSiteBasicBLL
特效
组件
临时
- 实验题

（显示默认分类）

地服系统列表：ToolTip效果的实现

相关评论

发表评论