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的基本处 ...
随机推荐
- eBay 开发流程
1[记录]注册成为eBay开发者(eBay Developers Program)+创建Sanbox Key和Production Key http://www.crifan.com/register ...
- JS数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
- Java关键字及其作用
Java关键字及其作用 一. 关键字总览 访问控制 private protected public 类,方法和变量修饰符 abstract class extends fin ...
- ie、IE兼容模式，提示SCRIPT1028: 缺少标识符、字符串或数字
旧版ie下json最后一项是不允许有逗号的 为了更好的兼容各个浏览器,json最后的逗号最好不加
- C#中 StringBuilder类 与 String类的区别---（转）
在找工作的时候,去了些公司,避免不了要面试和笔试.不过一般最起初的是笔试.我印象中有这样有一道题目:StringBuilder类与 String类的区别?那时候我不太清楚这两个类的区别,今天在看代 ...
- 解决IE8打开默认弹出开发者工具的问题
有一次开发用ie调试后再次打开总是自动弹出ie开发者工具,而且在网页的上一层弹出.点击X关闭后再次打开还是会弹出! 找ie的设置也没有找到关闭的选项. 在网上搜了很多资料才找到解决的办法,在这里分享一 ...
- 巧用Excel分列功能处理数据
Technorati 标签: 数据处理 今天,主要工作就是处理测试数据,统计汇总成图表来显示.先来说说要求,然后给出我在折腾这堆数据中遇到的问题以及解决方法. 问题要求: 格 ...
- PCB常用度量衡单位
1英尺=12英寸 1英寸inch=1000密尔mil 1mil=25.4um 1mil=1000uin (mil密耳有时也成英丝) 1um=40uin(有些公司称微英寸为麦,其实是微英寸) 1OZ=2 ...
- 5.servlet cookie自动登录的实例
1.要建的文档,.java用servlet创建 2.建一张登陆表格 index.jsp <%@ page language="java" import="java. ...
- js 鼠标事件的抓取代码
js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...