首先，对以前的代码进行了一个调整（具体看源代码），原来的想法是做出大概的样子就可以了，后来想要做就做好吧，加入多用户和更换主题等等，所以调整下以前代码。
其次就是数据库的问题，虽然只考虑前台，但里面很多页面涉及到了取数据库信息等，为方便大家理解，列出数据库的粗略结构。

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和标题就可以

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

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

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

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

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

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

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

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

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的编辑按钮，还要考虑编辑区域是否显示，如果显示的话同样要隐藏掉。
                       之后加载页面内容，这是后话，以后讨论。

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，当然前提是没有的情况，有的话直接显示就可以了（怎么会有？第一次点击的时候是添加，之后只是把它隐藏了，等第二次点击的时候他其实是存在的，我们只需把它显示即可。）

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();
    });
}

ITPub博客

雅蛙网ajax特效jQuery实现方法

最新文章