function myalert(str){
var msgw,msgh,bordercolor;
msgw=400;//Prompt window width
msgh=100;//Prompt window height
titleheight=25 //Prompt window title height
bordercolor="skyblue";//Prompt window border color
titlecolor="skyblue";//Prompt window title color var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height; var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="ightCyan";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj); var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001"; var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="Close";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
自定义了一个myalert()方法,在jQuery中直接调用就可以,就把alert()改成myalert()就可以;
这些里面的具体内容对于直接引用人来说不需要深究,可以把它当做UI那样或者说插件来用就可以,背景颜色可以自己修改,添加按钮也可以自己修改;
值得说的是,对于普通学jQuery的人来说,只要修改背景颜色即可,因为alert()仅仅是个提示作用,只需要和你的颜色搭配恰如你想要的就可以,不需要深究,但是这个小细节确值得让人注意;
(二)、在HTML开发的时候,不可能太过于每个颜色等细节都要自己去设计,这样在开发中是不实际的,所以大家可以在www.jquery.ui.com上去下载UI模板样式;
但是,模板样式总是觉得不是自己喜欢的那种,所以就会需要做些细微的改变,这就要对颜色参照,这样就不至于就只知道赤橙黄绿青蓝紫这几种了,推荐这个颜色表格作为参考,这个在开发中值得拥有,这也是一个小小的细节,值得注意:
可以点击这个链接收藏http://xh.5156edu.com/page/z1015m9220j18754.html
颜色表及html代码 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
不过要强调的是,改UI的颜色也不是那么容易哦!提示小方法,在我们设计页面的时候,在网页我们右键点击,打开“审查元素”在里面去找你需要改变布局颜色的那块,找到对应元素的class或是id,具体怎么操作,就不赘述了!
(三)、在提出dialog对话框的时候,submit按钮如何获取dialog本身表单中的文本值,空值的时候就提示,有值的时候就执行相应的行动,但是我要说的不是怎么判断,而是判断的位置在哪里。
看这样一段代码:
//init the question dialog box , and judge the input word if is null then change to the searching page
$('#question').dialog({
autoOpen : false,
modal : true,
resizable : false,
width : 520,
height : 500,
buttons : {'Submit' : function(){ $(this).submit();
}},
//buttons : {'canclel' : function(){}},
}).buttonset();
这段代码的意思是:('#question')是form表单的id,这是对form表单的初始化,在末尾buttons:{}加了个submit按钮在dialog本身上,这个submit不是在form表单中加的,我把form表单代码也列出来吧!
这是form表单代码
<!--begin Searching the questions' pop up dialog box -->
<form id="question" title="ask question">
<input type="hidden" id="id"></input>
<input type="hidden" id="name"></input> <table>
<tr><td>
<label for="title">QuestionName: </label>
</td><td>
<p>
<input type="text" name="title" class="text" style="width:380px;" id="title" value="" ></input>
</p></td></tr>
</table> <div>
<script id="editor" type="text/plain" style="width:480px;height:400px;"></script>
</div >
</form>
<!--end Searching the questions' pop up dialog box -->
大家可以看到,form代码中本身是没有submit的,是在dialog初始化的时候添加进去的,这时候问题来了,我们在jQuery中初始化了dialog,然后就该调用他吧!
附上调用代码:
//pop up the ask question dialog box when the search-text is empty;
$('#search_button').click(function(){
// alert("button");
var v=$('#searchinput').val(); // alert(v);
if(v==''){
$('#question').dialog('open');
}else{
// alert("sdhsdh");
window.location.href='http://zhidao.baidu.com/search?lm=0&rn=10&pn=0&fr=search&ie=gbk&word='+v;
}
});
当带有id为search_button的按钮被点击的时候,我们判断后调用
$('#question').dialog('open');这行代码打开dialog对话框,没有问题,那让我们回到原来的问题上:
我想点击submit的时候获取form表单带id为title的值,我们很容易知道怎么获得var m=$('#title').val();
然后判断:
if(m==''){
myalert('please input question name!');
}else{
window.location.href='http://zhidao.baidu.com/search?lm=0&rn=10&pn=0&fr=search&ie=gbk&word='+m;
$(this).dialog('close');
}
如果怎么样,然后怎么样,但是,这段代码放在那里才起作用呢;我们肯定会在dialog初始化那里找,因为只有那里有你的文本值,有你的submit,可是最终放那里,却不清楚:想到的几点要放的可能位置:放在buttonset().click(function(){});去连接起来,实验证明不行,
或者可以放在$(this).submit().click(function(){});这里,可是大家注意点就会知道,这里也不行,他本身就在submit定义的回调函数里面,而你submit()这个最后的并没有回调函数,所以行不通;
正确的方法是放在submit初始化的第一个函数里面,让他在一开始就初始化,连submit也初始化内部,当你点击的时候才做出判断:
附正确代码:
//init the question dialog box , and judge the input word if is null then change to the searching page
$('#question').dialog({
autoOpen : false,
modal : true,
resizable : false,
width : 520,
height : 500,
buttons : {'Submit' : function(){
// $('#id').val($('#title').val());
var m=$('#title').val();
if(m==''){
myalert('please input question name!');
}else{
window.location.href='http://zhidao.baidu.com/search?lm=0&rn=10&pn=0&fr=search&ie=gbk&word='+m;
$(this).dialog('close');
} // $(this).submit();
}},
//buttons : {'canclel' : function(){}},
}).buttonset();
(四)、div,css布局小技巧
在开始一段主页面的时候,我们都会提前写好一个div+css基本布局框架,然后才进行在各个模块的div添加各自的子模块,可是随着div css的不断增加,一旦css出现点难以发现的误差是,你就会发现代码全乱了,页面不是自己想要的了,这样改如何解决呢,下面来看看吧:
以最简单的一个模块来看吧:
<div id="container">
<!-- Module 1 begin -->
<div id="header"><!-- Module 1 "header" Module ,including three sub modules【header_main,bar,search】 --> <div class="header_main"> <!--sub module 1【header_main】:This module contains the registration login as well as the personnel information and other information"-->
<div class="listbar">
<div class="listbar_p">
<a href="javascript:void(0);" id="reg_a">REG</a>
<a href="javascript:void(0);" id="member">USER</a>
|
<a href="javascript:void(0);" id="login_a">LOGING</a>
<a href="javascript:void(0);" id="logout">LOGOUT</a>
<a href="http://zhidao.baidu.com/shop" title="BAIDU_SHOP"><img src="data:images/shop.png" align="absmiddle"></a>
<a href="javascript:void(0);" id="home" onclick="all_target_a('www')">BAIDUHOME</a>
</div>
</div>
</div> <br class="clearfloat"/> <div id="bar"><!--sub module 2【bar】:This module contains the "easy to use hyperlink"-->
<a href="javascript:void(0);" onclick="all_target_a('news')">NEWS</a>
<a href="javascript:void(0);" onclick="all_target_a('www')" >WEBPAGE</a>
<a href="javascript:void(0);" onclick="all_target_a('tieba')">POSTBAR</a>
<a href="javascript:void(0);" >KNOW</a>
<a href="javascript:void(0);" onclick="all_target_a('music')">MUSIC</a>
<a href="javascript:void(0);" onclick="all_target_a('image')">PICTURE</a>
<a href="javascript:void(0);" onclick="all_target_a('v')">VIDIO</a>
<a href="javascript:void(0);" onclick="all_target_a('map')">MAP</a>
<a href="javascript:void(0);" onclick="all_target_a('baike')">ENCYCLOPEDIAS</a>
<a href="javascript:void(0);" onclick="all_target_a('wenku')">LIBRARY</a>
<a href="javascript:void(0);" onclick="all_target_a('jingyan')">EXPERIENCE</a>
</div> <div id="search"><!--sub module 3【search】:Contains "quick search queries and quick questions"-->
<div class="search_p"> <!-- <h1>BaiDu For Know</h1> -->
<!-- <a href="http://zhidao.baidu.com/" ><img src="data:images/header.png" align="absmiddle" class="bdknow"></a> -->
<input id="searchinput" class="search_blank" maxlength="256" size="46" name="word" value="" autocomplete="off" />
<button id="search_button" class="btn-global">SEARCH-ANSWER</button>
<a href="show_question.html" target="pagename" class="question">QUESTION</a> </div> </div>
</div>
<!-- Module 1 end -->
</div>
在container下有一个header模块,而在header模块下有三个子模块,我们用第一个来举例
首先我先设置container的css:
#container {
width:%;
/* height :100%; */
margin : auto;
/* background : yellow; */
}
这是我们的祖先级别的,是最外层的一个快,我们在他的里面加东西,
#header{
width : 1540px;
height : 100px;
/* background : url(images/header_bg.png); */
/* background :grey; */
position : absolute;
top :;
}
#header .header_main{
/* width : 1540px; */
height : 20px;
margin : 0 auto;
}
#header .header_main .listbar{
/* background : red; */
width : 1540px;
/* text-align : center; */
/* padding :5px; */
font-size : 16px;
/* float : left; */ }
#header .header_main .listbar .listbar_p{
width : 1400px;
float : left;
/* background : yellow; */
margin-left:80px;
/* text-align : center; */
}
大家可以看到这些是一层覆盖一层的 ,但是在用的时候我想调整一些小的间距的时候就很难去判断了;
如果大家有仔细看我的注释掉的代码就会发现,我们可以为每个div设置背景颜色,这样就可以直观的看出谁在谁里面,谁和谁之间有多少距离,这样,最里层的div我们布局的时候就可根据需要自行很简单的调整了,就不会发现改了这个有没有用,有了背景,改没改好,颜色告诉你;
(五)、提交按钮的时候form表单用与不用之间的取舍
上面我们将到,在dialog里面设置了自己的submit,而不是在dialog的form表单里面,
但是如果在form表单里面有了自己的submit按钮的时候呢,这个时候你在写JavaScript的时候当你要跳转到指定的页面的时候,form表单阻止了你的行动,如:
<form>
<table>
<tr><td><span class="sp">please use a word to discript your question:</span></td></tr>
<tr><td>
<p>
<textarea autofocus rows="1" name="titlelist" class="textlist" style="width:500px;" id="titlelist" value="" ></textarea>
</p></td></tr>
<tr><td><span class="spp">Question supplement:</span></td></tr>
<tr><td>
<p><textarea rows="5" name="titlelistp" class="textlistp" style="width:500px; resize:none; overflow-y:hidden;" id="titlelistp" value="" ></textarea></p></td></tr>
<tr><td><br/><br/></td></tr>
<tr><td><br/><br/></td></tr>
<tr><td><br/><br/></td></tr>
<tr><td><br/><br/></td></tr>
<tr><td><button id="btppp" onclick="history.back() ;">Back</button><button id="btpp">Cancel</button><button id="btp" >Submit</button></td></tr>
</table>
</form>
当我想提交的时候有如下js代码,却是无法执行成功:
$('#btp').click(function(){
var vm=$('#titlelist').val()+$('#titlelistp').val();
if($.cookie('user')){
if(vm == ''){
alert('please enter your question');
}else{
window.location.href='http://zhidao.baidu.com/search?lm=0&rn=10&pn=0&fr=search&ie=gbk&word='+vm;
}
}else{
$('#login').dialog('open');
}
});
思路完全没有问题,可是就是无法跳转到
window.location.href='http://zhidao.baidu.com/search?lm=0&rn=10&pn=0&fr=search&ie=gbk&word='+vm;这个指定的页面,
这个时候我们只需要把form那层衣服去掉就可以了,不要了他,就不会阻止了,这个小细节要注意,因为大家会有本能觉得,我有input 我有 submit 我要提交 是不是要弄个表单form来提交啊 其实在用jQuery的时候就不要太固有思维了。 (六)、一不小心就会出错的js编写,清空input text值的方法:
这个小细节要注意啊 我们知道取值:
var vm=$('#titlelist').val();
那么清空呢?
受固有思维getelementbyid().value()="";
的影响,我们会这样清空值:
$('#titlelist').val()=‘’;
这是错误的,要注意这个细节,了解
$('#titlelist')这是什么意思,所以正确的表达是这样的:
$('#titlelist').val('');
这个一不小心就会出错哦 而且错的不知道怎么回事!