ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 雅蛙网ajax特效jQuery实现方法

雅蛙网ajax特效jQuery实现方法

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-01-04 15:37:35 0 删除 编辑
 首先,对以前的代码进行了一个调整(具体看源代码),原来的想法是做出大概的样子就可以了,后来想要做就做好吧,加入多用户和更换主题等等,所以调整下以前代码。
     其次就是数据库的问题,虽然只考虑前台,但里面很多页面涉及到了取数据库信息等,为方便大家理解,列出数据库的粗略结构。

 

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->users表
用户名       标题                    主题          页面
kuku       丝路野草的个性化主页    
default       2|3


page表
id    标题     是否公开    布局      工具列表
2     新闻     0           3         p2,p6|p7|p5,p3
3     体育     0           2         p8|p9,p22

widget表
id    种类           标题        是否展开      网址
2     rss          rss阅读     ……          ……
3     weather      天气预报     ……          ……
5     notebook     记事本       ……          ……

 

     page表的工具列表,使用了p+widgetid的方式保存信息,p指公开,s指保密,这样做的好处就是当权限不够只能看公开的内容的时候,不用再去查那些保密的widget,如果把是否公开的信息保存在widget表中,遇到保密的内容而此时你的权限又不够,就要删除刚刚生成的widget头部信息,很费资源吧。我是这么考虑的,欢迎讨论。
     没什么解释的,欢迎大家讨论此结构是否合理。


     目标:页面tab的生成,切换,编辑,添加,删除,保存

     1.页面tab的生成
      思路:首先应该得到页面id了,之后根据id查page表,得出相关信息,生成tab即可。
      进一步思考:tab要保存那些信息呢,最简单的,保存id和标题就可以

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><li class="GetTabs_Ll" tid="2"><span class="GetTabs_Ll_Title">新闻span>li>

      这样以后要打开这个页面,根据id查数据库得到布局和工具列表就可以,问题是由于不能保存缓存,切换一次tab就要查一次数据库,可好?

      还有一种想法就是把所有信息都保存在tab上

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><li class="GetTabs_Ll" mod="32,6|7|5,3" tid="2"><span class="GetTabs_Ll_Title">新闻span>li>


      优势就是只查一次数据库,之后切换tab不用再查,劣势就是添加模块之后要改mod值

      具体那一种方式好,敬请高手指教

      还有就是当页面加载完成后,要自动打开第一个tab

      这里需要注意的一点就是,要判断是否有tab,如果遇到像我这样手闲的人,把页面全删了,就会出现问题。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
