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

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

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

                  

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

控件jquery.poshytip

Javascript代码:

 1 $('#guanzhu').poshytip({
 2                 className: 'tip-skyblue',
 3                 alignX: 'right',
 4                 alignY: 'bottom',
 5                 content: function (updateCallback) {
 6                     window.setTimeout(function () {
 7                         var callbcak = "";
 8 
 9                         var MasterAttentionInfoName = '<%=getMasterAttentionInfoName() %>';//获取博主关注博客的姓名
10                         var split_MasterAttentionInfoName = MasterAttentionInfoName.split(",");
11 
12                         var MasterAttentionInfoUserId = '<%=getMasterAttentionInfoUserId() %>';//获取博主关注博客的userId
13                         var split_MasterAttentionInfoUserId = MasterAttentionInfoUserId.split(",");
14 
15                         var MasterAttentionNewEssayTitle = new Array('<%=String.Join("', '",getMasterAttentionNewEssayTitle())%>');//获取博主关注博客的博文的标题
16                         var MasterAttentionNewEssayId = new Array('<%=String.Join("', '",getMasterAttentionNewEssayId())%>');//获取博主关注博客的博文的博文Id
17                         var MasterAttentionNewEssayCount = new Array('<%=String.Join("', '",getMasterAttentionNewEssayCount())%>');//统计博文的数目
18 
19                         var k = 0;
20                         for (var i = 0; i < MasterAttentionNewEssayCount.length; i++) {
21                             var str = "";
22                             for (var j = 0; j < MasterAttentionNewEssayCount[i] && k < MasterAttentionNewEssayTitle.length; j++, k++) {
23                                 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>";
24                             }
25                             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>";
26                         }
27                         updateCallback(callbcak);
28                     }, 1000);
29                     return 'Loading...';
30                 }
31             });

后台CS的C#代码:

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

View Code
 //获取当前博主关注博客的个数
        [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;
        }

 

posted @ 2012-05-06 20:06 Ghost Soar 阅读(...) 评论(...) 编辑 收藏