Div里面載入另一個頁面的實現（取代框架）（AJax）

著框架越來越不火了，HTML5就不對框架支持了，iframe也只有url了,Div就擔當了此大任

DIV+CSS在頁面部局確實也很讓人滿意，使用也更方便

今天突然遇到一個問題，那就是需要導入另一個頁面顯示在當前頁的Div里面

我當然可以用iFrame啥的，不過那不是我想要的方法

在網上查了半天，方法也很多，不過有不滿意的地方,因為多數都會用JQuery

呆會在下部分會給出jQuery的實現

而且因為要導入的頁面還有一些特效，而不是單純的數據，例如，我導過來的頁面樣式都要保持!

我要實現的是教你用Ajax實現,大家都知道Ajax可以異步隨時不用刷新頁面而更新數據,功能也很是強大

而且在未來HTML5上也對Ajax有了更好的支持，

下面我就教你如何使用Ajax快速達到目的:

使用源生Ajax,只需二步:

1:下載Ajaxjs文件:Ajax包下載

2:頁面導入js文件<script type="text/javascript" src="ajaxrequest.js"></script>

完成了，你已經成功邁入了阿假科思大門了

接著來完成任務吧:

細節說明:Apach / Ajax / js

頁面中添加一個目標地址:例如 <div id="des"></div>

好啦，另一個頁面的全部代碼呆會就導在這個叫des的DIV中間;我們要導入的就是頁面abc.html //用來設計模板頁很不錯哦

添加JS代碼了:

<script type="text/javascript">

var ajaxobj=new AJAXRequest; // 創建AJAX對象,類在剛剛那個文件里了

ajaxobj.method="GET"; // 設置請求方式為GET

ajaxobj.url="templat/main.html" // 響應的URL,以后可以改為一些動態處理頁,會用Ajax的都知道，這在頁里可以有目的返回不同的數據

// 設置回調函數，輸出響應內容,因為是靜態頁（這是我的需求嘛）所以所有內容都過來了

ajaxobj.callback=function(xmlobj) {

document.getElementById('des).innerHTML = xmlobj.responseText; //可要看好這句話哦

}

ajaxobj.send(); // 發送請求

</script>

到此為止，目的達成,頁面是不是完全加載進來了，右健查看源代碼，還很好的隱藏了abc的url,甚至連字都隱藏了，太神奇了,hoho

用這開發模板，不就是一個網址了嗎，連個？號都不讓看啊，就是一個字：真爽!

而且樣式也都是設好的樣式,也可以把js用function aa{}擴起來在onload(javascript：aa())自由發揮

最后說明一下:ajax還需要一些瀏覽器檢查，這里是教最快上手，我在FF火狐測試過了一切都好,而在IE可能在樣式上會出點小問題，不過門都入了，

慢慢就都會了，不是嗎

JQuery方式載入：

方式一：首先引入jquery的JS文件:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

更多jQuery內部原理見此牛貼：http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html

導入js 添加代碼了,直接寫個js函數(因為無論jquery還是Ajax都是js開發的)

<script language="javascript" type="text/javascript">

<!--

function jump(){

$("#mainBody").load("./templat/main.html",function(){ $("#mainBody").fadeIn(100);}

);

-->

</script>

直接在要觸發的地方加上onclick="jump();" 就行了,發現這個瀏覽器支持能好點

更多load用法請參閱完整說明:http://www.cnblogs.com/mslove/archive/2009/05/07/1452098.html

方式二:這個方法是使用jquery的ajax

var parames={

"type1":"paramer1","type2":"paramer2"};

$.ajax({

url:'myTest.php',

type:'post',

dataType:'html',

data:parames,

error: function(){alert('error');},

success:function(data){

$("#myDiv").html(data);

}

});

這種方式也可以，愛用哪個用哪個吧，哈哈

附：

jquery load 事件用法

如果綁定給window對象，則會在所有內容加載后觸發，包括窗口，框架，對象和圖像。如果綁定在元素上，則當元素的內容加載完畢后觸發。

注意:只有當在這個元素完全加載完之前綁定load的處理函數,才會在他加載完后觸發。如果之后再綁定就永遠不會觸發了。所以不要在$(document).ready()里綁定load事件，因為jQuery會在所有DOM加載完成后再綁定load事件。

調用load方法的完整格式是：load( url, [data], [callback] ),

其中:

url：是指要導入文件的地址。

data：可選參數；因為Load不僅僅可以導入靜態的html文件，還可以導入動態腳本，例如PHP文件，所以要導入的是動態文件時，我們可以把要傳遞的參數放在這里。callback：可選參數；是指調用load方法并得到服務器響應后，再執行的另外一個函數。

一：如何使用data

1.加載一個php文件，該php文件不含傳遞參數

$("#myID").load("test.php");

//在id為#myID的元素里導入test.php運行后的結果

2. 加載一個php文件，該php文件含有一個傳遞參數

$("#myID").load("test.php",{"name" : "Adam"});

//導入的php文件含有一個傳遞參數，類似于：test.php?name=Adam

3. 加載一個php文件，該php文件含有多個傳遞參數。注：參數間用逗號分隔

$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});

