jQuery+css+div--一些细节详解
（一）、首先、让我们认识一下最基本普通的alert()弹出框！（改变alert()提示弹出框的样式） 我们在写html或是jsp页面的时候，谁都不希望自己精心设计，且非常美观的页面颜色布局被破坏掉吧！但是恰恰不巧的是jQuery自带的alert()弹出提示框就会影响这一美观； 在不同的浏览器中，alert()方法，弹出的样式真的很难看；所以为了解决这一方法，我门可以自定义自己的alert()，让我们来看看这些代码吧！
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="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="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:100%; /* height :100%; */ margin :0 auto; /* background : yellow; */ }
这是我们的祖先级别的，是最外层的一个快，我们在他的里面加东西，
#header{ width : 1540px; height : 100px; /* background : url(images/header_bg.png); */ /* background :grey; */ position : absolute; top : 0; }
#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('');
这个一不小心就会出错哦 而且错的不知道怎么回事！
/*
**author:EthanCoco
**sina:18720989539
**WeChat:dyznzyl
**Email:lijianlin0204@163.com
**欢迎收藏
*/
posted on 2015-08-08 04:03 EthanCoco 阅读(1849) 评论(1) 编辑 收藏 举报
