(Hyper Text Markup Language) 超文本标记语言,用于描述网页的一种语言。
2,HTML5相关知识?
HTML
XHTML
Css
Css3
JavaScript
JQuery
HTML5
3,HTML5新特性?
1,绘画:canvas标签
2,媒介:video和audio元素
3,存储:本地离线存储
4,新元素:article,footer,header,nav,section
5,新控件:calendar,date,time,email,url,search
6,浏览器:Safari,Chrome,Firefox,Opera,IE9
HTML基础讲解
4,声明:<!DOCTYPE>
5,HTML基础标签:head,body
6,HTML标题
<h1>...<h6>等标签进行定义
7,HTML段落
<p>标签定义段落
8,HTML连接
<a>标签定义连接
9,HTML图像
<img>标签定义图像
10,HTML元素
是从开始标签到结束标签的所有代码。即元素的内容
空元素在开始标签进行闭合。如:<br/>
大多数的元素有属性,都可以嵌套的。如:<p> <a>hello </a></p>
11,HTML属性
标签可以拥有属性为元素提供更多是信息。
属性是以键值对的形式。如:href="www.baidu.com"
常用标签属性:<h1> align:对齐方式;<body> bgcolor:背景颜色;<a> target:规定在何处打开链接;
通用属性:class:规定元素的类名;id:规定元素的唯一ID; style:规定元素的样式; title:规定元素的额外信息;
12,HTML格式化
<b> 粗体文本
<big> 大号字
<em> 着重文字
<i> 斜体字
<small> 小号字
<strong> 加重语气
<sub> 下标字
<sup> 上标字
<ins> 插入字
<del> 删除字
13,HTML样式
标签:<style> 样式定义 ; <link> 资源引用
属性:rel="stylesheet" 外部样式表; type="text/css" 引入文档类型; margin-left 边距;
插入方法:外部样式表 <link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表 <style type="text/css">
body { background-color :red}
p { margin-left:20px }
</style>
内联样式表 <p style= "color:red">
14,HTML链接
数据:文本链接;图片链接;
属性:href属性 指向另一个文档的链接; name属性 创建文档内的链接;
img标签属性;alt 替换文本属性; width 宽 ; height 高;
15,HTML表格
<table> 表格
<caption> 表格标题
<th> 表头
<tr> 行
<td> 单元
<thead> 页眉
<tbody> 主体
<tfoot> 页脚
<col> 列属性
16,THML列表
标签:<ol> 有序; <ul> 无序; <li> 列表项; <dl> 列表; <dt> 列表项; <dd> 描述;
无序列表:标签 <ul><li> 属性 disc , circle, square;
有序列表:标签 <ol><li> 属性 A, a, I, i, start;
嵌套列表:标签 <ul><ol><li>
自定义列表:标签 <dl><dt><dd>
17,HTML块
块的元素:块元素显示时,通常以新行开始; 如:<h1><p><ul>
内联元素:内联元素通常不会以新行开始; 如:<b><a><img>
<div>元素:<div>元素也被称为块元素,其主要的组合HTML元素的容器。
<span>元素:<span>元素是内联元素,可作为文本的容器。
18,HTML布局
①div布局
②table元素布局
显示结果
|
描述
|
实体名称
|
实体编号
|
---|---|---|---|
|
空格
|
|
|
<
|
小于号
|
<
|
<< p=""><!--
|
>
|
大于号
|
>
|
>
|
&
|
和号
|
&
|
&
|
"
|
引号
|
"
|
"
|
'
|
撇号
|
' (IE不支持)
|
'
|
¢
|
分
|
¢
|
¢
|
£
|
镑
|
£
|
£
|
¥
|
人民币
|
¥
|
¥
|
|
|
|
|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
|
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
尺寸
单位 | 描述 |
---|---|
% | 百分比 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
em |
1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如,如果某元素以 12pt 显示,那么 2em 是24pt。 在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。 |
ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
pt | 磅 (1 pt 等于 1/72 英寸) |
pc | 12 点活字 (1 pc 等于 12 点) |
px | 像素 (计算机屏幕上的一个点) |
颜色
单位 | 描述 |
---|---|
(颜色名) | 颜色名称 (比如 red) |
rgb(x,x,x) | RGB 值 (比如 rgb(255,0,0)) |
rgb(x%, x%, x%) | RGB 百分比值 (比如 rgb(100%,0%,0%)) |
#rrggbb | 十六进制数 (比如 #ff0000) |
循环体;
$("#clickMeBtn").bind("click",clickHandler);
$("#clickMeBtn").bind("click",clickHandler1);
$("#clickMeBtn").unbind("click",clickHandler1);//解除指定的绑定,方法---不带()
/*jquery 1.7之后 on代替 bind */
$("#clickMeBtn").on("click",clickHandler);
$("#clickMeBtn").on("click",clickHandler1);
$("#clickMeBtn").off("click");//解除所有绑定。方法---不带()
|
e.stopPropagation();//阻止父级事件冒泡,body不再打印信息
e.stopImmediatePropagation();//阻止所有事件冒泡
|
clickBtn= $("#clickBtn");
clickBtn.click(function(){
var e =jQuery.Event("MyEvent");//创建自己的事件
clickBtn.trigger(e);//触发
});
clickBtn.bind("MyEvent",function(e){//事件要传递进来
conlog(e);
});
|
$("#hide").click(function (){
$("#phide").hide(1000);//点击隐藏--动画1s
});
$("#show").click(function (){
$("#phide").show(1000);//点击显示--动画1s
});
$("#toggle").click(function (){
$("#phide").toggle(1000);//点击显示--动画1s
});
|
/*淡入淡出*/
$("#in").click(function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").click(function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#fadetoggle").click(function(){//开关
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#fadeto").click(function(){//透明度
$("#div1").fadeTo(1000,0.5);
$("#div2").fadeTo(1000,0.7);
$("#div3").fadeTo(1000,0.3);
});
|
$("#flipshow").click(function(){//显示(之前在样式中displayed:nono)
$("#content").slideDown(500);
});
$("#fliphide").click(function(){//隐藏
$("#content").slideUp(500);
});
$("#fliptoggle").click(function(){//开关
$("#content").slideToggle(500);
});
|
/*回调*/
$("#btn").click(function(){
// $("p").hide(1000,function(){//单独执行
// alert("动画结束,方法回调")
// });
$("p").css("color","red").slideUp(500).slideDown(500);//多个设置和动画
});
|
/*获取*/
$("#btn1").click(function(){
// alert("text:"+$("#text").text());//text()获取内容
// alert("text:"+$("#text").html());//html()获取全部内容,包含标签
alert("text:"+$("#input").val());//val()获取输入框内容
});
$("#btn2").click(function(){
alert("网址:"+$("#aid").attr("href")+",ID:"+$("#aid").attr("id"));//attr()获取属性
});
});
|
/*设置*/
$("#btn3").click(function(){ $("#p1").text("极客学院");//修改P标签内容 }); $("#btn4").click(function(){ $("#p2").t("<a href='http://www.jikexueyuan.com'>极客学院2</a>");//给p标签添加a标签 }); $("#btn5").click(function(){ $("#i3").val("jikexueyuan");//修改input的内容 }); $("#btn6").click(function(){ // $("#a").attr("href","http://www.jikexueyuan.com");//修改input的内容 $("#a").attr({ "href":"http://www.jikexueyuan.com", "title":"hello" }); $("#a").text("极客学院"); }); $("#btn7").click(function(){ $("#p5").text(function(i,ot){//显示不断返回的数据,新的和旧的。 return "old:"+ot+", new:"+i; }); }); |
/*添加*/
/*说明:
* append:在元素结尾添加;
* before,prepend:在元素之前添加;
* after:在元素之后添加
* */
$("#btn8").click(function(){
// $("#p6").append("this is a web");//结尾
$("#p6").prepend("this is a web");//之前
});
$("#btn9").click(function(){
// $("#p7").before("this is a web");//在上一行
$("#p7").after("this is a web");//在下一行
});
});
function appendText(){
/*三种方式添加内容:
*html,jQuery,DOM
* */
var text1="<p>iwen</p>";
var text2=$("<p></p>").text("iwe");
var text3=document.createElement("p");
text3.innerHTML="iw";
$("body").append(text1,text2,text3);
}
|
/*删除*/
/*方法:
* remove,empty
* */
$("#btn10").click(function(){
$("#div").remove();//全删除
// $("#div").empty();//删除元素内容
});
|
/*css 方法*/
var div=$("#div1");
// div.css("width","100px");//单个设置属性
// div.css("height","100px");
// div.css("background","#FF0000");
// div.css({//设置多个属性
// width:"100px",height:"100px",backgroundColor:"#00FF00"
// });
div.addClass("style1");//加载一个class样式。
div.click(function(){
// $(this).addClass("style2");
// $(this).removeClass("style1");//点击移除样式
$(this).toggleClass("style2");//更换
});
|
/*盒子模型*/
var d= $("#div2");//获得div高度
d.click(function(){
// alert(d.height());//宽 100
// alert(d.innerHeight());//高+边距 200
alert(d.outerHeight());// 高+边距+外边框 204
alert(d.outerHeight(true));// 高+边距+外边框+外边距 304
});
|
/*向下遍历
* children, find
* */
// $("#div1").children().css({//指向下延伸一级
// border:"3px solid #FF0000"
// });
$("#div1").find("a").css({//必填元素,修改指定元素
border:"3px solid #FF0000"
});
|
/*向上遍历
* parent, parents, parentUntil
* */
// $("p").parent().css({//父边框一级 变
// border:"3px solid #FF0000"
// });
// $("p").parents().css({//外面的所有 变
// border:"3px solid #FF0000"
// });
$("a").parentsUntil("#div1").css({//指定元素之间区间 变
border:"3px solid #FF0000"
});
|
/*同级遍历
* sibings,next,nextALl,nextUntil,preAll,preUntil
* */
// $("h4").siblings().css({//修改其他所有同级元素
// border:"5px solid #FF0000"});
// $("h2").next().css({//修改下一个同级元素
// border:"5px solid #FF0000"});
// $("h2").nextAll().css({//修改下一个所有同级元素
// border:"5px solid #FF0000"});
// $("p").nextUntil("h4").css({//修改在两个之间的所有同级元素
// border:"5px solid #FF0000"});
// $("h3").prevAll().css({//修改在次之前的的所有同级元素
// border:"5px solid #FF0000"});
$("h5").prevUntil("h2").css({//修改在两个之间倒序的的所有同级元素
border:"5px solid #FF0000"});
|
/*过滤
* first, last,eq, filter, not
* */
// $(".div p").first().css("background-color","red");//第一个
// $(".div p").last().css("background-color","red");//最后一个
// $(".div p").eq(1).css("background-color","red");//索引指定下标的元素,从零开始
// $(".div p").filter(".a").css("background-color","red");//满足所有的集合
$(".div p").not(".a").css("background-color","red");//与filter相反的效果
|
if(isset($_GET['name'])){
echo "hello:".$_GET['name']; }else{
echo "Args Error"; } |
$("#btn").on("click",function(){ |
/*加载htm碎片,添加到div中*/ |
/*方式1*/
$.myjq=function(){
alert("Hello myjQuery");
}
/*方式2*/
$.fn.myjq=function(){
$(this).text("Hello");
}
/*jQuery扩展:引入script,两种方式调用*/
$.myjq();//方式1:弹出对话框
$("#div").myjq();//方式2:打印内容
|
$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
var dataImg={"data":[{"src":"e1.png"},{"src":"e2.png"},{"src":"e3.png"},{"src":"e4.png"},{"src":"e5.png"},{"src":"e6.png"},{"src":"e7.png"},{"src":"e8.png"},{"src":"e9.png"}]}
window.onscroll=function(){//屏幕滚动监听
// conlog(scrollSlide())
if(scrollSlide()){
//循环json数据,创建box
$.each(dataImg.data,function(index,value){
var box=$("<div>").addClass("box").appendTo($("#container"));
var content=$("<div>").addClass("content").appendTo(box);
$("<img>").attr("src","./images/"+$(value).attr("src")).appendTo(content);
});
imgLocation();
}
}
});
});
/*滚动底部时 计算高度*/
function scrollSlide(){
var box=$(".box");
//获取当前对象距离顶端的距离+图片高度。
var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight=$(document).width();//当前屏幕的高度,注意()
var scrollHeight=$(window).scrollTop();//滚动的高度
// conlog(lastboxHeight/2+"---"+documentHeight+"---"+scrollHeight)
return (lastboxHeight<scrollHeight+documentHeight)?true:false;
}
/*布局图片摆放位置*/
function imgLocation(){
var box=$(".box");//获取所有的box
var boxWidth=box.eq(0).width();//获取第一个box的宽度
var num=Math.floor($(window).width()/boxWidth);//每一行显示的个数
var boxArr=[];
box.each(function(index,value){//.each()相当于for循环,设置每一个box
conlog(index+"---"+value);
var boxHeight=box.eq(index).height();//每一个box的高度集合
if(index<num){//第一行的显示图片的高度,添加到boxArr数组中
boxArr[index]=boxHeight;//数组需要索引,[index]
// conlog(boxHeight);
}else{
var minHeight=Math.min.apply(null,boxArr);//.min.apply(null,数组):获得最小高度
// conlog(minHeight);
var minboxIndex= $.inArray(minHeight,boxArr);//,inArray(minHeight,数组):获得最小高度的下标
$(value).css({//$(value):获得一个box实例,设置样式
"position":"absolute",
"top":minHeight,
"left":box.eq(minboxIndex).position().left
});
//选出一个最小图片底部放置后,重新计算第一行的数组中高度。
boxArr[minboxIndex]+=box.eq(index).height();
}
});
}
/*用于打印*/
function conlog(e){
console.log(e)
}
|
$("#div").draggable();//调用方法拖动
|
$("#Rect2").droppable();//放置
$("#Rect2").on("drop",function(e,ui){//拖动进元素时,触发事件。
// alert(e);
$("#Rect2").text("drops事件");
});
|
$("#div1").resizable();//可调整边框
|
$("#btn").button();
$("#select").selectable();
$("#btn").on("click",function(){
if($("#right").hasClass("ui-selected")){
alert("答对了!") }
});
<!-- href="#":表示不跳转-->
<a href="#" id="btn">提交</a>
|
$("#sortable").sortable();//可拖动排序
|
$("#accordion").accordion();//可折叠,手风琴效果
|
/*承载提示内容*/
var autoTags=["iwen","ime","html","css","javascript","java","android", "ios"];
$("#tags").autocomplete({
source:autoTags//指定其资源
});
|
$("#datepicker").datepicker();//事件选择器
|
$("#btn_dialog").button().on("click",function(){
$("#div2").dialog();//弹出对话框
});
|
pb =$("#pb");
// pb.progressbar({value:50});
pb.progressbar({max:100});
setInterval(changePb,100);//设置定时器
/*设置改变pb进度条*/
function changePb(){
current++;
if(current>=100){
current=0;
}
pb.progressbar("option","value",current);//设置增加的数值:
}
|
$("#menu").menu({position:{at:"left bottom"}});//设置显示位置:左下方
.ui-menu:after{
content: ".";
display: block;
/*在左右两侧均不允许浮动元素。*/
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.ui-menu .ui-menu-item{ //条目的属性
display: inline-block;
float: left;
margin: 0;
padding: 10;
width: auto;
}
|
var slider=$("#slider");
// slider.slider();
var valueSpan= $("#span");
slider.slider({
// change:function(e,ui){//传递两个参数,拖动后显示拖动值。
// valueSpan.text(slider.slider("option","value"));
// }
slide:function(e,ui){//拖动过程中,不断变化着。
valueSpan.text(slider.slider("option","value"));
}
});
|
/*下拉列表*/
var sp=$("#input");
sp.spinner();
sp.spinner("value","10");
$("#btn3").click(function(){
alert(sp.spinner("value"))//获取spinner的值
});
/*Tags标签*/
$(function(){
$("#tag").tabs();
});
|
/*Addclass:改变的class,执行时间,动画效果,完成监听
*/
$(".div5").on("click",function(){
$(this).addClass("changeddiv",1000,"easeInCirc",function(){
alert("动画完成");
});
});
$(document).click(function(){//点击执行百叶窗的效果:方向
$("#toggle").toggle("blind",{direction:"down"});
});
|
/*Animtion 修改背景*/
$("#btn_toggle").click(function(){
$("#elem").animate({color:"green",
backgroundColor:"rgb(99,99,99)",
borderColor:"rgb(199,199,199)"});
/*向左逐渐隐藏,执行三秒*/
$("#toggle").hide("drop",{dirction:"left"},3000);
/*RemoveClass:移除class*/
$(".div5").removeClass("changeddiv",1000,"easeInCirc",function(){
alert("动画完成");
});
});
|
/*逐渐显示*/
$("#toggle").show("drop",2000);
$(this).toggleClass("changeddiv",2000,"easeOutSine");//将添加和移出class集中一体
|
<!--在移动设备上适配,增加字段 meta name="viewport" content="width=device-width,initial-scale=1.0"-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>JQuery Mobile</title>
<!--导入jQuery Mobile的js和css-->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<!--在body中是data-role="page"固定:三部分字段data-role="header",role="main",data-role="footer"-->
<!--固定头部或底部位置:data-position="fixed"-->
<div data-role="page">
<!--头-->
<div data-role="header" data-position="fixed">
<h1>这是头部</h1>
</div>
<!--身-->
<div role="main">
<p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p>
</div>
<!--脚-->
<div data-role="footer" data-position="fixed">
<h1>这是脚部</h1>
</div>
</div>
|
<a href="#pagetwo" data-transition="slide">跳转到第二个页面</a>
<a href="#pagetwo" data-rel="dialog">打开一个dialog</a>
|
<button>按钮</button>
<input type="button" value="按钮">
<a href="#" class="ui-btn ui-shadow">按钮</a>
<!--按钮加图片的效果:删除图标ui-icon-delete,不显示文字ui-btn-icon-notext-->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" >按钮</a>
<!--一排显示按钮:ui-btn-inline-->
<a href="#" class="ui-btn ui-btn-inline" >按钮1</a>
<a href="#" class="ui-btn ui-btn-inline" >按钮2</a>
<!--一组:data-role="controlgroup",横向相连接:data-type="horizontal"-->
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮1</a>
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮2</a>
<a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮3</a>
</div>
<!--主题:ui-btn-a-->
<a href="#" class="ui-btn ui-btn-a ">主题1</a>
<a href="#" class="ui-btn ui-btn-b ">主题2</a>
|
<!--复选框-->
<label>
<input type="checkbox">苹果
</label>
<!--复选框组-->
<fieldset data-role="controlgroup" data-type="horizontal">
<label>
<input type="checkbox">苹果
</label>
<label>
<input type="checkbox">苹果
</label>
<label>
<input type="checkbox">苹果
</label>
</fieldset>
<!--单选-->
<label>
<input type="radio" name="rl" id="man">男
</label>
<fieldset data-role="controlgroup" >
<label>
<input type="radio" name="rl" id="man">男
</label>
<label>
<input type="radio" name="rl" id="woman">女
</label>
</fieldset>
<!--可展开项 :默认展开内容data-collapsed="false",去掉展开边框data-content-theme="false"-->
<div data-role="collapsible" data-collapsed="false">
<h4>Heading</h4>
<p>这是展开的内容</p>
</div>
<div data-role="collapsible" data-content-theme="false">
<h4>Heading</h4>
<p>这是展开的内容</p>
</div>
<!--展开列表项-->
<div data-role="collapsible" data-content-theme="false">
<h1>系列</h1>
<ul data-role="listview">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</div>
|
<!--grid:两列ui-grid-a,三列ui-grid-b.....,列ui-block-a,bar类型ui-bar-->
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">Hello A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-a">Hello B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-a">Hello C</div>
</div>
</div>
<!--第二行-->
<div class="ui-grid-b">
<div class="ui-block-a">
Hello A
<input type="button" data-theme="a" value="按钮">
<input type="button" data-theme="b" value="按钮">
<input type="button" data-theme="a" value="按钮">
</div>
<div class="ui-block-b">
Hello B
<input type="button" data-theme="a" value="按钮">
<input type="button" data-theme="a" value="按钮">
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-a">Hello C</div>
<input type="button" data-theme="a" value="按钮">
<input type="button" data-theme="a" value="按钮">
<input type="button" data-theme="a" value="按钮">
</div>
</div>
<!--一列ui-grid-solo-->
<div class="ui-grid-solo">
<div class="ui-block-a">
<input type="button" value="按钮">
</div>
</div>
<!--listview:data-role="listview",加个<a>标签即可点击效果。 过滤item data-filter="true" 可插入data-inset="true"-->
<ul data-role="listview" data-filter="true" data-inset="true">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
<form class="ui-filterable">
<input id="autoinput" data-type="search">
</form>
<!-- 不显示data-filter-reveal="true" 指向form data-input="#autoinput"-->
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-inset="true">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">B</a></li>
<li><a href="#">D</a></li>
<li><a href="#">A</a></li>
<li><a href="#">E</a></li>
</ul>
<!--自动分配器data-autoviders="true"-->
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li><a href="#">A</a></li>
<li><a href="#">A</a></li>
<li><a href="#">addd</a></li>
<li><a href="#">B</a></li>
<li><a href="#">Big ddd </a></li>
<li><a href="#">bbb </a></li>
<li><a href="#">C</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
|
<!--导航:navbar-->
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</div>
<!--弹出窗口:popup,a属性data-rel="popup",div属性data-role="popup"-->
<a href="#pp" data-rel="popup" class="ui-btn">弹出窗口</a>
<div data-role="popup" id="pp">
<p>这是一个弹出窗口</p>
</div>
<!--显示位置屏幕前data-position-to="window"-->
<a href="#pop" data-rel="popup" data-position-to="window" data-transition ="fade">
<img src="images/logo11.png" class="pupphoto" style="width: 20%">
</a>
<div data-role="popup" id="pop">
<!--a标签是一个删除图标,点击返回-->
<a href="#" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
<img src="images/logo11.png" class="popphoto" style="height: 500px">
</div>
|
data-theme="b"//a或b主题
<!--下拉选择-->
<div class="ui-field-contain">
<select name="select-native-1" id="select-native-1" data-iconpos="left">
<option value="1">这是第1个</option>
<!--不能被选中-->
<option value="2" disabled="disabled">这是第2个</option>
<option value="3">这是第3个</option>
<option value="4">这是第4个</option>
</select>
</div>
|
<script>
$(document).on("pageinit",function(){
// alert("hello");
$(".p").on("tap",function(){//点击隐藏
$(this).hide();
});
$(".btn").on("taphold",function(){//长按隐藏
$(this).hide();
});
$(".p1").on("swipe",function(){//滑动隐藏
$(this).hide();
});
$(".btn1").on("swiperight",function(){//右滑动隐藏
$(this).hide();
});
$(document).on("scrollstop",function(){//长按隐藏
alert("停止滑动了");
});
});
|
/*创建舞台,文本,图形*/
var stage=new createjs.Stage("gameView");
var gameView=new createjs.Container();//创建容器
stage.addChild(gameView);
var text=new createjs.Text("Hello easeljs","26px Arial","#777");
//stage.alpha=0.5;//半透明
//stage.x=100;//移动舞台里的内容
//stage.y=100;
//stage.scaleX=2;//缩放舞台里内容
//stage.scaleY=0.5;
var Rect=new createjs.Shape();//创建图形
Rect.graphics.beginFill("#FF0000");//设置颜色
Rect.graphics.drawRect(50,50,50,50);//参数1:x,参数2:y,参数3:宽度,参数4:高度。
gameView.addChild(text);//添加到容器中
gameView.addChild(Rect);
/*引入js,添加container*/
var c =new ChildContainer();
c.x=200;//移动
c.y=200;
gameView.addChild(c);
stage.update();//刷新
|
/*对圆的封装*/
function Cricle(){
createjs.Shape.call(this);//。调用不加()
this.setCircleType=function(type){
this._cricleType=type;
switch (type){
case Cricle.TYPE_RED:
this.setColor("#ff0000");
break;
case Cricle.TYPE_GREEN:
this.setColor("#00ff00");
break;
}
};
this.setColor=function (color){
this.graphics.beginFill(color);
this.graphics.drawCircle(0,0,50);
this.graphics.endFill();
}
this.setCircleType(Cricle.TYPE_RED);//设置默认颜色
}
Cricle.prototype=new createjs.Shape();//设置图形的入口
Cricle.TYPE_RED=1;//设置常量
Cricl
|
Rect.addEventListener("click",function(e){//点击获取位置
alert("X=:"+ e.localX+", Y=:"+ e.localY);
});
Ellipse.addEventListener("dblclick",function(){//点击获取位置
alert("双击了事件");
});
/*Ticker:类似计时器,实时更新舞台*/
createjs.Ticker.setFPS(20);//设置 帧数/s
createjs.Ticker.addEventListener("tick",handlerTick);
var speedX=10;
function handlerTick(){
/*通过限制增加的范围实现,左右不断移动*/
if(Rect.x<=0){//左边
speedX=Math.abs(speedX);
}
if(Rect.x>=350){//右边-方块宽
speedX=-Math.abs(speedX);
}
Rect.x+=speedX;
stage.update();
}
|
/*1,创建文本*/
var text=new createjs.Text("Hello easeljs","26px Arial","#777");
text.x=50;
text.y=50;
text.rotation=10;
var rect=new createjs.Shape();
rect.x=text.x;
rect.y=text.y;
rect.rotation=text.rotation;
stage.addChildAt(rect,0);//添加带有子元素的
createjs.Ticker.setFPS(10);
createjs.Ticker.addEventListener("tick",handlerTicker);
function handlerTicker(e){
count++;
text.text="Hello easeljs"+count+"!"
//每次text增加宽度,重绘rect
rect.graphics.clear().beginFill("#F00").drawRect(-10,-10,text.getMeasuredWidth()+10,50);
stage.update(e);
}
|
var bitmap=new createjs.Bitmap("images/e1.png");
bitmap.x=300;
bitmap.y=300;
gameView.addChild(bitmap);
|