//導入的php文件含有一個傳遞參數，類似于：test.php?name=Adam&site=61dh.com

4. 加載一個php文件，該php文件以數組作為傳遞參數

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//導入的php文件含有一個數組傳遞參數。

注意：使用load，這些參數是以POST的方式傳遞的，因此在test.php里，不能用GET來獲取參數。

二：如何使用callback

比如我們要在load方法得到服務器響應后，慢慢地顯示加載的內容，就可以使用callback函數。代碼如下：

$("#go").click(function(){

$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){

$("#myID").fadeIn('slow');}

);

});

備注：

在load的url里加上空格后面就可以跟選擇器了。

例如：

$("body").load("test.html #a");

上又要到秋招的時候了，又有不少人打算換工作了。前端在面試中總會被問到的一道基礎題div居中方法，這里給大家總結一下都有哪些常用的方法。

絕對定位

父級元素（parent）采用相對定位（relative），需要居中的元素（demo）采用絕對定位（absolute）。
居中元素向上偏移50%，向左偏移50%，此時左頂點位于中心，不過我們需要的是整體居中，所以在偏移自身一半的寬高。（如下圖）

還未偏移一半自身寬高

<style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      width: 100px;
      height: 100px;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

彈性方法居中

通過flex彈性布局設置垂直居中和水平居中

  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: solid red 1px;
      display: flex;
      // 垂直，水平居中
      align-items: center;
      justify-content: center;
    }
    .demo {
      width: 100px;
      height: 100px;
      border: solid blue 1px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

使用transform居中

在子元素不知道自身寬高情況，使用transform進行比偏移。

  <style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo">居中</div>
    </div>
  </body>

以上3種是常用的方法，當然還有其他居中方法比如grid布局，table-cell布局等。

航欄效果圖：

導航欄

導航欄功能模塊圖

圖書管理功能模塊圖

圖書管理功能包4括大模塊，16個子模塊。

導航欄布局結構分析

1. 制作方式：列表<ul><li>制作。

四大模塊：用一個<ul><li></li></ul>列表制作出來，每個模塊下面的四個子模塊用同樣的<ul><li></li></ul>列表嵌套出來。

具體格式如下：

<ul>
 <li>模塊1
 <ul>
 <li>模塊1.1</li>
 <li>模塊1.2</li>
 <li>模塊1.3</li>
 <li>模塊1.4</li>
 </ul>
 </li>
 <li>模塊2
 <ul>
 <li>模塊2.1</li>
 <li>模塊2.2</li>
 <li>模塊2.3</li>
 <li>模塊2.4</li>
 </ul>
 </li>
..........
</ul>

2.導航標簽<a>：都是一個超鏈接，通過點擊鏈接到相應的導航頁面。

所以在每個列表選項中，都應該加入超鏈接<a>標簽。

<ul>
<li><a href="javascript：;" >用戶管理</a></li>
...
</ul>

3.導航框的修飾：CSS樣式表

3.1 樣式表接入方式：

行內樣式
內嵌樣式
鏈接式
導入式

一般用鏈接式<link >，運用高內聚，低耦合的思想。

<link rel="stylesheet" type="text/css" href="CSS/demo.css">

3.2標簽選擇器

行內選擇器>id選擇器>class選擇器>標簽選擇器

常用到的為 id選擇器、class選擇器、標簽選擇器。

例如：

<ul>
 <li class="litems"><a href="javascript：;">用戶管理</a>
 <ul class="uitems">
 <li><a href="javascript：;">添加用戶</a></li>
 </ul>
 </li>
</ul>

具體用法見：HTML/CSS中可直接輸數據的表格

4.導航欄的框框

模塊標簽特點：

背景色background-color ：暗紅色；
形狀：長方塊block 、寬width、高height,左邊有突出小方塊樣式，分析為內邊距padding。
內容：字體font-family、字體顏色color、字體大小font-size, 垂直居中line-height=height
邊框：border：solid 1px #ff0；

litems類標簽 中 <a>標簽的樣式如下：

 .litems>a
{
	background-color:#990020; /*背景色*/
	height:30px; 
	display:block; /*塊顯示*/
	line-height:30px; /*垂直居中*/
	border-left: solid 12px #711515; /*邊框*/
	padding-left:5px; /*左邊距*/
}

5.鼠標懸浮變化--- a:hover 屬性

鼠標未懸浮狀態

鼠標懸浮狀態

特點：鼠標懸浮時，字體變為黃色。

a:hover
{
	color:#FF0;
}

制作一個簡單的導航欄，常用的就是列表格式。通過列表的嵌套和樣式的修改，即可建立一個簡約得體的導航列表。

以下附帶部分樣式源碼：

HTML列表內容

CSS樣式表源碼：

在線咨詢

上一篇：Python Flashtext 實現大數據集下高效的關鍵詞查找和替換
下一篇：西安首家生活垃圾無害化處理項目投運日處理生活垃圾將達2250噸

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商