著框架越來越不火了,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);
}
});
這種方式也可以,愛用哪個用哪個吧,哈哈
附:
如果綁定給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居中方法,這里給大家總結一下都有哪些常用的方法。
還未偏移一半自身寬高
<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進行比偏移。
<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.導航欄的框框
模塊標簽特點:
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樣式表源碼:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。