CSS-JQUERY笔记

Ready

$(document).ready(function(){

 

})

 

 

 

 

 

 

 

Input_div_span

Input-长度限制

<input maxLength="2">

 

Input-仅允许输入数值

//绑定时刻输入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实现

路子:

(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">特殊时段</span></li>

</ul>

</body>

按钮:Div实现图片,4种样式

à4种状态:未选中,未选中悬浮, 选中,选中悬浮

 

à关键

  --1.使用 inline-block div ,background 代替图片

  --2. unselected:hover{}  和 selected:hover{} 用伪类处理两种图片

  --3. 点击,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控制缩进

margin对span有效

 

 

 

 

表单项批量读/写

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 下拉框

只读

$("#tbInfo select").attr("disabled","disabled");

$("#tbInfo select"). removeAttr ("disabled");

 

 

 

DOM操作

createElement 和 AppendChild

var img=$("<img src=‘images/divBar.png‘/>")

$(this).append(img)

DOM操作 创建 添加

 $(“字符串”)

append()

DOM操作 删除

remove()

DOM操作 清空子元素

empty()

 

 

DOM操作 设置元素innerHTML

 

设置所有p的内容

$("p").html("Hello< b>world</b>!");

 

 

 

 

判断2个dom元素相等

结论:DOM元素可以判断相等。

     Jquery对象不能判断

 

 

<td class="col1 td1">cell1</td>

 

 

 

 

事件

原始方式:

domElement.on(“click”,function(){

 

});

on的多次绑定特性

说明:会多次绑定

 

<!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();

   bindEvents();

});

function bindEvents(){

   console.log("bindEvents is called");

   $("#btnTest").on("click",function(e){

      alert("btnTest is 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("testDiv has 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){

       var trigerId=e.target.id;

      if(targeteId==”dvGISBox”){

              …handle code

              return false;//阻止事件向下传播

}

Else if(targeteId=””){

      

}

});

 

动态元素的绑定

动态元素:从document中删除,然后又添加到document中。

 

流程:

bindUIEvents();//有spanKey的处理代码

$(“.spanKey”).remove();

$(“#dvTest”).html(“<span class=’.spanKey’>测试span</span>”);

 此时,.spanKey click就不能再次触发。

 

原因:元素的绑定先于元素添加

 

解决方式:绑定动态元素父元素的click事件,再通过$(e.target)鉴别是哪个子元素出发。

 

 

 

 

 

JSON

JSON和字符串转换

1.JSON转 string

 var string=JSON.stringify(JSONObj);

 

2.string转JSON

var json=JSON.parse(string)

 

 

JSON校验网站

说明:ShopMis返回2852条记录的JSON,在前端解析有问题,靠它查明

http://www.bejson.com/go.php?u=http://www.bejson.com/index.php

 

布局

 

 

布局 图片-桌布-界面

HTML:

<body>

<img id="bgImg" src="src/assets/images/bg6.jpg"/>

<div class="mainLog"></div>

<div class="sysTitle"></div>

<div class="buttonContainer" id="dvButtonContainer">

<div class="menuButton" id="btnOD">OD分析</div>

</div>

 

CSS:

body{ height:100%; width:100%;overflow: hidden;}/*背景图覆盖body 100%*/

#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:5px 5px 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 5px rgba(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 5px rgba(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>Insert title 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设置 位置(仅对可见元素有效)

$("#dvToolBarSlider").show();

$("#dvToolBarSlider").offset({ left: (parseInt($(this).offset().left) + 4), top: (parseInt($(this).height()) + 5) }); //位置

 

备注:必须先show再 offset, 否则位置出现意外值

 

布局 使用margin的情况

 

 

 

 

布局  IE padding

实际width=width+ padding-left +padding-right

实际height=height+padding-top+padding-bottom

 

设置:width,height往小里算,加上padding 才是真实

 

 

全屏/下悬浮  -全屏

<html xmlns="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>

    <script type="text/javascript">

        function setHeight() {

            document.getElementById("whole").style.height = document.documentElement.clientHeight + "px";

            document.getElementById("up").style.height = document.documentElement.clientHeight + "px";

        }

    </script>

</head>

<body onload="setHeight()">

<div id="whole">

<div id="up"></div>

<div id="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 关键*/

.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其它属性

时间代价:1h

评价:值

背景:

<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个控制按钮

<div id="gridRegion" class="gridRegionHide"><!--表格-->

<div class="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 () {//close grid

            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宽

{table-layout:fixed; width:100%} //table宽=列宽之和

 

(4)dvData宽

30+62+100+94+238=524px;

{

width:524px;

}

(5)如果需要滚动条:

  将dvData的overflow:scroll

4

td不换行,超过文本隐藏?

td{overflow:hidden; text-overflow:ellipsis;white-space:nowrap;}

 

5

表格边界如何设置?

Td:border-top:

   Border-left

 

Table:border-right;

     Border-bottom;

最后:table的基本样式别忘,内联。

  Cellpadding=0;cellspacing=0;

 

举例

<!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">

<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">单元及门牌号</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">联系电话</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">现居住地址</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">人员属性</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;}

 

 

双滚动条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;}/*名称*/

.col2F{width:200px;}

.col3S{width:130px;}/*地址*/

.col3F{width:200px;}

.col4F{width:90px;}/*活跃商户*/

.col5F{width:80px;}/*编号*/

.col6F{width:100px;}/*内部编号*/

.col7F{width:90px;}/*设备状态*/

.col8F{width:136px;}/*收单安装日期*/

.col9F{width:113px;}/*储值卡安装日期*/

.col10F{width:113px;}/*储联卡安装日期*/

.col11S{width:74px;}/*操作*/

/********************/

 

/*数据*/

#dvData{

   overflow:scroll;     

}

