Ready
$(document).ready(function(){
})
Input_div_span
Input-長(cháng)度限制
<input maxLength="2">
Input-僅允許輸入數值
//綁定時(shí)刻輸入textBox
function bindInputKeyPress() {
$(".textbox").on("keypress", function (event) {
var keynum;
if (window.event) { keynum = event.keyCode; } //IE
else if (e.which) { keynum = event.which; } // Netscape/Firefox/Opera
var numcheck = /\d/;
return numcheck.test(String.fromCharCode(keynum));//僅允許輸入數字
});
} });
}
文本 超出-省略號
Overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
樣式 圓角
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
按鈕radio實(shí)現
路子：
（1）div 圓角
（2）圖片
àCSS
*{ margin:0xp; padding:0px;}
ul li{ list-style:none;}
.unselected{ background: url("../img/widgets/radio/default.png"); cursor:pointer; }
.unselected:hover{ background: url("../img/widgets/radio/focus.png");}
.selected{background: url("../img/widgets/radio/chosen.png"); cursor:pointer; }
.selected:hover{background: url("../img/widgets/radio/chosen-focus.png");}
.dInlineBlock{ display:inline-block;}
.wh24{ height:24px; width:24px;}
.vAlignTop{ vertical-align:top;}
.pRelativeBottom5{ position:relative; bottom:5px;}
àHTML
<link rel="Stylesheet" href="test.css"/>
<script type="text/javascript" src="../jquery/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//radioClicked
$(".radio").on("click", function () {
$(".radio").removeClass("selected").addClass("unselected"); //移除其它
$(this).addClass("selected");
}); //radioClicked end
});
</script>
</head>
<body><ul>
<li><span class="radio unselected wh24 dInlineBlock"></span><span class="dInlineBlock pRelativeBottom5">全¨天¨?</span></li>
<li><span class="radio unselected wh24 dInlineBlock"></span><span class="dInlineBlock pRelativeBottom5">自定義段</span></li>
<li><span class="radio unselected wh24 dInlineBlock"></span><span class="dInlineBlock pRelativeBottom5">特殊時(shí)段</span></li>
</ul>
</body>
按鈕：Div實(shí)現圖片，4種樣式
à4種狀態(tài)：未選中,未選中懸浮, 選中,選中懸浮
à關(guān)鍵
--1.使用 inline-block div ,background 代替圖片
--2. unselected:hover{} 和 selected:hover{} 用偽類(lèi)處理兩種圖片
--3. 點(diǎn)擊,if(hasClass){ removeClass.addClass}
àCSS
.unselected{ background: url("../img/widgets/radio/default.png"); cursor:pointer; }
.unselected:hover{ background: url("../img/widgets/radio/focus.png");}
.selected{background: url("../img/widgets/radio/chosen.png"); cursor:pointer; }
.selected:hover{background: url("../img/widgets/radio/chosen-focus.png");}
.dInlineBlock{ display:inline-block;}
.wh24{ height:24px; width:24px;}
àHTML，JS
<script type="text/javascript" src="../jquery/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//radioClicked
$(".radio").on("click", function () {
$(".radio").removeClass("selected").addClass("unselected"); //移除其它
$(this).addClass("selected");
}); //radioClicked end
});
</script>
</head>
<body>
<div class="radio unselected wh24 dInlineBlock">
</div>
</body>
禁止選擇文本
IE,Chrome
<body onselectstart=”return false”>
FF:
*{-moz-user-select:none;}
文本框只讀
$("#tbInfo input").attr("disabled","disabled");
$("#tbInfo input").removeAttr("disabled");
//只讀并且不可選中
$("#tbInfo input").attr("readonly","true");
//只讀但可以選中
span margin-left控制縮進(jìn)
margin對span有效
表單項批量讀/寫(xiě)
js對象->表單項
var tempAr=["Num","InnerNum","Name","Address","Active","IsActivated","InstallDate"];
for(vari=0;i<=tempAr.length-1;i++){
$("#inp"+tempAr[i]).val(pageInfo.editObj[tempAr[i]]);
}
表單項->js對象
var tempAr=["Num","InnerNum","Name","Address","Active","IsActivated","InstallDate"];
var tempShop={Num:"",InnerNum:"",Name:"",Address:"",Active:"",IsActivate:"",InstallDate:""};
for(vari=0;i<=tempAr.length-1;i++){
tempShop[tempAr[i]]=$("#inp"+tempAr[i]).val();
}
Select Option 下拉框
只讀
$("#tbInfoselect").attr("disabled","disabled");
$("#tbInfoselect"). removeAttr ("disabled");
DOM操作
createElement 和 AppendChild
var img=$("<imgsrc='images/divBar.png'/>")
$(this).append(img)
DOM操作 創(chuàng )建 添加
$(“字符串”)
append()
DOM操作 刪除
remove()
DOM操作 清空子元素
empty()
DOM操作 設置元素innerHTML
設置所有p的內容
$("p").html("Hello<b>world</b>!");
判斷2個(gè)dom元素相等
結論：DOM元素可以判斷相等。
Jquery對象不能判斷
<td class="col1 td1">cell1</td>
事件
原始方式：
domElement.on(“click”,function(){
});
on的多次綁定特性
說(shuō)明：會(huì )多次綁定
<!DOCTYPE htmlPUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="../lib/jquery-2.0.2.min.js"></script>
<title>TestPage</title>
<script type="text/javascript">
$(document).ready(function(){
bindEvents();
bindEvents();
});
function bindEvents(){
console.log("bindEventsis called");
$("#btnTest").on("click",function(e){
alert("btnTestis clicked");
});
}
</script>
</head>
<body>
<input type="button" id="btnTest" value="測試"/>
</body>
</html>
on和 off 綁定和解除
<script type="text/javascript">
functionbindClicks(){
$("#testDiv").on("click",function(){
console.log("testDivhas been clicked");
});
}
functionremoveBind(){
$("#testDiv").off("click");
console.log("testDiv.off('click')has been executed");
}
$(document).ready(function(){
bindClicks();
});
</script>
</head>
<body>
<div id="testDiv">測試</div>
</body>
Click once:
Console:
testDiv has been clicked
bind again:
bindClicks();
console:
testDiv has been clicked
testDiv has been clicked
off clicks
removeBind();
console(click div):
nothing….
冒泡和捕獲
$(document).on(“click”,function(e){
vartrigerId=e.target.id;
if(targeteId==”dvGISBox”){
…h(huán)andlecode
returnfalse;//阻止事件向下傳播
}
Else if(targeteId=””){
}
});
動(dòng)態(tài)元素的綁定
動(dòng)態(tài)元素：從document中刪除，然后又添加到document中。
流程：
bindUIEvents();//有spanKey的處理代碼
$(“.spanKey”).remove();
$(“#dvTest”).html(“<spanclass=’.spanKey’>測試span</span>”);
此時(shí)，.spanKey click就不能再次觸發(fā)。
原因：元素的綁定先于元素添加
解決方式：綁定動(dòng)態(tài)元素父元素的click事件，再通過(guò)$(e.target)鑒別是哪個(gè)子元素出發(fā)。
JSON
JSON和字符串轉換
1.JSON轉 string
var string=JSON.stringify(JSONObj);
2.string轉JSON
varjson=JSON.parse(string)
JSON校驗網(wǎng)站
說(shuō)明：ShopMis返回2852條記錄的JSON,在前端解析有問(wèn)題，靠它查明
http://www.bejson.com/go.php?u=http://www.bejson.com/index.php
布局
布局 圖片-桌布-界面
HTML:
<body>
<img id="bgImg"src="src/assets/images/bg6.jpg"/>
<divclass="mainLog"></div>
<divclass="sysTitle"></div>
<div class="buttonContainer"id="dvButtonContainer">
<div class="menuButton"id="btnOD">OD分析</div>
</div>
CSS:
body{ height:100%; width:100%;overflow:hidden;}/*背景圖覆蓋body100%*/
#bgImg{ height:100%; width:100%;position:absolute; margin:0px; padding:0px;}
.buttonContainer{ height:80%;width:80%;position:absolute; left:10%;top:100px;background:url("../src/assets/images/bg1_trans2.png");background-size:cover;box-shadow:5px5px 5px rgba(0,0,0,.6);}
.mainLog{ position:absolute;left:150px; width:422px; height:96px;background:url("../src/assets/images/logo_main_top.png")}
.sysTitle{ position:absolute;left:550px; width:300px; height:96px;background:url("../src/assets/images/gisTitle.png")}
.menuButton{ width:179px; height:48px;position:absolute; top:50px; left:450px; background-color:rgb(0, 54, 112);color:White; font-size:26px; font-family: 微軟雅黑; font-weight:bold; cursor:pointer; text-align:center;line-height:48px;}
.menuButton:hover{box-shadow:5px 5px 5pxrgba(0,0,0,.6);color:Yellow; position:absolute; top:45px; left:445px;}
#dvFrameOD{ width:100%; height:100%;position:absolute; left:0px; top:0px; z-index:3;background-color:rgba(255,255,255,1); border: 1px solid #FFFFFF; box-shadow: 5px 5px 5pxrgba(0,0,0,0.3);}
#dvFrameOD iframe{ frameborder:0;scrolling:no; height:100%; width:100%;}
效果：
布局 圖片按寬度拉升/完全覆蓋
HTML
<div id="dvBackGround">
</div>
CSS
#dvBackGround{position:absolute;top:54px;width:100%; height:100%;background:url("../src/assets/images/GISIndex/rest.png");}
JS
$("#dvBackGround").css("backgroundSize",document.documentElement.clientWidth + "px");//按寬度拉伸背景
完全覆蓋：cover
布局 div居中
方法1：設置position
Css:
#dvPanel{ position:absolute; top:80px;width:785px; height:458px;background:url("../src/assets/images/GISIndex/panal.png");}
Js:
$("#dvPanel").offset({ left:(document.documentElement.clientWidth - 768) / 2 });//panel居中
例2：
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Inserttitle here</title>
<style type="text/css">
#dvCenter{line-height:100px; text-align:center;}
</style>
</head>
<body>
<div style=" height:100px; width:150px; border:solid 1px rgb(0,0,0)">
<div id="dvCenter">年</div>
</div>
</body>
</html>
效果：
方法2：margin auto
布局 文本 豎直居中
line-height:容器高度
布局 獲取元素的坐標,寬高
取
$(“divContent”).offset().top
$(“divContent”).height()
設置：
$(“divContent”).offset({top:100})
$(“divContent”).height(200)
布局 offset設置 位置(僅對可見(jiàn)元素有效)
$("#dvToolBarSlider").show();
$("#dvToolBarSlider").offset({left: (parseInt($(this).offset().left) + 4), top: (parseInt($(this).height()) +5) }); //位置
備注：必須先show再 offset, 否則位置出現意外值
布局 使用margin的情況
布局 IEpadding
實(shí)際width=width+padding-left +padding-right
實(shí)際height=height+padding-top+padding-bottom
設置：width,height往小里算，加上padding 才是真實(shí)
全屏/下懸浮 -全屏
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#whole{ height:800px; border:1px solid#000000; overflow:hidden;}
#down{height:100%; background:#0000ff;overflow:scroll;}
#up{ background:#00ff00;}
</style>
<scripttype="text/javascript">
function setHeight() {
document.getElementById("whole").style.height= document.documentElement.clientHeight + "px";
document.getElementById("up").style.height =document.documentElement.clientHeight + "px";
}
</script>
</head>
<bodyonload="setHeight()">
<divid="whole">
<divid="up"></div>
<divid="down"></div>
</div>
</body>
</html>
下懸浮-彈出切換
CSS
/*grid 列寬,其余部分在js/dgrid/css/dgrid*/
.gridRegionMin{z-index:2; overflow:hidden;background:#ffffff;position:relative;height:250px;}/*表格*/
.gridRegionMin #grid{height:230px;}/*下anchor 關(guān)鍵*/
.gridRegionFull{z-index:3;overflow:hidden;position:absolute;width:1300px; height:500px;background:#ffffff;top:50px;left:50px;}/*表格彈出顯示*/
.gridRegionFull #grid{ height:480px;}/*全顯示*/
.gridRegionHide{display:none;}
display 屬性
inline-table和inline-block
結論：元素位置意料外：
1.核對寬高
2.嘗試display其它屬性
時(shí)間代價(jià)：1h
評價(jià)：值
背景：
<div class="dvMain">
<div class="dvML dvML-HS">
<div id="dvMap"></div>
<div id="dvStat"></div><!--地址面板-->
</div>
<div class="dvMR dvMR-WT">
</div>
</div>
.dvML-HS {display: inline-block;}
.dvML-HS {display: inline-table;}
HTML
3個(gè)控制按鈕
<div id="gridRegion"class="gridRegionHide"><!--表格-->
<divclass="liteBlue h20"><span class="closeIcon"id="spanCloseGrid"></span><span class="maxIcon"id="spanMaxGrid"></span><span class="minIcon"id="spanMinGrid"></span></div>
</div>
JS
$("#spanMaxGrid").on("click",function () {//maxGrid
$("#gridRegion").removeClass("gridRegionMin").removeClass("gridRegionHide").addClass("gridRegionFull");
dojo.byId("rightPanel").style.height= document.documentElement.clientHeight + "px";
map.resize();
});
$("#spanMinGrid").on("click", function () {//minGrid
$("#gridRegion").removeClass("gridRegionFull").removeClass("gridRegionHide").addClass("gridRegionMin");
dojo.byId("rightPanel").style.height =document.documentElement.clientHeight-250 + "px";
map.resize();
});
$("#spanCloseGrid").on("click", function () {//closegrid
clearRoutes();
dojo.byId("rightPanel").style.height =document.documentElement.clientHeight + "px";
map.resize();
$("#gridRegion").removeClass("gridRegionFull").removeClass("gridRegionMin").addClass("gridRegionHide");
window.grid.set('store', new dojo.store.Memory({ data: [] }));
});
Table
Table Excel
效果：
http://localhost/webLab/edit.html
字數*（fontsize+2）-2
步驟
步驟
描述
1
字號是多少?
(1) tr行高= fontsize+2*3
(2)列寬= 字數*fontsize+(字數-1)*2
2
有幾列？每列寬多少,固定列寬？Table寬多少,固定列寬？
(1)5列
(2)td1 2*14+2*1=30px; max-width:30px;
td2 4*14+2*3=62px; max-width:62px;
td3 100px ….
td4 6*14+5*2=94px;
td5 15*14+2*14=14*17=238px;
(3)Table寬
{; width:100%} //table寬=列寬之和
(4)dvData寬
30+62+100+94+238=524px;
{
width:524px;
}
(5)如果需要滾動(dòng)條：
將dvData的overflow：scroll
4
td不換行，超過(guò)文本隱藏？
td{overflow:hidden; text-overflow:ellipsis;white-space:nowrap;}
5
表格邊界如何設置？
Td:border-top:
Border-left
Table:border-right;
Border-bottom;
最后：table的基本樣式別忘，內聯(lián)。
Cellpadding=0;cellspacing=0;
舉例
<!DOCTYPE htmlPUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<link href="css/edit.css"rel="StyleSheet">
<title>編輯</title>
</head>
<body>
<table id="tbInfo"cellspacing=0 cellpadding=0>
<tr><td class="col1">姓名</td><td class="col2"><input type="text"></td><td class="col3" rowspan=5></td><td class="col4">所屬小區</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">性別</td><td class="col2"><input type="text"></td><td class="col4">樓號</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">曾用名</td><td class="col2"><input type="text"></td><td class="col4">單元及門(mén)牌號</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">身高</td><td class="col2"><input type="text"></td><td class="col4">省-市-縣-區</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">出身日期</td><td class="col2"><input type="text"></td><td class="col4">出生地</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">身份證號</td><td class="col2" colspan=2><input type="text"></td><td class="col4">工作單位</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">聯(lián)系電話(huà)</td><td class="col2" colspan=2><input type="text"></td><td class="col4">職務(wù)</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">籍貫</td><td class="col2" colspan=2><input type="text"></td><td class="col4">戶(hù)籍所在地</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">民族</td><td class="col2" colspan=2><input type="text"></td><td class="col4">現居住地址</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">血型</td><td class="col2" colspan=2><input type="text"></td><td class="col4">人員編號</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">教育程度</td><td class="col2" colspan=2><input type="text"></td><td class="col4">與戶(hù)主關(guān)系</td><td class="col5"><input type="text"></td></tr>
<tr><td class="col1">婚姻狀況</td><td class="col2" colspan=2><input type="text"></td><td class="col4">人員屬性</td><td class="col5"><input type="text"></td></tr>
</table>
</body>
</html>
css
*{margin:0px;padding:0px;font-size:14px;font-family:Microsoft Yahei;}
#tbInfo{
table-layout:fixed;width:582px;
border-collapse:collapsed;border-right:1px solid #000;border-bottom:1px solid #000;
}
tr{line-height:20px;}
td{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
border-left:1px solid #000;border-top:1px solid #000;
text-align:center;
}
td input{
width:100%;
border:none;
text-align:center;
}
.col1{width:62px;max-width:62px;}
.col2{width:78px;max-width:78px;}
.col3{width:100px;width:100px;}
.col4{width:94px;max-width:94px;}
.colS5{width:238px;max-width:238px;}
雙滾動(dòng)條table
效果：
結構：
CSS：
/*dvRegion*/
#dvRegion{
display:inline-block;
overflow:hidden;
}
/*dvHead*/
#dvHead{overflow:hidden;}
.dvTH-WF{width:939px;}
/*表頭*/
#tbHead{
height:20px;
width:100%;
table-layout:fixed;
}
.col1S{width:40px;}/*序號*/
.col2S{width:130px;}/*名稱(chēng)*/
.col2F{width:200px;}
.col3S{width:130px;}/*地址*/
.col3F{width:200px;}
.col4F{width:90px;}/*活躍商戶(hù)*/
.col5F{width:80px;}/*編號*/
.col6F{width:100px;}/*內部編號*/
.col7F{width:90px;}/*設備狀態(tài)*/
.col8F{width:136px;}/*收單安裝日期*/
.col9F{width:113px;}/*儲值卡安裝日期*/
.col10F{width:113px;}/*儲聯(lián)卡安裝日期*/
.col11S{width:74px;}/*操作*/
/********************/
/*數據*/
#dvData{
overflow:scroll;
}
.dvData-WF{width:956px;}
.dvData-HS{height:420px;}
#tbData{
width:100%;
table-layout:fixed;
}
表頭聯(lián)動(dòng)事件：
$("#dvData").on("scroll",function(e){
varleft=e.target.scrollLeft;
$("#dvHead").scrollLeft(left);
console.log("scrollis trigger");
return false;
});
Table組件
序號
類(lèi)別
1
日期框 (f) jquery-ui-datePicker
2
正數框 （身高）(f)
3
身份證號框 (f)
4
下拉框(select) (民族、血型、性別、婚姻狀況、教育程度、省、市、縣、區、)
5
電話(huà)框 (f)
select
結構
<select class="Info"data="Gender" id="selGender"><optionvalue="1">男</option><option value="0">女</option></select>
取值:
$(“selGender”).val();
Table CRUD
效果：
效果項
描述
列頭和內容分離
列頭可排序
滾動(dòng)條
Td固定寬
整體布局：
<div><tableid=”tbHead”></table></div>
<div><table id=”tbData”></table><div>
步驟
大項
序號
描述
列頭和表數據
1
(1)字體是多少？
定行高。
從格子包含的字數，定列寬。
(2)有哪些列，每列寬多少，得td1,td2,…tdn的樣式
{
width:;
max-width:;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
(3)得出table的寬度tbWidth
2
(1)Table 3個(gè)基本樣式。
(border-collapse,cellspacing,cellpadding html內)
(2); width: tbWdith；
3
(1)列頭生成函數。 td樣式指向1
dvHead.html();
(2)數據生成函數。 td樣式指向1
dvData.html();
排序
1.界面
(1)tbHead中的每個(gè)td中,div,positionRelative;
(2)div內放span標題;
span升,position:absolute;8*8;
span降,position:absolute;8*8;
2.排序方法編寫(xiě)
編輯功能
1.編輯窗體
2.保存和取消
刪除功能
1.獲取要刪除行
2.從table中刪除行
3.從array中刪除
添加功能
1.添加窗體
2.添加到dataArray
搜索功能
Table 3個(gè)基本樣式
border-collapse:collapse
cellspacing=”0”寫(xiě)在html標簽里 //td間距為0
cellpadding=”0” 寫(xiě)在html標簽里 //td內邊距為0
Table 表頭和數據錯開(kāi)
<html>
<head>
<meta http-equiv="X-UA-Compatible"content="IE=10">
<style type="text/css">
*{margin:0px; padding:0px;}
#dvHead{
width:800px;
}
#dvData{
width:815px;
overflow:scroll;
}
#tbHead,#tbData{
table-layout:fixed;
border-collapse:collapsed;
}
#tbHead{
border-right:1pxsolid #000;
}
#tbData{
border-right:1pxsolid #000;
border-bottom:1pxsolid #000;
}
.colHead{
font-weight:bold;
}
td{
border-top:1pxsolid #000;
border-left:1pxsolid #000;
text-align:center;
}
.td1{
width:50px;
max-width:50px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
.td2{
width:100px;
max-width:100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.td3{
width:75px;
max-width:75px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="dvHead">
<table id="tbHead"cellspacing="0" cellpadding="0">
<tr><td class="td1 colHead">序號</td><td class="td2 colHead">姓名</td><td class="td3 colHead">性別</td></tr>
</table>
</div>
<div id="dvData">
<table id="tbData"cellspacing="0" cellpadding="0">
<tr><td class="td1">1</td><td class="td2">上杉謙信321312312312312</td><td class="td3">男</td></tr>
<tr><td class="td1">2</td><td class="td2">武田信玄</td><td class="td3">男</td></tr>
<tr><td class="td1">3</td><td class="td2">織田信長(cháng)</td><td class="td3">男</td></tr>
<tr><td class="td1">4</td><td class="td2">立花道雪</td><td class="td3">男</td></tr>
</table>
</div>
</body>
</html>
按字符串列排序
/*obj.colName:列名,obj.sortMethod:0升序,1 降序
* 按字符串值排序
*/
function sortColumn(obj){
varcolName=obj.colName;
vartype=obj.sortMethod;
varsortFun=null;
if(type==0){
sortFun=function(a,b){
return eval("a."+colName).localeCompare(eval("b."+colName));
};
}
else{
sortFun=function(a,b){
return eval("b."+colName).localeCompare(eval("a."+colName));
};
}
varbeforeStr="";
for(vari=0;i<=residentData.length-1;i++){
//beforeStr+=residentData[i].Name;
beforeStr+=eval("residentData["+i.toString()+"]."+colName);
}
residentData.sort(sortFun);
varafterStr="";
for(vari=0;i<=residentData.length-1;i++){
afterStr+=eval("residentData["+i.toString()+"]."+colName);
}
console.log("排序前:"+beforeStr+"\n排序后:"+afterStr);
$("dvDataArea").empty();
drawTable(residentData);
}
Td內部固定span
<td class="col3"><divclass="pRelative"><div id="dvName"class="dvFilter OperUI"></div><span data="Name" class="spanClearOperUI" title="清空條件"></span></div></td>
.spanClear{background:url("../img/pwd_sprite.png") no-repeat 0px-286px rgba(0,0,0,0);display:inline-block;width:13px;height:13px;
cursor:pointer;
position:absolute;bottom:3px;
}
.pRelative{position:relative;}
其它
table內容不可選
<body onselectstart="returnfalse;">
間色方案
1.藍白間色
.oddRow {rgb(180,205,230);}
.evenRow{rgb(230,230,230)}
Table 獲取row 的序號
//獲取row在table中的序號
this.getRowIndex=function(rowDom){
varrows=$(rowDom).prevUntil("table");
returnrows.length;
};
--
table.rows[i]
Table獲取row的某個(gè)td
tr.cells[i];
td取文本
td.innerText
cellspacing,cellpadding注意
只能在html中設置，在css中設置無(wú)效
rowspan ,colspan
只能在html中設置，在css中設置無(wú)效
Table性能
性能對比
結論：html方法，要將渲染時(shí)間控制在30ms以?xún)取?div style="height:15px;">
實(shí)現方式：分頁(yè).
詳細：在2800行時(shí)，html的執行方法是20ms，但渲染效時(shí)間是2800ms。
行數100時(shí)，htmlStr渲染時(shí)間是30ms
背景：從縮略表，切換到完整表。
11個(gè)字段，2800條數據
數據量
處理方式
時(shí)間
2800條
removeClass.addClass
2800ms
2800條
shortTbStr；
longTbStr；
shift:
$(“#tbDiv”).html(Str)
1300ms
1000條
shift:
$(“#tbDiv”).html(Str)
100ms
500條
shift:
$(“#tbDiv”).html(Str)
90ms
300條
shift:
$(“#tbDiv”).html(Str)
60ms
200條
50ms
100條
30ms
滾動(dòng)條
scrollLeft
$("#dvResult").scrollTop(300);
$("#dvResult").scrollLeft(100);
相對滾動(dòng)值
尺寸-位置
尺寸：
$(“selector”).width(20)
$(“selector”).height(20)
width() 覆蓋 addClass的影響
$textDiv.width(0);
$textDiv.addClass("shortMode");
.shortMode{
width:60px;
text-overflow:ellipsis;
}
$testDiv[0].style.width的取值：是0，不是60；
原因：
width 產(chǎn)生 inline屬性，優(yōu)先于class屬性
解決方法：
$textDiv.removeAttr("style");
$textDiv.addClass("shortMode");
或者
$textDiv.css("style",””);
$textDiv.addClass("shortMode")
求width, 從text font-size
$tempDiv.width($.trim($tempDiv.prop("innerHTML")).length*$tempDiv.css("font-size").match(/\d+/g)[0]);
top，left：
元素離父元素的距離
$(“selector”).css(“top”,”100px”);
$(“selector”).css(“l(fā)eft”,”100px”)
offsetLeft和offsetTop
offsetLeft:元素離窗體左側的距離
$nextOne.prop("offsetLeft")
position.left | position.top
元素相對于父元素的位置
$(e.target).position().left
Jquery Ajax
$.ajax({
type:"post",
contentType:"application/x-www-form-urlencoded",
url:"./testServlet",
processData:false,//是否將data轉成key/value
cache:false,
data:data,
success:function(rData){
console.log("getData finished,data is:"+rData);
},
error:function(url,status,exption){
console.log("failto get Response");
}
});
dataType參數
作用：預期服務(wù)器返回的數據類(lèi)型。
可用值：text/xml/html/script/json/jsonp
詳細參見(jiàn)：Jquery1.7 chm
Ajax請求文件總結
結論：Servlet返回文件，被放到Ajax的回調函數中，不會(huì )顯示另存文件。
語(yǔ)句
回調函數中的data
是否提示另存為
當前窗體頁(yè)是否改變
$.get("../Export/test.xls");
0M8R4KgxGuE...
否
否
$.get("edit.html");
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv
否
否
完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../lib/jquery-2.0.2.min.js"></script>
<title>TestPage</title>
<script type="text/javascript">
$(document).ready(function(){
bindEvents();
});
function bindEvents(){
$("#btnTest1").on("click",function(){
$.get("../Export/test.xls",function(rData){
console.log("responseData is:"+rData);
});
});
$("#btnTest2").on("click",function(){
$.get("edit.html",function(rData){
console.log("responseData is:"+rData);
});
});
}
</script>
</head>
<body>
<input type="button" id="btnTest1" value="getXls"/>
<input type="button" id="btnTest2" value="getHtml"/>
</body>
</html>
下載文件 (彈出保存文件提示)
序號
概要
具體
1
用anchor實(shí)現
(靜態(tài))
在頁(yè)面放一個(gè)隱藏的<a>, a的href指向下載文件，并觸發(fā)click事件
2
用iframe實(shí)現
(靜態(tài))
在頁(yè)面放一個(gè)隱藏的<iframe>, iframe的src指向下載文件
3
用form實(shí)現
(靜態(tài))
Form的action 指向下載文件，from.submit()
4
用form實(shí)現
(動(dòng)態(tài),推薦)
Form.submit()之后，瀏覽器接收文件流，顯示另存為
用anchor實(shí)現代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../lib/jquery-2.0.2.min.js"></script>
<title>TestPage</title>
<script type="text/javascript">
$(document).ready(function(){
bindEvents();
});
function bindEvents(){
$("#btnTest1").on("click",function(){
//提示保存窗體
$("#aDownLoad")[0].href="../Export/test.xls";
$("#aDownLoad")[0].click();
});
}
</script>
</head>
<body>
<input type="button" id="btnTest1" value="getXls"/>
<a id="aDownLoad" style="display：none"></a>
</body>
</html>
用iframe實(shí)現
$("#btnTest1").on("click",function(){
//提示保存窗體
$("#frmDownLoad")[0].src="../Export/test.xls";
});
<iframe id="frmDownLoad" style="display:none"></iframe>
用form實(shí)現
說(shuō)明：form action action執向url。
form.submit(),取得文件流。
form.remove()刪除。
function bindEvents(){
$("#btnTest1").on("click",function(){
$(document.body).append('<form id="frmDownload" method="post" action="../Export/test.xls" class="dNone" ></form>');
$("#frmDownload")[0].submit();
$("#frmDownload").remove();
});
}
<input type="button" id="btnTest1" value="getXls"/>
<form id="frmDownload" style="display:none"></form>
用form實(shí)現（文件流）
說(shuō)明：form actionaction執向servlet。
將postData放在input的value中。
else if($(e.target)[0].id=="inpExport"){
$(document.body).append('<formid="frmDownload" method="post"action="../resiCrud?para" class="dNone" ><inputid="inpPostData" name="postData"type="text"></form>');
varpostData={cmd:5,data:null};
$("#inpPostData").val(JSON.stringify(postData));
$("#frmDownload")[0].submit();
$("#frmDownload").remove();
}
例2
var $tempForm=$("<formmethod='post' action='../ShopCudes?2'></form>");
$(document.body).append($tempForm);
$tempForm[0].submit();
$tempForm.remove();
服務(wù)端防止亂碼
if(queryStr.equals("0")){
request.setCharacterEncoding("UTF-8");//防止漢字亂碼
StringpostData=request.getParameter("postData");
System.out.println("postData:"+postData);
Condition cond=newGson().fromJson(postData,Condition.class);
Jquery輔助方法
$.type() 獲取7種類(lèi)型
返回值:字符串
console.log($.type(true));
console.log($.type(3.1415));
console.log($.type("helloworld"));
console.log($.type([1,2,3]));
console.log($.type({}));
console.log($.type(function(){alert("hello wold")}));
console.log($.type(new Date()));
Boolean, number,string, array,object,function,date
備注：自定義類(lèi)型 object
$.trim() 字符串
Console.log($.trim(“ |hello world| ”))
|hello world|
判斷 $.isFunction
$.isArray
$.isEmptyObject
$.isEmptyObject({})
$.isNumeric
數組 元素批處理$.map(array,function(n){n})
返回值：新數組
描述：操作array中的每個(gè)元素，返回新數組
Jquery-選擇
查找 $(“sel”).find(“”)
選擇第i個(gè)元素
<table>
<tr><td>Header1</td></tr>
<tr><td>Value1</td></tr>
<tr><td>Value2</td></tr>
</table>
$("tr:eq(1)")
返回:
[<tr><td>Header1</td></tr>]
parent()獲取父元素
$(e.target).parent()
parents找一類(lèi)祖先元素
<ulclass="level-1">
<liclass="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<liclass="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<liclass="item-1">1</li>
<liclass="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<liclass="item-c">C</li>
</ul>
</li>
<liclass="item-iii">III</li>
</ul>
$("li.item-a").parents(".level-1");
效果：
Array: [0] HTMLElement <ulclass="level-1">
parentsUtil查找多個(gè)祖先
<ulclass="level-1">
<liclass="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<liclass="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<liclass="item-1">1</li>
<liclass="item-2">2</li>
<liclass="item-3">3</li>
</ul>
</li>
<liclass="item-c">C</li>
</ul>
</li>
<liclass="item-iii">III</li>
</ul>
代碼：
$(“.item-a”).parentsUtil(“l(fā)evel-1”)
效果:
Array:[0] htmlElement <ul class="level-2">
[1] htmlElement <liclass="item-ii">
所有兄弟
$('li#tmpCarrot').silblings().
之前兄弟
prevAll(exp)
prevUtil
之后兄弟
nextAll([expr])
孩子
.children()
備注：只選到孩子節點(diǎn)，不選孫。
屬性選擇
選擇 class=”oneItem”且 data=2的元素
$(".oneItem[data=2]").addClass("selectedRow");
后代選擇
方式
$(".dvAdRe-R2 .selectedRow")
備注：所有子孫
舉例2：
$("#disTb .mTable-selectedRow.dis-Col8");
Jquery-顯隱
軍規
css(“display”,”none”)
css(“display”,””)
備注：不要使用 hide和 show, 它是動(dòng)畫(huà)方法，性能低。它們是異步
Jquery-遍歷
$().each(function(I,item){})
Jquery插入
$(“”).after(string/JQObj)
描述:在元素后添加 兄弟元素
$(“#pItem”).after(“<b>Hello</b>”)
var $text=$(“#textInfo”);
$(“#pItem”).after($text)
$(“”).before(string/JQObj)
描述:在元素前添加 兄弟元素
類(lèi)比.after();
Jquery刪除
1.$().remove();
描述:$(“#div1”).remove();
document.getElementById(“div1”) 是 null
Jquery連寫(xiě)
解釋?zhuān)簩σ粋€(gè)jquery對象連續調用各種不同的方法
原來(lái)：
$('#dvResult').html('');
$('#dvResult'). addClass('dNone');
連寫(xiě)：
$('#dvResult').html('').addClass('dNone');
優(yōu)點(diǎn)：
減少代碼行數
prop和attr
attr：元素的內聯(lián)屬性
譬如：
<span class='mPager-spFL mPager-lPage'style=”width:25px” data=1>
removeAttr(“class”), removeAttr(“style”), removeAttr(“data”)都生效
prop:元素的屬性（通過(guò)ele.能夠訪(fǎng)問(wèn)到的）
prop(“innerHTML”)
prop(“offsetLeft”)//離容器左側的距離
.css樣式控制
原來(lái)：
$("#dvTip").css("left",obj.x+"px").css("top",obj.y+"px");
改寫(xiě)：
$("#dvTip").html(obj.text).css({"left":obj.x+"px","top":obj.y+"px"});
background-position
圖片右下角：0,0
向上：y++
向左：x++
ID樣式 優(yōu)先 class樣式
實(shí)驗1
#dvMap{
display:inline-block;
}
.dNone{
display:none;
}
<div id=”dvMap” class=”dNone”>測試div</div>
結果：div顯示
實(shí)驗2
#dvMap{
display:none;
}
.dNone{
display:inline-block;
}
<div id=”dvMap” class=”dNone”>測試div</div>
結果：div隱藏
結論：可變項寫(xiě)在id樣式中
Jquery-UI
2個(gè)引用項
datepicker
備注：參考jquery UI Reference
項
方法
設置語(yǔ)言為中文
引入 中文包(第二個(gè))
<script src="lib/jquery-ui-1.10.3/gxk/jquery.ui.datepicker-zh-TW.js"></script>
下拉選擇年、月
（1）顯示
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
（2）寬度控制
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{width:45% !important;}
年范圍
$( ".selector" ).datepicker({ yearRange: "2002:2012" });
//到今年
var thisYear=(new Date()).getFullYear().toString();
$("#inpBirthDate").datepicker({
yearRange:"1900:"+thisYear
});
日期范圍
maxDate:new Date(),
獲取日期
var currentDate = $( ".selector" ).datepicker( "getDate" );
清空日期
(1)backspace清空日期
$("#inpBirthDate").on("keyup",function(e){
if(e.keyCode == 8 || e.keyCode == 46){
$.datepicker._clearDate(this);
}
});
dialog
html
<div id="dialog" title="圖層管理">I'm in adialog</div>
創(chuàng )建
$("#dialog").dialog();
顯示
$("#dialog").dialog("open");
隱藏
$("#dialog").dialog("close");
判斷是否顯示
$("#dialog").dialog("isOpen");
樣式控制：jquery.ui.dialog.css
//彈出對話(huà)框
$("#dialog").dialog(
{closeText:"隱藏",
width:110,
minWidth:110,
maxWidth:120,
resizable:false,
position:[318,100],//position
title:"圖層管理"
}
);
slider
/*slder
屬性:
max:從最小到最大,滑動(dòng)幾次
orientation:vertical/horizonal, 朝向
Events:
slide:function(event,ui){
} //用戶(hù)滑動(dòng)slider 觸發(fā)，ui.value獲取當前值
方法:
1.slider("value")
$("#slider").slider("value");//獲取value
$("#slider").slider("value",10);//設置slidervalue
*/
$(document).ready(function() {
$("#slider").slider(
{max:10,
orientation:"horizonal",
slide:function(event, ui) {
console.log("slideis triggered,value is:"+ui.value);
}
});//10個(gè)等級
$("#vSlider").slider({max:10,orientation:"vertical"});//10個(gè)等級
});
拖動(dòng)排序項 sortable()
<head>
<link type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#sortable").sortable();
});
</script>
</head>
<bodystyle="font-size:62.5%;">
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
拖動(dòng)項 drag
<!DOCTYPE html>
<html>
<head>
<link type="text/css"/>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable { width: 100px; height: 70px;background: silver; }
</style>
<script>
$(document).ready(function() {
$("#draggable").draggable();
});
</script>
</head>
<bodystyle="font-size:62.5%;">
<div id="draggable">Dragme</div>
</body>
</html>
頁(yè)面間交互
主頁(yè)面-iframe-子頁(yè)面
引用項：simplemodal
<script src="../lib/jquery.simplemodal.1.4.4.min.js"></script>
if($(e.target).hasClass("dvAdd")){
$("#dvFrame").modal({
overlayCss:{backgroundColor:"rgb(64,64,64)"}
});
$("#dvFrame").removeClass("dNone");
$("#frmAddEdit").attr("src","edit.html?type=0");
}
css-html基礎
盒模型
W3C盒模型
IE盒模型
滾動(dòng)條
1.div滾動(dòng)條
設置水平滾動(dòng)值
//所有滾動(dòng)到最右側
$(".testScroll").each(function(i,item){
item.scrollLeft=item.scrollLeftMax;
});
獲取滾動(dòng)比率
//滾動(dòng)條, 控制透明度
$(".testScroll").on("scroll",function(e){
console.log("scrollis triggered,e.target.scrollLeft:"+e.target.scrollLeft);
varrate=(e.target.scrollLeft/e.target.scrollLeftMax).toFixed(2);
});
2.window滾動(dòng)
window.scrollTo();
顏色
rgb 透明度
background-color:rgb(255,255,255,0.6)
間色
邊框
frame 消除邊框
/*summaryFrame*/
#sumaryFrame{ width:100%; height:100%;border:none;}
強制生效css
font-size:10px !important;
備注:不會(huì )被其它font-size:設置覆蓋
css文件引用圖片
說(shuō)明：css中引用圖片是相對于css文件的位置.
html:
linkhref=”css/index.css”
css
.dvMain{background:url(../img/background.png)}
js 引用文件
是相對于父頁(yè)面的位置
控件
滾動(dòng)條
備注：使用jquery-UI的scroll比較好
1.html實(shí)現
路子:div 里面設置
背景:用于控制圖層透明度
.testScroll{
overflow:scroll;
display:inline-block;
width:70px;
height:16px;/*scroll的最小高度*/
font-size:100px;
}
<div class="testScroll">.................................</div>
2.獲取比率
拖拽移動(dòng)元素
/*路子:1.綁定目標(divItem)的mouseDown
* 2.綁定活動(dòng)區域divRange的moumove和mouseUp
*/
$("#divItem").on("mousedown",function(e){
console.log("mousedowntriggered");
if(e.button!=0){
return false;
}
gMovable=true;
});
$("#divRange").on("mouseup",function(e){
console.log("document.mouseuptriggered");
gMovable=false;
return false;
});
$("#divRange").on("mousemove",function(e){
console.log("mousemovetriggered");
if(gMovable){
$("#testDiv").css("left",e.clientX+"px");
$("#testDiv").css("top",e.clientY+"px");
return false;
}
});
拖拽改變 順序
效果:
一個(gè)框中放3個(gè)div,mouseDown div,拖拽 放到另一個(gè)div上,則改變div順序
結構:
html:
<div id="divRange">
<div class="divItem"style="background-color:#ff0000" id="div1"></div>
<div class="divItem"style="background-color:#00ff00" id="div2"></div>
<div class="divItem"style="background-color:#0000ff" id="div3"></div>
</div>
路子:
對divRange綁定mouseDown事件,如果target.HasClass(“divItem”)
記錄divItem,存入gItem.記錄divItem.outerHTML,存入gItemString
對divRange綁定mouseUp事件，
如果鼠標不在divRange范圍內，return false;
根據位置獲取targetItem，和after or before.
如果targetItem==gItem，return false;
移除gItem
targetItem.before或者targetItem.after(gItemString);
js:
$("#divRange").on("mousedown",function(e){//記錄movingItem
console.log("mousedowntriggered,id:"+e.target.id);
if(e.button!=0){
return false;
}
gMovable=true;
gItemString=e.target.outerHTML; //記錄被刪元素的htmlString
gItem=$(e.target);
return false;
});
$("#divRange").on("mouseup",function(e){
console.log("document.mouseuptriggered");
if(!gMovable){return false;}
gMovable=false;
vardeltaInfo={deltaX:e.clientX-$(this).offset().left,deltaY:e.clientY-$(this).offset().top};
//deltarInfo:鼠標松開(kāi)位置,相對于圖層控件的坐標.
//如果松開(kāi)位置超出圖層控件
if(deltaInfo.deltaX<=0||deltaInfo.deltaY<=0||deltaInfo.deltaX>=$(this).width()||deltaInfo.deltaY>=$(this).height()){
return false;
}
varnewLocInfo=getItemByPoint(deltaInfo); //獲取location
if(newLocInfo.neighbor[0]==gItem[0]){return false;}
gItem.remove();
if(newLocInfo.loc==0){newLocInfo.neighbor.before(gItemString);}
else{newLocInfo.neighbor.after(gItemString);}
return false;
});
}
var gItem=null;//要被移動(dòng)的item
var gItemString="";
var gTargetItem=null;//要移到哪個(gè)Item的前面
css:
/*測試div*/
#divRange{
width:25px;
height:75px;
display:inline-block;
overflow:hidden;
position:absolute;
top:50px;
left:50px;
}
.divItem{
position:relative;/*默認位置是static,設置left,top無(wú)效*/
width:25px;
height:25px;
display:block;
background-color:rgb(0,0,255);
}
鼠標提示
效果：
html：
div id="dvTip" class="dNone"></div>
js：
$(".operUI").on("mouseover",function(e){
//顯示td信息
if(e.target.tagName.toUpperCase()=="TD"){
vartempObj={x:e.clientX,y:e.clientY,text:e.target.innerHTML};
shopMisUtil.tipTool.show(tempObj);
return false;
}
});
$(".operUI").on("mouseout",function(e){
if(e.target.tagName.toUpperCase()=="TD"){
shopMisUtil.tipTool.hide();
}
});
/*全局方法，類(lèi)
* */
var shopMisUtil={
//提示工具
tipTool:{
show:function(obj){
$("#dvTip").html(obj.text);
$("#dvTip").css("left",obj.x+"px").css("top",obj.y+"px");
$("#dvTip").removeClass("dNone");
},
hide:function(){
$("#dvTip").addClass("dNone");
},
clear:function(){
$("#dvTip").html("");
}
}
};
Jquery插件
msgBox
msgbox
//--------------
$.msgbox("請選擇O點(diǎn)線(xiàn)路。", {
buttons: [ {
type: "cancel",
value: "確定"
}]
});
msgBox2
原因：上msgBox好像要收費
http://jquerymsgbox.ibrahimkalyoncu.com/blockUI
//官網(wǎng)：http://www.malsup.com/jquery/block/#overview
$.blockUI({message:"從百度獲取地址中..."});//blockUI
$.blockUI();
Blockingwith a custom message:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
Blockingwith custom style:
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
Tounblock the page:
$.unblockUI();
Ifyou want to use the default settings and have the UI blocked for all ajaxrequests, it's as easy as this:
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
simpleModal 利器
項
值
引用js
jquery.simplemodal.1.4.4.min.js
工程
http://www.ericmmartin.com/projects/simplemodal/
模態(tài)顯示div
$("#sample").modal()
點(diǎn)擊模態(tài)外任意點(diǎn)關(guān)閉
$("#sample").modal({overlayClose:true})
設置背景顏色
$("#sample").modal(overlayCss:{backgroundColor:"#fff"})
顯示html字符串
$.modal("<div><h1>SimpleModal</h1></div>");
關(guān)閉按鈕圖片
圖片地址：
http://simplemodal.googlecode.com/svn/tags/1.3/test/img/x.png在css文件添加
/*關(guān)閉圖標*/
#simplemodal-container a.modalCloseImg{
background:url(../img/x.png)no-repeat; /* adjust url as required */
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-15px;
right:-18px;
cursor:pointer;
}
關(guān)閉
$.modal.close();
使用frame的情況關(guān)閉modal
top.closeModal();123
修復removeExpression不能使用
未壓縮版code Line239,替換
// $.support.boxModel is undefined if checked earlier
//browser.ieQuirks = browser.msie && !$.support.boxModel;
browser.ieQuirks = browser.msie && (document.compatMode === "BackCompat");
備注：來(lái)源
http://stackoverflow.com/questions/12046242/simple-modal-jquery-1-8-0-and-ie9
meta
X-UA-Compatible (控制文檔模式(document mode))
瀏覽器 IE meta 設置文檔模式(document mode)
onMouseDrag等事件，IE, 文檔模式是IE9/IE8才顯示。
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9">
備注：meta 不需要結束標記
iframe X-UA-Compatible和 parentPage Mode
瀏覽器規則：
Any frames would run in the same X-UA-Compatible as their parent page
解決思路:
讓iframe中的mode同 parent Page或者 讓 parent Page 同步 iframe的mode.
X-UA-Compatible的所有取值
The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.
Here are your options:
"IE=edge"
"IE=10"
"IE=EmulateIE10"
"IE=9"
"IE=EmulateIE9
"IE=8"
"IE=EmulateIE8"
"IE=7"
"IE=EmulateIE7"
"IE=5"
X-UA-Compatible值
說(shuō)明
IE=5
讓瀏覽器使用Quirks mode來(lái)顯示，實(shí)際上是使用Internet Explorer 7 的 Quirks 模式來(lái)顯示內容，這個(gè)模式和IE5非常相似。
IE=edge
這個(gè)設置是讓IE使用當前的最高版本進(jìn)行文檔的解析，官方文檔指明，edge模式僅適用在測試環(huán)境，不建議在生產(chǎn)環(huán)境中使用
IE=7
使用標準IE7來(lái)處理
IE=EmulateIE7
模擬IE7來(lái)處理，遵循 <!DOCTYPE> 指令，如果文檔有當前有一個(gè)合法的<!DOCTYPE>，就使用IE7模式，否者使用Quirks模式（Internet Explorer 5 Quirks），對于大部分網(wǎng)站來(lái)說(shuō)，這是首選的兼容性模式
IE=8
標準IE8
IE=EmulateIE8
模擬IE8，遵循 <!DOCTYPE> 指令，參照IE=EmulateIE7說(shuō)明
IE=9
標準IE9
IE=EmulateIE9
模擬IE9，遵循 <!DOCTYPE> 指令，參照IE=EmulateIE7說(shuō)明
chrome=1
強制使用Chrome，需要IE下Chrome插件支持
IE=EmulateIE10
模擬IE10
IE=10
標準IE10，遵循 <!DOCTYPE> 指令，參照IE=EmulateIE7說(shuō)明
Content-type設置（設置網(wǎng)頁(yè)的編碼）
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
備注:frame中的content-type獨立于parent Page
控制瀏覽器模式(browser mode)
HTML5 基礎
差異清單
序號
項
之前
現在
效果
1
<!Doctype>
<!DOCTYPE html .....>
<!DOCTYPE html>
適用所有doctype
2
Meta-編碼類(lèi)型
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
charset="utf-8″ />
簡(jiǎn)化
3
<Frame/>、<FrameSet/>等標簽停用
4
語(yǔ)義化標記
音頻/視頻 （不需要任何插件）
畫(huà)布
數據存儲
拖放
可編輯
Form表單增強
HTML5 實(shí)例
nav,footer,header,aside無(wú)div布局
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>HTML5Semantic Markup Demo: Cross Browser</title>
<link rel="stylesheet"href="html5reset.css" type="text/css" />
<link rel="stylesheet"href="html5semanticmarkup.css" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>PageHeader</h1>
<h2>PageSub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<header>
<h1>ArticleHeading</h1>
<time datetime="2010-05-05"pubdate>May 5th, 2010</time>
</header>
<p>Lorem ipsumdolor sit amet, consectetur adipiscing elit.</p>
<section>
<header>
<h1>SectionHeading</h1>
</header>
<p>Ut sapienenim, porttitor id feugiat non, ultrices non odio.</p>
<footer>
<p>SectionFooter: Pellentesque volutpat, leo nec auctor
euismod</p>
</footer>
</section>
<section>
<header>
<h1>SectionHeading</h1>
</header>
<p>Lorem ipsumdolor sit amet, consectetur adipiscing elit.</p>
<figure>
<img src="item-1.png"alt="Club">
<img src="item-2.png"alt="Heart">
<img src="item-3.png"alt="Spade">
<img src="item-4.png"alt="Diamond">
<figcaption>FigCaption:Club, Heart, Spade and
Diamond</figcaption>
</figure>
<p>Ut sapienenim, porttitor id feugiat non, ultrices non odio</p>
<footer>
<p>SectionFooter: Pellentesque volutpat, leo nec auctoreuismod
est.</p>
</footer>
</section>
<footer>
Article Footer
</footer>
</article>
<aside>
<header>
<h1>SiderbarHeading</h1>
</header>
<p>Ut sapienenim, porttitor id feugiat non, ultrices non odio.</p>
</aside>
<footer>
Page Footer
</footer>
</body>
</html>
音頻
兼容性：
IE9 及以上版本
支持的格式
音頻:ogg(ogg, oga), mp3, wav, AAC
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<audio controls>
<sourcesrc="../aud/Yamato.mp3"/>
</audio>
</body>
</html>
瀏覽器兼容
IE iframe jquery Page
背景：
主頁(yè)面 html:
<div id="dvMod" class="dNone"><iframeclass='engisFr' src='engiInd.html'></iframe></div><!--彈出窗體-->
//---
主頁(yè)面腳本
//顯示engis頁(yè)面
showEngis:function(){
$.modal($(".engisFr"));
},
engiInd.html
<script src="../lib/jquery-2.0.2.min.js"></script>
</head>
<body>
<div id="dvBody">
<div id="dvTb"></div>
</div>
問(wèn)題：
報錯：
解決方式：在子頁(yè)面(engiInd.html
)使用jquery-1.8.3.min.js
<script src="../lib/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="dvBody">
<div id="dvTb"></div>
</div>
盡管:
但程序能正常運行
視頻
支持的格式：
視頻:ogg(ogv), H.264 (mp4)
<video width="480" height="360"controls preload="none"
poster="videoframe.jpg">
<sourcesrc="../vid/t13-2-16_x264.mp4"type="video/mp4"/>
</video>