function AddTabs(page){                      //获取Tabs  
    $.ajax({
        url:
"asp/gettabs.htm",               
        success:
function(rt){
            $(
".default_AddNewPages").before(rt);
        $(
".GetTabs_Ll_Title").bind("click",ChangeTab);
            
if($(".GetTabs_Ll_Title").size()>0)
                ChangeTabFirst($(
".GetTabs_Ll_Title").eq(0));
            
else
                $(
"#default_columns").html("没有可公开的内容!");
        }
    });
}

 

      2.页面tab的切换
      思路:改变tab样式为default_Tabs_Checked,显示编辑按钮∨,加载本页内容
      进一步思考:1.首先要把前一个tab的样式改成默认,怎么找前一个?他的样式肯定是default_Tabs_Checked,把他删了就行,之后给现在的tab加上这个样式。
                       2.要隐藏掉前一个tab的编辑按钮,还要考虑编辑区域是否显示,如果显示的话同样要隐藏掉。
                       之后加载页面内容,这是后话,以后讨论。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function ChangeTab(){                         //获取其他Tab信息 
    var tab_li=$(this).parent(".GetTabs_Ll");
    TabChecked(tab_li);
    $(
"#default_columns").html("Loading……");
    LoadingTabInfo(tab_li);
}
function ChangeTabFirst(tab_span){              //页面载入时获取第一个Tab信息
    var tab_li=tab_span.parent(".GetTabs_Ll");
    TabChecked(tab_li);
    $(
"#default_columns").html("Loading……");
    LoadingTabInfo(tab_li);
}
function TabChecked(tabcheck){                //选中Tab,改变CSS
    $(".GetTabs_Ll").removeClass("default_Tabs_Checked");
    $(
".GetTabs_Ll_pipe").hide();                   //隐藏分割线
    $(".GetTabs_Ll_Down").hide();                   //隐藏编辑按钮
    $(".GetTabs_Ll_Down_Area").hide();              //隐藏编辑区域
    tabcheck.addClass("default_Tabs_Checked");
    tabcheck.find(
".GetTabs_Ll_pipe").show();       //显示分割线
    tabcheck.find(".GetTabs_Ll_Down").show();       //显示编辑按钮
    tabsdownclicked();                              //给编辑按钮添加click事件
}
function LoadingTabInfo(tab_li){                         //Loading  Tab信息 
    var mod=tab_li.attr("mod");
    $(
"#default_columns").html(mod);
}

 

 

      3.页面tab的编辑,删除
      思路:在选中此tab的情况下,在此tab上添加或显示一个div,点此div,出现编辑区域。
      进一步思考:要编辑什么内容呢?标题肯定要,还有是否公开此页,再就是删除,换图标之类的其实也可以加入,有兴趣的朋友自己试吧。

      编辑按钮click事件,在当前tab的GetTabs_Ll内部加入GetTabs_Ll_Down_Area,当然前提是没有的情况,有的话直接显示就可以了(怎么会有?第一次点击的时候是添加,之后只是把它隐藏了,等第二次点击的时候他其实是存在的,我们只需把它显示即可。)

 

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function tabsdownclicked()
{
    $(
".GetTabs_Ll_Down").click(function(){
        
var tab=$(this).parent(".GetTabs_Ll");
        
var down=tab.find(".GetTabs_Ll_Down_Area");
        
if(down.html()==null)
        {
            tab.prepend(
"
重 命 名: 
访问权限: 公开本页内容
删  除: 
");
            tab.find(
".GetTabs_Ll_Down_Title").html(tab.find(".GetTabs_Ll_Title").html());
            tablidowntitleclick();
            tablidownpubclick();
            tablidowndelclick();
            
//此处应有读取页面是否公开的内容,这里省略
        }
        
else
            down.show();
    });
}

 

      首先说编辑标题,使用失去焦点保存数据,其他和个性签名是一样的,这个不用再说了吧。直接上代码。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function tablidowntitleclick()
{
    $(
".GetTabs_Ll_Down_Title").click(function(){
    
var title=$(this).html();
    $(
this).replaceWith(""+title+"' />");
    $(
"#GetTabs_Ll_Down_Title_Input").focus();
    $(
"#GetTabs_Ll_Down_Title_Input").keyup(function(event){
        
if(event.keyCode!=8&&event.keyCode!=37&&event.keyCode!=39)
        {
            
var value=$(this).val();
            
var val=value.replace(/[^\u4e00-\u9fa5 a-zA-Z0-9]/i,"");
            $(
this).val(leftB(val,8));
        }
    });
    $(
"#GetTabs_Ll_Down_Title_Input").blur(function(){
        
var title2=$(this).val();
        
var input=$(this);
        
var gettabli=$(this).parents(".GetTabs_Ll");
        $.ajax({
            
//type:"post",
            url:"/asp/ChangeTabTitle.htm",
            
//cache:false,
            //data:"newtitle="+title2+"&pageid="+gettabli.attr("tid"),
            success:function(rt){
                
if(rt=="1")
                {
                    gettabli.find(
".GetTabs_Ll_Title").html(title2);
                    input.replaceWith(
""+title2+"
");
                    gettabli.find(
".GetTabs_Ll_Down_Area").hide();
                    tablidowntitleclick();
                }
                
else
                {
                    input.replaceWith(
""+title+"");
                    tablidowntitleclick();
                }
            }
        });
    });
    });
}

 

      需要说下的就是keyup这儿,直接过滤特殊字符,并限制标题最长8字节,leftB函数,解决中英文问题。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function leftB(str,num)
{
        
var strlength=str.replace(/[\u4e00-\u9fa5]/gi,"**").length;
        
if(strlength>=num)
        {
            
var twobitlength=str.replace(/[^\u4e00-\u9fa5]/i,"").length+1;
            num
=num-strlength+twobitlength;
            str
=str.substr(0,num);
        }
        
return str;
}

 

     是否公开,这个信息是保存在数据库中的,生成tab的时候并没有将它的信息写入tab,所以要读数据库才知道具体内容,在tabsdownclicked这个函数中。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function tablidownpubclick()
{
    $(
".GetTabs_Ll_Down_Pub").click(function(){
        
var pub=$(this).attr("checked");
        
var pageid=$(this).parents(".GetTabs_Ll").attr("tid");
        $.ajax({
            url:
"/asp/ChangeTabPub.htm",           //更新数据库中的pub信息
            cache:false,
            data:
"pub="+pub+"&pageid="+pageid
        });
    });
}

 

 

      最后一个,删除,由于删除的是整个页面,所以不光要删除页面,还要在数据库中删除此页面中的所有widget。

      删除是大事情,操作之前先确定下

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function tablidowndelclick()
{
    $(
".GetTabs_Ll_Down_Del").click(function(){
        
var truthBeTold = window.confirm("此操作将删除本页及本页所有内容,确定吗?");
        
if (truthBeTold) 
        {
            deletetab($(
this));
            deletetabwidget($(
this));
            deletepage($(
this));
        }
    });
}

 

删除tab,要改变users表中页面的值。由于删除的tab处于选中状态,所以删除后要将第一个tab置于选中状态。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function deletetab(tab)
{
    
var tab=tab.parents(".GetTabs_Ll");
    
var newtabid="";
    $(
".GetTabs_Ll").not(tab).each(function(i){               //形成users表页面值,|分割
        if(i==0)
            newtabid
=newtabid+$(this).attr("tid");
        
else
            newtabid
=newtabid+"|"+$(this).attr("tid");
    });
    $.ajax({
        url:
"/asp/ChangeWidgetModule.htm",
        cache:
false,
        data:
"module="+newtabid,
        success:
function(rt){
            tab.remove();
            
var li=$(".GetTabs_Ll_Title").eq(0);
            
if(li.html()==null)
                $(
"#default_Module tr").html("没有任何可以显示的内容!");
            
else
                ChangeTabFirst(li);
        }
    });
}

 

后面基本是删数据库中的内容,没什么解释的,上代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function deletetabwidget(tab)
{
    
var mod=tab.parents(".GetTabs_Ll").attr("mod");      
    
if(mod.length!=1)                             //widget不为空时删除数据库中对应的widget
    {
        
var td=mod.substr(1).split("|");
        
for(i=0;i<td.length;i++)
        {
            
var widgetid=td[i].split(",")
            
for(k=0;k<widgetid.length;k++)
            {
                DeleteWidgetNoRemove(widgetid[k].substr(
1));
            }
        }
    }
}
function deletepage(tab)
{
    
var pageid=tab.parents(".GetTabs_Ll").attr("tid");
    $.ajax({
        url:
"/asp/DeletePage.htm",
        data:
"pageid="+pageid,
        cache:
false
    });
}
function DeleteWidgetNoRemove(widgetid)          //NoRemove相对在页面中删除widget而言,不用删除页面内的,直接删数据库中的就可以
{
    $.ajax({
        url:
"/asp/DeleteWidget.htm",
        data:
"widgetid="+widgetid,
        cache:
false
    });
}

 

      4.页面tab的添加
      思路:在最后添加一个tab,并处于选中状态,编辑区域打开。
      进一步思考:思考什么,没什么思考的,简单,上代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->function addnewpage()
{
    $(
".default_AddNewPages").click(function(){
        
var page=$(this);
        $.ajax({
            url:
"asp/addpage.htm",
            cache:
false,
            success:
function(rt){
                addnewpageready(page,rt);
            }
        });
    });
}
function addnewpageready(newpage,tid)
{
    $(
".default_AddNewPages").before(""+tid+"'>New Page|")
    
var newpagedown=newpage.prev();
    ChangeTabFirst(newpagedown.find(
".GetTabs_Ll_Title"));
    newpagedown.find(
".GetTabs_Ll_pipe").show();
    newpagedown.find(
".GetTabs_Ll_Down").show();
    tabsdownclicked();
    newpagedown.find(
".GetTabs_Ll_Title").bind("click",ChangeTab);
}

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-526498/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-01-04

最新文章