我的博客网站开发2——博客首页功能实现之jQuery气泡提示

    在完成博客首页的设计之后，接下来就是页面的功能的实现。

    在实现功能之前，首先介绍一下jQuery气泡提示控件，显示的图片如下图：

                  

主要实现当鼠标经过页面中“关注”时，会有气泡提示，显示博主关注的博客的动态。

控件jquery.poshytip

Javascript代码：

$('#guanzhu').poshytip({
                className: 'tip-skyblue',
                alignX: 'right',
                alignY: 'bottom',
                content: function (updateCallback) {
                    window.setTimeout(function () {
                        var callbcak = "";

                        var MasterAttentionInfoName = '<%=getMasterAttentionInfoName() %>';//获取博主关注博客的姓名
                        var split_MasterAttentionInfoName = MasterAttentionInfoName.split(",");

                        var MasterAttentionInfoUserId = '<%=getMasterAttentionInfoUserId() %>';//获取博主关注博客的userId
                        var split_MasterAttentionInfoUserId = MasterAttentionInfoUserId.split(",");

                        var MasterAttentionNewEssayTitle = new Array('<%=String.Join("', '",getMasterAttentionNewEssayTitle())%>');//获取博主关注博客的博文的标题
                        var MasterAttentionNewEssayId = new Array('<%=String.Join("', '",getMasterAttentionNewEssayId())%>');//获取博主关注博客的博文的博文Id
                        var MasterAttentionNewEssayCount = new Array('<%=String.Join("', '",getMasterAttentionNewEssayCount())%>');//统计博文的数目

                        var k = 0;
                        for (var i = 0; i < MasterAttentionNewEssayCount.length; i++) {
                            var str = "";
                            for (var j = 0; j < MasterAttentionNewEssayCount[i] && k < MasterAttentionNewEssayTitle.length; j++, k++) {
                                str += "<div style='margin:5px 5px auto 5px;border-bottom:1px dashed #FFFFFF;'><a href='../BlogContent.aspx/" + split_MasterAttentionInfoUserId[i] + "?id=" + MasterAttentionNewEssayId[k] + "'>" + (j + 1) + MasterAttentionNewEssayTitle[k] + "</a></div>";
                            }
                            callbcak += '<div"><a href="../BlogPrivatePage.aspx/' + split_MasterAttentionInfoUserId[i] + '" style="color:#000000;">' + split_MasterAttentionInfoName[i] + '</a><div style="padding-left:10px;"><img src="../img/bubble.png" style=""/></div></div>' + "<div  style='padding:5px auto auto 20px; border:1px solid #FFFFFF; margin-bottom:10px;'>" + str + "</div>";
                        }
                        updateCallback(callbcak);
                    }, 1000);
                    return 'Loading...';
                }
            });

后台CS的C#代码：

以上的js代码中运用到调用后台的方法以获取相关的参数

 //获取当前博主关注博客的个数
        [WebMethod]
        public string getMasterAttentionCount()
        {
            return dt_MasterAttention.Rows.Count.ToString().Trim();
        }


        //获取当前博主关注博客的信息
        [WebMethod]
        public string getMasterAttentionInfoName()
        {
            string str = "";
            for (int i = 0; i < dt_MasterAttention.Rows.Count; i++)
            {
                if (i == 0)
                {
                    str = dt_MasterAttention.Rows[i]["name"].ToString().Trim();
                }
                else
                {
                    str += "," + dt_MasterAttention.Rows[i]["name"].ToString().Trim();
                }
            }
            return str;
        }
        [WebMethod]
        public string getMasterAttentionInfoUserId()
        {
            string str = "";
            for (int i = 0; i < dt_MasterAttention.Rows.Count; i++)
            {
                if (i == 0)
                {
                    str = dt_MasterAttention.Rows[i]["dengLuName"].ToString().Trim();
                }
                else
                {
                    str += "," + dt_MasterAttention.Rows[i]["dengLuName"].ToString().Trim();
                }
            }
            return str;
        }

        //获取当前博主关注博客的最新博文标题
        public string[] getMasterAttentionNewEssayTitle()
        {
            string[] ObjList = new String[dt_MasterAttentionNewEssay.Rows.Count];
            for (int i = 0; i < dt_MasterAttentionNewEssay.Rows.Count; i++)
            {
                ObjList[i] = dt_MasterAttentionNewEssay.Rows[i]["title"].ToString().Trim();
            }
            return ObjList;
        }
        //获取当前博主关注博客的最新博文essayId
        public string[] getMasterAttentionNewEssayId()
        {
            string[] ObjList = new String[dt_MasterAttentionNewEssay.Rows.Count];
            for (int i = 0; i < dt_MasterAttentionNewEssay.Rows.Count; i++)
            {
                ObjList[i] = dt_MasterAttentionNewEssay.Rows[i]["essayId"].ToString().Trim();
            }
            return ObjList;
        }

        //获取当前博主关注博客的个数
        public int[] getMasterAttentionNewEssayCount()
        {
            string index = "";//根据此标记区别博文不同的博主
            int[] ObjList = new int[dt_MasterAttention.Rows.Count];
            for (int j=0; j < dt_MasterAttention.Rows.Count; j++)
            {
                index = dt_MasterAttention.Rows[j]["userId"].ToString().Trim();
                for (int i = 0; i < dt_MasterAttentionNewEssay.Rows.Count; i++)
                {
                    if (dt_MasterAttentionNewEssay.Rows[i]["userId"].ToString().Trim() == index)
                    {
                        ObjList[j]++;
                    }
                }
            }
            return ObjList;
        }