雅蛙網ajax特效jQuery實現方法

iDotNetSpace發表於2009-01-04
特效jQuery
 首先，對以前的程式碼進行了一個調整（具體看原始碼），原來的想法是做出大概的樣子就可以了，後來想要做就做好吧，加入多使用者和更換主題等等，所以調整下以前程式碼。
     其次就是資料庫的問題，雖然只考慮前臺，但裡面很多頁面涉及到了取資料庫資訊等，為方便大家理解，列出資料庫的粗略結構。

 

<!--

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

--&gtusers表
使用者名稱       標題                    主題          頁面
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/

--&gt<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/

--&gt<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/

--&gt
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/

--&gtfunction 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/

--&gtfunction 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("
重 命 名：　
訪問許可權：　公開本頁內容
刪　　除：　雅蛙網ajax特效jQuery實現方法
");
            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/

--&gtfunction 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/

--&gtfunction 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/

--&gtfunction 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/

--&gtfunction 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/

--&gtfunction 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/

--&gtfunction 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/

--&gtfunction 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/，如需轉載，請註明出處，否則將追究法律責任。

    相關文章