Query+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);
}

//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();

<!--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 -->

//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;
        }
    });

$(‘#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>&nbsp;
            <a href="javascript:void(0);" onclick="all_target_a(‘www‘)" >WEBPAGE</a>    &nbsp;
            <a href="javascript:void(0);" onclick="all_target_a(‘tieba‘)">POSTBAR</a>&nbsp;
            <a href="javascript:void(0);" >KNOW</a> &nbsp;
            <a href="javascript:void(0);" onclick="all_target_a(‘music‘)">MUSIC</a>&nbsp;
            <a href="javascript:void(0);" onclick="all_target_a(‘image‘)">PICTURE</a>&nbsp;
            <a href="javascript:void(0);" onclick="all_target_a(‘v‘)">VIDIO</a>&nbsp;
            <a href="javascript:void(0);" onclick="all_target_a(‘map‘)">MAP</a>&nbsp;
            <a href="javascript:void(0);" onclick="all_target_a(‘baike‘)">ENCYCLOPEDIAS</a>&nbsp;
            <a href="javascript:void(0);" onclick="all_target_a(‘wenku‘)">LIBRARY</a>&nbsp;
            <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(‘‘);这个一不小心就会出错哦 而且错的不知道怎么回事！