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的基本处 ...
随机推荐
- 追访现代主流程序员的家庭事业观---禅宗派程序员KUROKY
Kuroky,一个被人遗忘的当代主流程序员. 在他的内心深处有着怎样的心路历程 他的快乐与悲伤,都是一个禅 独家专访kuroky: 记者:作为现代主流程序员,你内心的苦楚玉欢乐通过什么来发现? 大师: ...
- javascript笔记——jquery.each中使用continue和break的方式
jQuery.each中continue的方式是 return true break 的方式是return false
- 10款精美的HTML5表单登录联系和搜索表单
1.HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩.今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Faceboo ...
- 《HTML5与CSS3基础教程》学习笔记 ——One Day
第一章 1. 邮箱地址的URL地址包括:mailto:+邮箱地址 2. ../表示向上走一级,开头直接使用/表示根目录 第三章 1. <header>: role = “ ...
- 4_1 wp8数据绑定与独立存储空间[wp8特色开发与编程技巧]
Wp8数据绑定与独立存储空间 数据绑定为基于 Silverlight 的应用程序提供了一种显示数据并与数据进行交互的简便方法. 数据的显示方式独立于数据的管理. UI 和数据对象之间的连接或绑定使数据 ...
- 实验九--裸机LCD
一.环境 系统:ubuntu12.04 开发板:jz2440 编译器:gcc 二.说明 有空补上 三.代码 Makefile: CC = arm-linux-gcc LD = arm-linux-ld ...
- 大神是如何玩C语言的！
我在酷壳上看到一篇文章,C语言结构体里的成员数组和指针,看得感觉让我真是佩服地五体投地啊.皓哥虽说谦称自己不是高手啥的,但是写出这样的文章来,真是让我感觉自己的水平真是渣渣!我看完了感觉有点小激动,也 ...
- LiteHttp：一款‘智能’的HTTP框架类库
LiteHttp:一款‘智能’的HTTP框架类库(转自github) 简介 LiteHttp是一款简单.智能.灵活的HTTP框架库,它在请求和响应层面做到了全自动构建和解析,主要用于Android快速 ...
- SQLServer数据库表中将指定列分组转一行
不说明,直接看代码: --1. 创建表,添加测试数据 CREATE TABLE #test(code varchar(50), [values] varchar(10)) INSERT #test S ...
- 简单的下拉刷新以及优化--SwipeRefreshLayout
代码工程简要说明:以一个SwipeRefreshLayout包裹ListView,SwipeRefreshLayout接管ListView的下拉事件,若ListView被用户触发下拉动作后,Swipe ...