暂时实现目前jQuery应用,以后会渐渐添加一些新的jQuery应用
?
1.实现动态加载显示内容
jQuery动态加载内容.htm
CSS:
a{ text-decoration:none; color:White;}
a:hover{ font-weight:bolder;} ?当鼠标移到a上时字体变粗,以便区别
ul{ list-style-type:none; padding-left:0px;} ? ul默认padding-left:40px ?这个可以看开发人员工具的盒子模型
li{ float:left; padding:5px; background-color:Green;} ?float:left使li横排显示
#content{ clear:both;}
http://hi.baidu.com/eb21/blog/item/4b0b54cec3d4470a93457e4e.html
http://www.xfsq.net/thread-8285-1-1.html ? ? ??ul li 样式
jQuery:
$(function(){
$("#dh li a").click(function(){
var loadurl=$(this).attr("href");
$("#content").hide("slow",toLoad);
function toLoad(){
$("#content").load(loadurl+" #content"); 每个页面的都有id=content的div 方便加载到哪里及从哪里加载
$("#content").show("normal");}
return false; ? ? 这一句是必须的,除了结束该单击事件外(反正该执行的都执行完了) 还可以取消(return true或没有就是不取消)某元素的默认动作,如这里是标签a,将不会执行浏览器默认动作即转向href指向的页面
})
})
<ul id="dh">
<li><a href="jQuery动态加载内容.htm">首页</a></li>
<li><a href="Login.htm">登录</a></li>
<li><a href="About.htm">About</a></li>
</ul>
<div id="content">
这里是首页!
</div>
Login.htm
<div id="content">
用户名<input type="text" />
密码<input type="password" />
<input type="button" value="提交" />
</div>
About.htm
<div id="content">
这里是About页面!
</div>
以上基本实现了动态加载显示内容的效果,但还有些问题
①用户点击一个导航按钮后,该导航按钮应该显示不同样式以便用户知道点了哪个,可添加以下代码
$("#dh li a").click(function(){
var loadurl=$(this).attr("href");
$("#content").hide("slow",toLoad);
function toLoad(){
$("#content").load(loadurl+" #content");
$("#content").show("normal");}
$("#dh li").filter(".red").removeClass("red");
$(this).parent().addClass("red");
return false;
})
使用filter()函数过滤出之前点击的导航按钮(这里之前点击的导航按钮css类为red) ?为当前点击的导航按钮添加css类red(由于点击事件是位于li里的a,所以需要parent选出当前a的父元素li)?
②当动态加载内容时需要有一个正在加载页面...的提示,而load(url,[callback])函数的第二个参数函数是在请求完成时进行的,所以不行,可像如下操作
$("#dh li a").click(function(){
var loadurl=$(this).attr("href");
$("#content").hide("slow",toLoad);
$("#tishi").remove(); ? ? ? 避免每次单击页面都多一个提示
$("#tishidiv").append('<span id="tishi" style="background-color:Red; color:White;">正在加载页面...</span>');
function toLoad(){
$("#content").load(loadurl+" #content");
$("#content").show("normal");
$("#tishi").fadeOut("normal");} ? ? 待load()请求执行完毕后淡出提示
$("#dh li").filter(".red").removeClass("red");
$(this).parent().addClass("red");
return false;
})
?
2.利用cookie插件实现网页主题的设置
<link id="css" href="red.css" rel="stylesheet" type="text/css" />
<script src="jQuery-cookie.js" type="text/javascript"></script> ? ? cookie插件
<input type="button" id="blue" value="蓝色主题" />
<input type="button" id="red" value="红色主题" />
$("#blue").click(function(){
$("#css").attr({href:"blue.css"});
$.cookie("style","blue.css",{expires:1});
})
$("#red").click(function(){
$("#css").attr({href:"red.css"});
$.cookie("style","red.css",{expires:1});
})
var getcookie=$.cookie("style");
if(getcookie){
$("#css").attr({href:getcookie});}
该jQuery插件的使用 ? $("name","value",{expires:保留天数}); ? cookie名 ?cookie值 ?cookie保留天数
$("name",null); ? 删除某cookie
DownLoad jQuery.cookie.js
?
3.键盘快捷键切换页面
<ul id="ult">
<li id="zy">主页</li>
<li id="jy">交友</li>
<li id="rz">日志</li>
</ul>
<div id="dzy" class="nr">这是主页</div>
<div id="djy" class="nr">这是交友页</div>
<div id="drz" class="nr">这是日志页</div>
$(function(){
$(".nr").css("display","none"); ? ? ? 先将三个div全部不显示
$("#dzy").css("display","block"); ? 只显示主页div
$(document).keypress(function(e){ ? $(document).keypress()随时捕获按键事件
switch(e.keyCode){ ? keypress(fn)事件会给回调函数传递一个值,通过该值的keyCode属性获取按键的ASCII码值
case 97:showdiv("#dzy");break;
case 115:showdiv("#djy");break;
case 100:showdiv("#drz");break;}})
function showdiv(divid){
$(".nr").css("display","none");
$(divid).css("display","block");}
})
以上操作虽然能实现按键切换页面,但需要知道每个按键的ASCII码值不是很方便,并且不能使用组合键的形式,下面我们将用到一个js-hotkeys插件来解决这些问题 ?下载地址:http://code.google.com/p/js-hotkeys/
<script src="jquery.hotkeys-0.7.9.js" type="text/javascript"></script> ?该插件封装了bind unbind俩函数
$(expression).bind(types,option,handler) ??$(expression).bind(types,options,handler)
types:?"keydown"? "keyup" ?"keypress"
options:{combi:'alt+a',disableinInput:true} ?当只设置combi时可只写字符串"alt+a" ?disableinInput是设置是否当光标位于文本框时依然响应按键事件 ?true就是不响应,这样即使按了触发按键事件的按钮依然能输入 ?false就是响应
handler:响应函数
把上面的jQuery代码改成使用该插件的写法
$(function(){
$(".nr").css("display","none");
$("#dzy").css("display","block");
function showdiv(divid){ ? ?
$(".nr").css("display","none");
$(divid).css("display","block");}
$(document).bind('keydown',{combi:'alt+a',disableinInput:true},function(){
showdiv("#dzy");return false;})
$(document).bind('keydown',{combi:'alt+s',disableinInput:true},function(){
showdiv("#djy");return false;})
$(document).bind("keydown","alt+d",function(){
showdiv("#drz");return false;})
$(document).bind("keydown","ctrl+a",function(){
alert("ctrl+a");return false;})
})
有两点要说,一是一般组合键对应的是keyDown,否则你想你两个键都要按下再弹起后才触发事件不符合操作习惯
二是里面用到的return false;语句,前面也说过,return false可以阻止一些浏览器默认的动作,如上面的ctrl+a本来触发完按键事件后浏览器会执行全选动作,但由于加了return false;语句,此处将不会执行全选动作。
?
4.实现软键盘
?
<form action="jQuery软键盘.htm">
用户名:<input type="text" /><br />
密码:<input type="password" id="pwd" /><b id="softkeyboard">软键盘</b><br />
<input type="submit" value="提交" />
<div id="keyboard">
<div id="row0">
<input name="accent" type="button" value="`" />
<input name="1" type="button" value="1" />
<input name="2" type="button" value="2" />
<input name="3" type="button" value="3" />
<input name="4" type="button" value="4" />
<input name="5" type="button" value="5" />
<input name="6" type="button" value="6" />
<input name="7" type="button" value="7" />
<input name="8" type="button" value="8" />
<input name="9" type="button" value="9" />
<input name="0" type="button" value="0" />
<input name="-" type="button" value="-" />
<input name="=" type="button" value="=" />
<input name="backspace" type="button" value="Backspace" />
</div>
<div id="row0_shift">
<input name="tilde" type="button" value="~" />
<input name="exc" type="button" value="!" />
<input name="at" type="button" value="@" />
<input name="hash" type="button" value="#" />
<input name="dollar" type="button" value="$" />
<input name="percent" type="button" value="%" />
<input name="caret" type="button" value="^" />
<input name="ampersand" type="button" value="&" />
<input name="asterik" type="button" value="*" />
<input name="openbracket" type="button" value="(" />
<input name="closebracket" type="button" value=")" />
<input name="underscore" type="button" value="_" />
<input name="plus" type="button" value="+" />
<input name="backspace" type="button" value="Backspace" />
</div>
<div id="row1">
<input name="q" type="button" value="q" />
<input name="w" type="button" value="w" />
<input name="e" type="button" value="e" />
<input name="r" type="button" value="r" />
<input name="t" type="button" value="t" />
<input name="y" type="button" value="y" />
<input name="u" type="button" value="u" />
<input name="i" type="button" value="i" />
<input name="o" type="button" value="o" />
<input name="p" type="button" value="p" />
<input name="[" type="button" value="[" />
<input name="]" type="button" value="]" />
<input name="\" type="button" value="\" />
</div>
<div id="row1_shift">
<input name="Q" type="button" value="Q" />
<input name="W" type="button" value="W" />
<input name="E" type="button" value="E" />
<input name="R" type="button" value="R" />
<input name="T" type="button" value="T" />
<input name="Y" type="button" value="Y" />
<input name="U" type="button" value="U" />
<input name="I" type="button" value="I" />
<input name="O" type="button" value="O" />
<input name="P" type="button" value="P" />
<input name="{" type="button" value="{" />
<input name="}" type="button" value="}" />
<input name="|" type="button" value="|" />
</div>
<div id="row2">
<input name="a" type="button" value="a" />
<input name="s" type="button" value="s" />
<input name="d" type="button" value="d" />
<input name="f" type="button" value="f" />
<input name="g" type="button" value="g" />
<input name="h" type="button" value="h" />
<input name="j" type="button" value="j" />
<input name="k" type="button" value="k" />
<input name="l" type="button" value="l" />
<input name=";" type="button" value=";" />
<input name="'" type="button" value="'" />
</div>
<div id="row2_shift">
<input name="A" type="button" value="A" />
<input name="S" type="button" value="S" />
<input name="D" type="button" value="D" />
<input name="F" type="button" value="F" />
<input name="G" type="button" value="G" />
<input name="H" type="button" value="H" />
<input name="J" type="button" value="J" />
<input name="K" type="button" value="K" />
<input name="L" type="button" value="L" />
<input name=":" type="button" value=":" />
<input name='"' type="button" value='"' />
</div>
<div id="row3">
<input name="Shift" type="button" value="Shift" id="shift" />
<input name="z" type="button" value="z" />
<input name="x" type="button" value="x" />
<input name="c" type="button" value="c" />
<input name="v" type="button" value="v" />
<input name="b" type="button" value="b" />
<input name="n" type="button" value="n" />
<input name="m" type="button" value="m" />
<input name="," type="button" value="," />
<input name="." type="button" value="." />
<input name="/" type="button" value="/" />
</div>
<div id="row3_shift">
<input name="Shift" type="button" value="Shift" id="shifton" />
<input name="Z" type="button" value="Z" />
<input name="X" type="button" value="X" />
<input name="C" type="button" value="C" />
<input name="V" type="button" value="V" />
<input name="B" type="button" value="B" />
<input name="N" type="button" value="N" />
<input name="M" type="button" value="M" />
<input name="lt" type="button" value="<" />
<input name="gt" type="button" value=">" />
<input name="?" type="button" value="?" />
</div>
<div id="spacebar">
<input type="button" name="spacebar" value=" " />
</div>
</div>
</form>
以上row0,1,2,3代表还没按shif键时的键盘 ?row0,1,2,3_shift代表按下shift键时的键盘?
CSS:
<style type="text/css"> ? ? ? 刚开始键盘是隐藏的
#keyboard{ position:absolute; display:none; border:1px solid #ccc; width:640px; padding:10px; cursor:move;} ?鼠标移上时变可移动状
#spacebar input{ width:180px; ?margin-left:200px;}
#shift,#shifton{ width:70px; text-align:left;}
#row0_shift,#row1_shift,#row2_shift,#row3_shift{display:none;} ?没按shift键时这些部分隐藏
#row0,#row0_shift{ padding-left:10px;}
#row1,#row1_shift{ padding-left:50px;}
#row2,#row2_shift{ padding-left:60px;}
#shifton{ border-left:3px solid #000; border-top:3px solid #000;} ?按了shift键时shift键的样式
#softkeyboard{ cursor:pointer;}
</style>
jQuery:
<script type="text/javascript">
$(function(){
$("#softkeyboard").click(function(e){ ?单击"软键盘"
var mleft=e.pageX+5+"px"; ? ?设置显示的软件盘CSS的left及top值
var mtop=e.pageY+5+"px";
$("#keyboard").css({left:mleft,top:mtop}).toggle(); ?toggle显示软键盘
})
})
</script>
http://kendezhu.iteye.com/blog/986032最后讲的鼠标相关事件中都可以为fn传递一个参数,该参数的clinetX,clientY或pageX,pageY代表点击匹配元素或滑到匹配元素时鼠标的坐标,如下每当鼠标滑到xxx上时记录鼠标的坐标
$("#xxx").mouseover(function(e){
$("#xxx").append(e.clientX+","+e.pageY);})
下面来实现使用软键盘完成输入,往文本框里输入文字或删除文字需要用到一个插件fieldSelection
下载地址:http://plugins.jquery.com/project/fieldselection
var shifton=false; ?表明一开始shift键处于没按状态
$("#keyboard input").click(function(){
if($(this).val()=="Backspace"){ ? 按了退格键,但此处利用插件fieldSelection的replaceSelection函数没有实现(这里实现了)
$("#pwd").replaceSelection("",true);}replaceSelection函数可将选中文本由第一个参数替换,如果没选文本则在光标的后面添加第一个参数
else if($(this).val()=="Shift"){ ?按了shift键
if(shifton==false){
onShift(1); shifton=true; ?onShit(1)函数用于显示按下shift键后显示的按钮 ?然后将shift键处于按下状态
}else{onShift(0); shifton=false;}
}else{
$("#pwd").replaceSelection($(this).val(),true);?fieldSelection的replaceSelection函数实现了按普通键功能
}
})
function onShift(e){ ??onShit()函数用于控制按shift键后普通键盘的显示
if(e==1){
for(var i=0;i<4;i++){
var rowid="#row"+i;
$(rowid).hide();
$(rowid+"_shift").show();}
}else{
for(var i=0;i<4;i++){
var rowid="#row"+i;
$(rowid).show();
$(rowid+"_shift").hide();}
}}
再加一个拖拽软件盘的功能,用到easyDrag插件,下载地址:jquery.easydrag.js
<script src="jquery.easydrag.handler.beta2.js" type="text/javascript"></script>
$("#keyboard").easydrag();