.dvData-WF{width:956px;}

.dvData-HS{height:420px;}

 

#tbData{

   width:100%;

   table-layout:fixed;

}

 

 

表头联动事件:

   $("#dvData").on("scroll",function(e){

                varleft=e.target.scrollLeft;

                $("#dvHead").scrollLeft(left);

                console.log("scroll is trigger");

                return false;

            });

 

 

Table组件

序号

类别

1

日期框    (f) jquery-ui-datePicker

2

正数框 (身高)(f)

3

身份证号框  (f)

4

下拉框(select) (民族、血型、性别、婚姻状况、教育程度、省、市、县、区、)

5

电话框  (f)

 

select

结构

<select class="Info"data="Gender" id="selGender"><option value="1">男</option><option value="0">女</option></select>

 

取值:

$(“selGender”).val();

 

Table CRUD

效果:

效果项

描述

列头和内容分离

 

列头可排序

 

滚动条

 

Td固定宽

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

整体布局:

 <div><table id=”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个基本样式。

(border-collapse,cellspacing,cellpadding html内)

(2)Table-layout:fixed;  width: tbWdith;

 

3

(1)列头生成函数。 td样式指向1

   dvHead.html();

(2)数据生成函数。 td样式指向1

   dvData.html();

排序

1.界面

(1)tbHead中的每个td中,div,positionRelative;

(2)div内放span标题;

span升,position:absolute;8*8;

span降,position:absolute;8*8;

 

2.排序方法编写

 

编辑功能

 

 

1.编辑窗体

 

 

 

2.保存和取消

 

删除功能

1.获取要删除行

 

 

2.从table中删除行

 

 

3.从array中删除

 

添加功能

1.添加窗体

 

 

2.添加到dataArray

 

搜索功能

 

 

 

 

 

Table 3个基本样式

  border-collapse:collapse

  cellspacing=”0”写在html标签里  //td间距为0

  cellpadding=”0” 写在html标签里  //td内边距为0

 

 

Table 表头和数据错开

<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:1px solid #000;

}

#tbData{

 border-right:1px solid #000;

 border-bottom:1px solid #000;

}

 

.colHead{

   font-weight:bold;

}

