jQuery+css+div--一些细节详解
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('');
这个一不小心就会出错哦 而且错的不知道怎么回事！
jQuery+css+div--一些细节详解的更多相关文章
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- jquery $.trim()去除字符串空格详解
jquery $.trim()去除字符串空格详解 语法 jQuery.trim()函数用于去除字符串两端的空白字符. 作用 该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止 ...
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- Css盒模型属性详解（margin和padding）
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
- webRTC中语音降噪模块ANS细节详解(二)
上篇(webRTC中语音降噪模块ANS细节详解(一))讲了维纳滤波的基本原理.本篇先给出webRTC中ANS的基本处理过程,然后讲其中两步(即时域转频域和频域转时域)中的一些处理细节. ANS的基本处 ...
随机推荐
- codeblocks 配置交叉编译和调试环境
我要用codeblocks交叉编译和调试arm开发板上的程序,宿主机是ubuntu12.04.开发板是嵌入式linux操作系统. 1.配置交叉编译环境 由上到下,1处直接选择即可.2处是你交叉编译器安 ...
- tcp 和 udp 缓冲区的默认大小及设置【转】
1. tcp 收发缓冲区默认值 [root@ www.linuxidc.com]# cat /proc/sys/net/ipv4/tcp_rmem 4096 87380 4161536 ...
- 移动端边框1px的实现
查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放. border-right fr:after{ height:100%; content:' '; width: ...
- 8款HTML5动画特效推荐源码
1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...
- Jquery 学习三
一.each语句 1.each语句的功能 在jQuery中,通过$函数获取的都是jQuery对象.通过测试可知,jQuery对象是一个类数组的特殊对象,其是DOM对象的集合.而each语句就是专门用于 ...
- 配置PostgreSQL Streaming Replication集群
运行环境: Primary: 192.168.0.11 Standby: 192.168.0.21, 192.168.0.22 OS: CentOS 6.2 PostgreSQL: 9.1.2 版本以 ...
- IPC with pipes, demo of 'popen'
#include <stdio.h> #include <unistd.h> int main() { FILE* stream = popen ("sort&quo ...
- 基础学习总结（八）--Intent中显示意图和隐式意图的用法
Intent(意图)主要是解决Android应用的各项组件之间的通讯.Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到对应的组 ...
- UCML平台中 如何设置列表单元格中的链接失效
解决方案: 找到“a.datagrid-cell-bclink”,麻烦的是这个标记是由js动态加载的,需要等待这个加载完成:等加载完成后,删除a标记“$(“a.datagrid-cell-bclink ...
- C#实现斐波那契数列求和
一个比较典型的递归调用问题,总结一下.网上看了一个链接,比较好:http://blog.csdn.net/csd_xiaojin/article/details/7945589 贴个图先,回头再整理: ...