jQuery+css+div一些值得注意的常用语句

一、div页面布局

　　一个好的页面布局很重要，这会让你写代码的时候层次分明；

　　以2列左侧固定右侧自适应宽度为例子：

这是HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2列左侧固定右侧自适应宽度+头部+尾部</title>
<link href="layout.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="container">
  <div id="header">This is the Header</div>
  <div id="mainContent">
    <div id="sidebar">This is the sidebar</div>
    <div id="content">2列左侧固定右侧自适应宽度+头部+尾部——</div>
  </div>
  <div id="footer">This is the footer<span style="display:none">
</div>
</body>
</html>

这是css文件：

body { font-family:Verdana; font-size:14px; margin:0;}

#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:500px; background:#cf9;}
#content { margin-left:205px !important; margin-left:202px; height:500px; background:#ffa;}
#footer { height:60px; background:#9c6;}

在这里要注意float的用法以及margin的调整用法。

二、关于在一个div中用多个超链接或者其他相同元素，但其中一个是图片链接，这样会造成图片与同一行的文字会有不整齐的情况，这里有个小技巧来解决，例子如下：

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

在这之中，<img src="images/shop.png" align="absmiddle">    align=“absmiddle” 这个标签就会解决这个问题；

三、在同一个页面跳转到另一个页面，不希望改变其他固定的如菜单导航，这个时候可以使用内嵌框架iframe来实现：

<!-- Module 3 begin -->
    <div id="mainContent"><!-- Module 3 is mainly used for the need to click on the same page to display an embedded iframe framework -->
        <div id="content"><iframe id="ifrpage" name="pagename" style="height:800px; width:100%;"></iframe></div>
    </div>
    <!-- Module 3 end-->

在其他页面只需通过href的action来调用id或者name就可以，如：

<a  href="#" title="个人信息" onclick="javascript:document.getElementById('ifrpage').src='http://www.baidu.com'">个人信息</a>

其中src可以是action

<a href="#" onclick="javascript:document.getElementById('ifrside').src='list/log_list.jsp'">日志管理</a>

或者

<a href="http://www.baidu.com" target="pagename" title="查询信息">查询信息</a>

当然href同样可以是action 如：<a href="list/log_list.jsp" target="pagename" title="查询信息">查询信息</a>

四、在超链接a的情况下，如果不想有超链接有下划线，默认的超链接是有下划线的，在这里可以设置text-decoration: none;如果想恢复则设置text-decoration: underline;

还有就是超链接一旦被访问颜色就会变，这样会影响整个页面的美观，这个时候可以这样设置：

a:link {
    color:black;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    color:red;
}
a:active {
    text-decoration: none;
}

这个表示：超链接默认颜色为黑色black，没有下划线（a:link）,访问过后颜色还是不变，鼠标经过的时候颜色为red红色，活动过后的颜色不变；

五、在使用ul li的时候，想其为作为导航菜单的时候，不希望有点，希望可以在同一行，可以这样设置：

list-style-type:none;这个可以去除点，希望在同一行可以用float：left来实现；

六、补充一点  在内嵌框架iframe内嵌在一个div快中的时候，可能会出现上下滚动条，特别是在宽度在100%的情况下，还是会出现横向滚动条，这样会严重不符合页面的要求，这个时候可以在body的css中设置如：

body{
    margin :30px 0 0 0 ;
    padding : 0;
    font-size : 12px;
    font-family : sans-serif;
    background : #fff;
    overflow:-Scroll;
    overflow-x:hidden
}

overflow:-Scroll; overflow-x:hidden；这两句可以解决横向出现滚动条，相应的y就是解决纵向的滚动条；
七、在jQuery中有人老是将JavaScript中的取input中的值搞混淆，下面简单说来句：
在JavaScript中通常可以用getelementById(“#id”).value;
在jQuery中通常使用var v=$('#searchinput').val();来取值；


八、在jQuery中点击一个按钮的时候，希望他跳转到自己所期望的页面可以使用下面这个：
    $('#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;
        }
    });
 window.location.href="www.baidu.com";这个一不小心就会用到，最好记住；
