天天看點

PHP網站使用JavaScript和Iframe簡單實作部分重新整理效果

        本文主要是記錄自己寒假作業php網站實作加載界面的文章,運作效果如下圖所示。主要記錄php+html+apache開發網站的3個功能:(友善以後閱讀和其他人學習)

        1.如何實作簡單頁面布局

        2.使用jsp如何實作隐藏與顯示效果

        3.通過iframe實作局部動态更新頁面内容

一.運作效果

PHP網站使用JavaScript和Iframe簡單實作部分重新整理效果

        可以發現該界面布局主要由3部分組成,頂部head、中間左邊菜單欄和中間右邊顯示界面,點選左邊菜單欄會通過javascript實作隐藏縮放功能;同時點選不同菜單欄可以在右邊顯示不同界面。如下圖所示:

PHP網站使用JavaScript和Iframe簡單實作部分重新整理效果
PHP網站使用JavaScript和Iframe簡單實作部分重新整理效果

二.實作方法介紹

1.界面布局

        界面布局主要采用的是include加載php檔案實作,采用div和table實作布局,其中index.php檔案代碼如下:

        主要是通過head.php布局該界面的頭部,main_right.php實作加載界面的中間右邊部分,main_left.php加載界面的中間左邊菜單欄,而<iframe>後面實作局部加載會講述。

PHP網站使用JavaScript和Iframe簡單實作部分重新整理效果

        其中head.php代碼如下圖所示,就是html+css簡單的布局:

2.javascript實作隐藏縮放功能

        main_left.php中采用table布局并調用該script函數實作該功能,其中核心代碼如下所示:

       其中第一個菜單調用代碼如下,通過onclick=expend(1)調用,而且子菜單display初值為none,則調用該函數後初值為block顯示。

3.iframe實作局部加載效果

        通過iframe建立包含另外一個文檔的内聯架構(即行内架構)并實作局部加載功能,也就是點選左邊不同的菜單右邊顯示不同的内容而整個界面布局并沒有發生改變。

        在index.php布局中首先采用<iframe></frame>布局,同時src中引用加載的php。代碼如下:

上面代碼中其中src=""中加入要嵌入的頁面,name=""要嵌入頁面中traget。

        然後在子菜單中添加:

        <a href="main_right_yk2-2.php" target="rightframe">教師團隊</a>

        href中添加要加載的php界面,target中添加架構中的name。

        最後講講接下來需要解決的問題:

        1.iframe布局後,重新整理總是重新加載index.php界面,而目前顯示的内容會消失;

        2.php如何通過post+session進行登陸及表單通路mysql資料庫;

        3.如何實作網頁index.php顯示不同内容時index.php/xxxx加載些内容.

        希望文章對你有所幫助,後天就要過年了!提前祝自己和大家新年快了。