td{

   border-top:1px solid #000;

   border-left:1px solid #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">织田信长</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;

   var sortFun=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));

         };

      }

      var beforeStr="";

      for(var i=0;i<=residentData.length-1;i++){

         //beforeStr+=residentData[i].Name;

         beforeStr+=eval("residentData["+i.toString()+"]."+colName);

      }

      residentData.sort(sortFun);

      var afterStr="";

      for(var i=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"><div class="pRelative"><div id="dvName"class="dvFilter OperUI"></div><span  data="Name" class="spanClear OperUI" 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="return false;">

 

间色方案

1.蓝白间色

.oddRow {rgb(180,205,230);}

.evenRow{rgb(230,230,230)}

 

Table 获取row 的序号

//获取row在table中的序号

   this.getRowIndex=function(rowDom){

      var rows=$(rowDom).prevUntil("table");

      return rows.length;

   };

--

table.rows[i]

Table获取row的某个td

tr.cells[i];

 

td取文本

td.innerText

 

cellspacing,cellpadding注意

只能在html中设置,在css中设置无效

 

rowspan ,colspan

只能在html中设置,在css中设置无效

 

 

 

Table性能

性能对比  

结论:html方法,要将渲染时间控制在30ms以内。

实现方式:分页.

详细:在2800行时,html的执行方法是20ms,但渲染效时间是2800ms。

行数100时,htmlStr渲染时间是30ms

 

 

背景:从缩略表,切换到完整表。

11个字段,2800条数据

 

数据量

处理方式

时间

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

 

 

 

 

 

滚动条

scrollLeft

 

$("#dvResult").scrollTop(300);

$("#dvResult").scrollLeft(100);

 

相对滚动值

 

尺寸-位置

尺寸:

$(“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 产生 inline属性,优先于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(“left”,”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("get Data finished,data is:"+rData);

            },

            error:function(url,status,exption){

                console.log("fail to get Response");

            }

         });        

dataType参数

 

作用:预期服务器返回的数据类型。

可用值:text/xml/html/script/json/jsonp

详细参见:Jquery 1.7 chm

 

Ajax请求文件总结

结论:Servlet返回文件,被放到Ajax的回调函数中,不会显示另存文件。

语句

回调函数中的data

是否提示另存为

当前窗体页是否改变

$.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实现

(静态)

在页面放一个隐藏的<a>, a的href指向下载文件,并触发click事件

2

用iframe实现

(静态)

在页面放一个隐藏的<iframe>, iframe的src指向下载文件

3

用form实现

(静态)

Form的action 指向下载文件,from.submit()

4

用form实现

(动态,推荐)

Form.submit()之后,浏览器接收文件流,显示另存为

 

 

 

用anchor实现代码

<!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实现

 

$("#btnTest1").on("click",function(){

      //提示保存窗体

      $("#frmDownLoad")[0].src="../Export/test.xls";

   });

 

<iframe id="frmDownLoad" style="display:none"></iframe>

 

用form实现

说明: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实现(文件流)

 

说明:form action action执向servlet。

          将postData放在input的value中。

 

else if($(e.target)[0].id=="inpExport"){      

         $(document.body).append(‘<form id="frmDownload" method="post" action="../resiCrud?para" class="dNone" ><input id="inpPostData" name="postData" type="text"></form>‘);

         varpostData={cmd:5,data:null};

         $("#inpPostData").val(JSON.stringify(postData));

         $("#frmDownload")[0].submit();

         $("#frmDownload").remove();

      }

 

例2

var $tempForm=$("<form method=‘post‘ action=‘../ShopCudes?2‘></form>");

         $(document.body).append($tempForm);

         $tempForm[0].submit();

         $tempForm.remove();

 

 

服务端防止乱码