九，下面简单介绍jQuery UI的日历操作：
/*------------------------日历模块------------------------*/
        $('#date').datepicker({
            /*日期基本操作*/
            dateFormat : 'yy-mm-dd',
            showWeek : true, // 显示周
            //dayNames : ['星期日'，'星期二','星期三'，'星期四','星期五'，'星期六','星期一'], //更改日期长格式，但是这是英文包 不支持 ，如要 请引入中文包
            //dayNamesMin :['日','一','二','三','四','五','六'],//引入短格式  可以
            //monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], //长格式  提示一般要引用中文包
            //altField : '#abc', //引入到另外一个input中
            //altFormat : 'dd/mm/yy', //修改引到的另一个input中的格式
            //appendText : 'calendar', //在日历框边加入提示的字段
            //weekHeader : '周', //改成中文显示周,介于Safari浏览器乱码，所以使用英文
            //firstDay : 1,//修改是从星期几开始 如：国外是从日，一，二，，，，六  中国是从一，二，，，日
            
            
            /*日历外观*/
            //disabled : 'true',  //禁用日历
            //numberOfMonths : 3,//默认情况下是显示一个日历 ，这是设置日历显示的个数
            //numberOfMonths : [3,2],//数组形式显示日历的个人，3代表显示3行，2代表每行显示2个，也就是6个
            showOtherMonths : true, //设置当月没有的日期照样显示出来，但是不可以选择
            //selectOtherMonths : true,//设置当月没有的日期照样显示出来，但是可以选择
            changeMonth : true,//设置月份下拉框可选
            changeYear : true,//设置年份下拉框可选
            //isRTL : true,//设置日历由右向左绘制
            //autoSize : true,//设置是否自动调整控件大小，以适应当前日历格式的输入
            //showOn : 'button',//设置按钮来显示日历触发
            //buttonText : 'CAL',//设置按钮文字
            showButtonPanel : true,//设置开启按钮面板
            closeText : 'Close', //设置关闭按钮文本
            currentText : 'Today', //设置获取今日日期的按钮文本
            nextText : 'Next',//设置下个月的Alt文本
            prevText : 'Prev', //设置上一个月的Alt文本
            //navigationAsdateFormat : true,//设置当前可以使用nextText，prevText，closeText，currentText 可以使用format格式
            //yearSuffix : 'Year',//在年后加文本
            
            
            /*日期选择项*/
            //日期的限制优先级，min和max最高
            maxDate : 0,//设置当前的日期之后不可选择
            hideIfNoPrevNext : true,//设置下月的点击按钮不存在
            yearRange : '1950:2020', //设置年份的长度
        });

有些还是值得记住的如以下这些经常会使用到：

$('#date').datepicker({
        dateFormat : 'yy-mm-dd',
        showWeek : true,             // show the week 
        showOtherMonths : true,     //Set up the month if the it have not array always show it but can not choose
        changeMonth : true,            //Set up in the drop-down box is optional ofthe month
        changeYear : true,            //Set up in the drop-down box is optional ofthe year
        showButtonPanel : true,        //Set up the open button panel
        closeText : 'Close',         //Set the text-button can be close
        currentText : 'Today',         //Set up for today's date button text
        nextText : 'Next',            //Set the Alt text of next month
        prevText : 'Prev',             //Set the Alt text of last month
        maxDate : 0,                //Choose after setting the current date
        hideIfNoPrevNext : true,    //Click on the button there is no set next month
        yearRange : '1950:2020',     //Set the length of the year
    });

十、关于弹出框dialog的使用最值得学习掌握：dialog是轻量级的，有很好的界面视化，下面简单说两句：

这是js中的初始化弹出框：

//init the login dialog box 
    $('#login').dialog({
        autoOpen : false,
        modal : false,
        resizable : false,
        width : 400,
        height : 320,
        buttons : {'login' : function(){
            $(this).submit();
        }},
    });

这是当点击按钮的时候调用dialog：

//when click the login button pop up the login dialog box;
    $('#login_a').click(function(){
        $('#login').dialog('open');    
    });

这是HTML中弹出框的代码内容：

<!--begin the login's  pop up dialog box -->
<form id="login" title="user login">
    <table>
        <tr><td>
            <label for="user">Account : </label>
            </td><td>
        <p>
            <input type="text" name="login_user" class="text" id="login_user" ></input>
            <span class="star">*</span>
        </p></td></tr>
        
        <tr><td><label for="pass">Password : </label>
        </td><td>
        <p>
            <input type="password" name="login_pass" class="text" id="login_pass" ></input>
            <span class="star">*</span>
        </p></td></tr>
        </table>
        <p>
        <input type="checkbox" name="expires" id="expires" checked="checked"/>
        <label for="expires">keep a week login on  </label>
        </p>
</form>
<!--end the login's  pop up dialog box -->

这是点击按钮：

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

css就不赘述了。

　　

posted on 2015-08-07 00:42  EthanCoco  阅读(1534)  评论(0)  编辑  收藏  举报

导航