if(queryStr.equals("0")){         

          request.setCharacterEncoding("UTF-8");//防止汉字乱码

          String postData=request.getParameter("postData");

          System.out.println("postData:"+postData);

            Condition cond=new Gson().fromJson(postData,Condition.class);


 

Jquery辅助方法

$.type() 获取7种类型

返回值:字符串

console.log($.type(true));

console.log($.type(3.1415));

console.log($.type("hello world"));

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

 

备注:自定义类型  object

$.trim() 字符串

       Console.log($.trim(“  |hello  world|   ”))

       |hello  world|

判断 $.isFunction

$.isArray

 

$.isEmptyObject

$.isEmptyObject({})

$.isNumeric

数组 元素批处理$.map(array,function(n){n})

返回值:新数组

描述:操作array中的每个元素,返回新数组

 

 

 

 

 

 

Jquery-选择

查找  $(“sel”).find(“”)

选择第i个元素

 

<table>

  <tr><td>Header 1</td></tr>

  <tr><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

 

$("tr:eq(1)")

 

返回:

  [<tr><td>Header 1</td></tr>]


parent()获取父元素

$(e.target).parent()

parents找一类祖先元素

 

 

<ul class="level-1">

  <li class="item-i">I</li>

  <li class="item-ii">II

    <ul class="level-2">

      <li class="item-a">A</li>

      <li class="item-b">B

        <ul class="level-3">

          <li class="item-1">1</li>

          <li class="item-2">2</li>

          <li class="item-3">3</li>

        </ul>

      </li>

      <li class="item-c">C</li>

    </ul>

  </li>

  <li class="item-iii">III</li>

</ul>

 

 

$("li.item-a").parents(".level-1");

效果:

Array: [0] HTMLElement <ul class="level-1">

 

 

 

parentsUtil查找多个祖先

 

<ul class="level-1">

  <li class="item-i">I</li>

  <li class="item-ii">II

    <ul class="level-2">

      <li class="item-a">A</li>

      <li class="item-b">B

        <ul class="level-3">

          <li class="item-1">1</li>

          <li class="item-2">2</li>

          <li class="item-3">3</li>

        </ul>

      </li>

      <li class="item-c">C</li>

    </ul>

  </li>

  <li class="item-iii">III</li>

</ul>

 

代码:

$(“.item-a”).parentsUtil(“level-1”)

 

效果:

Array:[0]  htmlElement <ul class="level-2">

     [1]  htmlElement <li class="item-ii">

所有兄弟

$(‘li#tmpCarrot‘).silblings().

 

之前兄弟

prevAll(exp)

prevUtil

之后兄弟

nextAll([expr])

 

 

 

孩子

.children()

备注:只选到孩子节点,不选孙。

 

属性选择

选择 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, 它是动画方法,性能低。它们是异步

 

Jquery-遍历

 $().each(function(I,item){})

Jquery插入

$(“”).after(string/JQObj)

描述:在元素后添加 兄弟元素

$(“#pItem”).after(“<b>Hello</b>”)

 

var $text=$(“#textInfo”);

$(“#pItem”).after($text)

 

$(“”).before(string/JQObj)

描述:在元素前添加 兄弟元素

 

类比.after();

 

 

Jquery删除

1.$().remove();

描述:$(“#div1”).remove();

       document.getElementById(“div1”) 是 null

Jquery连写

解释:对一个jquery对象连续调用各种不同的方法

 

原来:

$(‘#dvResult‘).html(‘‘);

$(‘#dvResult‘). addClass(‘dNone‘);

 

连写:

$(‘#dvResult‘).html(‘‘).addClass(‘dNone‘);

 

优点:

减少代码行数

 

 

prop和attr

attr:元素的内联属性

 

譬如:

<span class=‘mPager-spFL mPager-lPage‘ style=”width:25px” data=1>

 

removeAttr(“class”), removeAttr(“style”), removeAttr(“data”)都生效

 

prop:元素的属性(通过ele.能够访问到的)

 

 

 

prop(“innerHTML”)

prop(“offsetLeft”)//离容器左侧的距离

 

 

 

.css样式控制

原来:

$("#dvTip").css("left",obj.x+"px").css("top",obj.y+"px");

 

改写:

$("#dvTip").html(obj.text).css({"left":obj.x+"px","top":obj.y+"px"});

 

 

background-position

图片右下角:0,0

向上:y++

向左:x++

ID样式 优先 class样式

 

实验1

#dvMap{

   display:inline-block;

}

.dNone{

  display:none;

}

 

<div id=”dvMap” class=”dNone”>测试div</div>

 

结果:div显示

 

实验2

#dvMap{  

display:none;

}

.dNone{

  display:inline-block;

}

 

<div id=”dvMap” class=”dNone”>测试div</div>

结果:div隐藏

 

结论:可变项写在id样式中

 

 

 

Jquery-UI

2个引用项

 

 

datepicker

备注:参考jquery UI Reference

方法

设置语言为中文

引入 中文包(第二个)

<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 a dialog</div>

 

创建

$("#dialog").dialog();

 

显示

$("#dialog").dialog("open");

 

隐藏

$("#dialog").dialog("close");

 

判断是否显示

$("#dialog").dialog("isOpen");

 

 

样式控制:jquery.ui.dialog.css

 

 

//弹出对话框

         $("#dialog").dialog(

              {closeText:"隐藏",           

               width:110,

               minWidth:110,

               maxWidth:120,

               resizable:false,

               position:[318,100],//position        

               title:"图层管理"

              }      

         );

 

slider

/*slder

    属性: 

    max:从最小到最大,滑动几次

        orientation:vertical/horizonal, 朝向

      

       Events:

        slide:function(event,ui){

        } //用户滑动slider 触发,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("slide is triggered,value is:"+ui.value);

       }

       });//10个等级

       $("#vSlider").slider({max:10,orientation:"vertical"});//10个等级

});

 

 

 

 

拖动排序项 sortable()

<head>

 < link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

 < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

 < script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 

 < script>

  $(document).ready(function() {

    $("#sortable").sortable();

  });

 < /script>

</head>

<body style="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>

 

 

 

拖动项 drag

<!DOCTYPE html>

<html>

<head>

 < link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

 < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

 < script src="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>

<body style="font-size:62.5%;">

 

<div id="draggable">Drag me</div>

 

</body>

</html>

 

 

 

 

页面间交互

主页面-iframe-子页面

引用项: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盒模型

 

滚动条

1.div滚动条

设置水平滚动值

//所有滚动到最右侧

   $(".testScroll").each(function(i,item){

      item.scrollLeft=item.scrollLeftMax;    

   });

 

 

 

 

 

获取滚动比率

 

//滚动条, 控制透明度

   $(".testScroll").on("scroll",function(e){

      console.log("scroll is triggered,e.target.scrollLeft:"+e.target.scrollLeft);

      var rate=(e.target.scrollLeft/e.target.scrollLeftMax).toFixed(2);

   });  

 

2.window滚动

       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;

备注:不会被其它font-size:设置覆盖

 

css文件引用图片

 

说明:css中引用图片是相对于css文件的位置.

html:

 link href=”css/index.css”

 

css

.dvMain{background:url(../img/background.png)}

 

js 引用文件

是相对于父页面的位置

控件

滚动条

备注:使用jquery-UI的scroll比较好

1.html实现

路子:div 里面设置

背景:用于控制图层透明度

.testScroll{

   overflow:scroll;

   display:inline-block;

   width:70px;

   height:16px;/*scroll的最小高度*/

   font-size:100px;     

}

 

<div class="testScroll">.................................</div>

 

2.获取比率

 

 

 

 

 

 

 

 

拖拽移动元素

/*路子:1.绑定目标(divItem)的mouseDown

    * 2.绑定活动区域divRange的moumove和mouseUp

   */

   $("#divItem").on("mousedown",function(e){

      console.log("mousedown triggered");

      if(e.button!=0){

         return false;

      }

      gMovable=true;    

   });  

   $("#divRange").on("mouseup",function(e){

      console.log("document.mouseup triggered");

      gMovable=false;

      return false;

   });

   $("#divRange").on("mousemove",function(e){

      console.log("mousemove triggered");

      if(gMovable){

         $("#testDiv").css("left",e.clientX+"px");

         $("#testDiv").css("top",e.clientY+"px");

         return false;

      }

   });

拖拽改变 顺序

效果:

一个框中放3个div,mouseDown div,拖拽 放到另一个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("mousedown triggered,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.mouseup triggered");

      if(!gMovable){return false;}     

      gMovable=false;   

      var deltaInfo={deltaX:e.clientX-$(this).offset().left,deltaY:e.clientY-$(this).offset().top};

      //deltarInfo:鼠标松开位置,相对于图层控件的坐标.

      //如果松开位置超出图层控件

   if(deltaInfo.deltaX<=0||deltaInfo.deltaY<=0||deltaInfo.deltaX>=$(this).width()||deltaInfo.deltaY>=$(this).height()){

         return false;

      }

      var newLocInfo=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;//要被移动的item

var gItemString="";

var gTargetItem=null;//要移到哪个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无效*/

   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"){        

         var tempObj={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();

      }

   });

 

/*全局方法,类

 * */

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点线路。", {

buttons : [ {

type : "cancel",

value : "确定"

} ]

});

 

 

msgBox2

原因:上msgBox好像要收费

http://jquerymsgbox.ibrahimkalyoncu.com/

 

 

 

blockUI

//官网:http://www.malsup.com/jquery/block/#overview

 

$.blockUI({message:"从百度获取地址中..."});//blockUI

 

$.blockUI();

Blocking with a custom message:

 

$.blockUI({ message: ‘<h1><img src="busy.gif" /> Just a moment...</h1>‘ });

 

Blocking with custom style:

$.blockUI({ css: { backgroundColor: ‘#f00‘, color: ‘#fff‘} });

 

To unblock the page:

$.unblockUI();

 

If you want to use the default settings and have the UI blocked for all ajax requests, 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/

模态显示div

$("#sample").modal()

点击模态外任意点关闭

$("#sample").modal({overlayClose:true})

设置背景颜色

$("#sample").modal(overlayCss:{backgroundColor:"#fff"})

显示html字符串

$.modal("<div><h1>SimpleModal</h1></div>");
 

关闭按钮图片

图片地址:

http://simplemodal.googlecode.com/svn/tags/1.3/test/img/x.png

在css文件添加

/*关闭图标*/

#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;

}

关闭

 

$.modal.close();

使用frame的情况关闭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");

  

备注:来源

http://*.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值

说明

IE=5

让浏览器使用Quirks mode来显示,实际上是使用Internet Explorer 7 的 Quirks 模式来显示内容,这个模式和IE5非常相似。

IE=edge

这个设置是让IE使用当前的最高版本进行文档的解析,官方文档指明,edge模式仅适用在测试环境,不建议在生产环境中使用

IE=7

使用标准IE7来处理

IE=EmulateIE7

模拟IE7来处理,遵循 <!DOCTYPE> 指令,如果文档有当前有一个合法的<!DOCTYPE>,就使用IE7模式,否者使用Quirks模式(Internet Explorer 5 Quirks),对于大部分网站来说,这是首选的兼容性模式

IE=8

标准IE8

IE=EmulateIE8

模拟IE8,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明

IE=9

标准IE9

IE=EmulateIE9

模拟IE9,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明

chrome=1

强制使用Chrome,需要IE下Chrome插件支持

IE=EmulateIE10

模拟IE10

IE=10

标准IE10,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明

 

Content-type设置(设置网页的编码)

<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-编码类型

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta

charset="utf-8″ />

简化

3

<Frame/>、<FrameSet/>等标签停用

 

 

 

4

 

 

 

 

 

 

 

语义化标记

 

 

音频/视频 (不需要任何插件)

 

 

 

 

画布

 

 

数据存储

 

 

拖放

 

 

可编辑

 

 

Form表单增强

 

 

 

HTML5 实例

nav,footer,header,aside无div布局

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>HTML5 Semantic 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>Page Header</h1>

<h2>Page Sub 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>Article Heading</h1>

<time datetime="2010-05-05"pubdate>May 5th, 2010</time>

</header>

<p>Lorem ipsumdolor sit amet, consectetur adipiscing elit.</p>

<section>

<header>

<h1>Section Heading</h1>

</header>

<p>Ut sapienenim, porttitor id feugiat non, ultrices non odio.</p>

<footer>

<p>Section Footer: Pellentesque volutpat, leo nec auctor

euismod</p>

</footer>

</section>

<section>

<header>

<h1>Section Heading</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>Section Footer: Pellentesque volutpat, leo nec auctor euismod

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

背景:

主页面 html:

<div id="dvMod" class="dNone"><iframe class=‘engisFr‘ src=‘engiInd.html‘></iframe></div><!--弹出窗体-->

 

//---

主页面脚本

   //显示engis页面

      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>

 

问题:

报错:

 

 

 

 

解决方式:在子页面(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>

CSS-JQUERY笔记,布布扣,bubuko.com

CSS-JQUERY笔记

上一篇:FlatMap


下一篇:Optional中的map函数和flatMap函数的区别