EASYUI表单扩展

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!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>禁止访问</title>

<script type=”text/javascript” src=”jquery-1.4.4.min.js”></script>

<script type=”text/javascript” src=”jquery.easyui.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”themes/default/easyui.css”>

<link rel=”stylesheet” type=”text/css” href=”themes/icon.css”>

<script>

<!– 导入jquery.js  和easy_ui.js 自定义自己的 JS  家庭地址 是验证密码的–>

$(function(){

  $(‘#uiform input’).each(function () {

            if ($(this).attr(‘required’) || $(this).attr(‘validType’))

                $(this).validatebox();

        })

});

$.extend($.fn.validatebox.defaults.rules, {

    CHS: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5]+$/.test(value);

        },

        message: ‘请输入汉字’

    },

    ZIP: {

        validator: function (value, param) {

            return /^[1-9]\d{5}$/.test(value);

        },

        message: ‘邮政编码不存在’

    },

    QQ: {

        validator: function (value, param) {

            return /^[1-9]\d{4,10}$/.test(value);

        },

        message: ‘QQ号码不正确’

    },

    mobile: {

        validator: function (value, param) {

            return /^((\(\d{2,3}\))|(\d{3}\-)) 13\d{9}$/.test(value);

        },

        message: ‘手机号码不正确’

    },

    loginName: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5\w]+$/.test(value);

        },

        message: ‘登录名称只允许汉字、英文字母、数字及下划线。’

    },

    safepass: {

        validator: function (value, param) {

            return safePassword(value);

        },

        message: ‘密码由字母和数字组成,至少6位’

    },

    equalTo: {

        validator: function (value, param) {

            return value == $(param[0]).val();

        },

        message: ‘两次输入的字符不一至’

    },

    number: {

        validator: function (value, param) {

            return /^\d+$/.test(value);

        },

        message: ‘请输入数字’

    },

    idcard: {

        validator: function (value, param) {

            return idCard(value);

        },

        message:’请输入正确的身份证号码’

    }

});

/* 密码由字母和数字组成,至少6位 */

var safePassword = function (value) {

    return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\ \\\/\’\”]*)|.{0,5})$|\s/.test(value));

}

var idCard = function (value) {

    if (value.length == 18 && 18 != value.length) return false;

    var number = value.toLowerCase();

    var d, sum = 0, v = ’10×98765432′, w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = ‘11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91’;

    var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);

    if (re == null || a.indexOf(re[1]) < 0) return false;

    if (re[2].length == 9) {

        number = number.substr(0, 6) + ’19’ + number.substr(6);

        d = [’19’ + re[4], re[5], re[6]].join(‘-‘);

    } else d = [re[9], re[10], re[11]].join(‘-‘);

    if (!isDateTime.call(d, ‘yyyy-MM-dd’)) return false;

    for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];

    return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));

}

var isDateTime = function (format, reObj) {

    format = format || ‘yyyy-MM-dd’;

    var input = this, o = {}, d = new Date();

    var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);

    var len = f1.length, len1 = f3.length;

    if (len != f2.length || len1 != f4.length) return false;

    for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;

    for (var i = 0; i < len; i++) o[f1[i]] = f2[i];

    o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);

    o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);

    o.dd = s(o.dd, o.d, d.getDate(), 31);

    o.hh = s(o.hh, o.h, d.getHours(), 24);

    o.mm = s(o.mm, o.m, d.getMinutes());

    o.ss = s(o.ss, o.s, d.getSeconds());

    o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);

    if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;

    if (o.yyyy < 100) o.yyyy += (o.yyyy > 30   1900 : 2000);

    d = new Date(o.yyyy, o.MM – 1, o.dd, o.hh, o.mm, o.ss, o.ms);

    var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;

    return reVal && reObj   d : reVal;

    function s(s1, s2, s3, s4, s5) {

        s4 = s4 || 60, s5 = s5 || 2;

        var reVal = s3;

        if (s1 != undefined && s1 != ” || !isNaN(s1)) reVal = s1 * 1;

        if (s2 != undefined && s2 != ” && !isNaN(s2)) reVal = s2 * 1;

        return (reVal == s1 && s1.length != s5 || reVal > s4)   -10000 : reVal;

    }

};

</script>

</head>

<body>

<table class=”grid” id=”uiform”>

<tr><td>登录名:</td><td><input  required=”true” id=”txtUsername” type=”text” class=”txt03″ /></td><td>真实姓名:</td><td><input id=”txtTruename” validType=”CHS” required=”true” type=”text” class=”txt03″ /></td></tr>

<tr><td>登录密码:</td><td><input validType=”safepass”  required=”true” id=”txtPassword” name=”password” type=”password” class=”txt03″ /></td><td>Email:</td><td><input id=”txtEmail” name=”email”  validType=”email” type=”text” class=”txt03″ /></td></tr>

<tr><td>身份证号:</td><td><input validType=”idcard” id=”txtIdcard” name=”idcard” type=”text” class=”txt03″ /></td><td>QQ:</td><td><input validType=”QQ” id=”txtQq” name=”qq” type=”text” class=”txt03″ /></td></tr>

<tr><td>手机:</td><td><input validType=”mobile” id=”txtMobile” name=”mobile” type=”text” class=”txt03″ /></td><td>电话:</td><td><input id=”txtTel” name=”tel” type=”text” class=”txt03″ /></td></tr>

<tr><td>家庭住址:</td><td colspan=”3″><input validType=”equalTo[txtMobile]” style=”width:80%” id=”txtHomeaddr” name=”homeaddr” type=”text” class=”txt03″ /></td></tr>

<tr><td>备注:</td><td colspan=”3″> <input type=”text” style=”width:80%” class=”txt03″ id=”txtRemark”></textarea></td></tr>

<tr><td>&nbsp;</td><td colspan=”3″><input id=”Checkbox1″ type=”checkbox” /><label>超级管理员</label>&nbsp;&nbsp;<input id=”Checkbox2″ type=”checkbox” /><label>禁用</label></td></tr>

</table

</body>

</html>

js判断textarea输入的字符数

JS实现始终在屏幕右下角的图片源码

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>标题页</title>
<SCRIPT LANGUAGE=”JavaScript”>
function setVariables() {
imgwidth=235;      //图像的宽度
imgheight=19;      //图像的高度
if (navigator.appName == “Netscape”) { //netscape下的位置设置
    horz=”.left”;
    vert=”.top”;
    docStyle=”document.”;
    styleDoc=””;
    innerW=”window.innerWidth”;
    innerH=”window.innerHeight”;
    offsetX=”window.pageXOffset”;
    offsetY=”window.pageYOffset”;
}
else { //ie下的位置设置
    horz=”.pixelLeft”;
    vert=”.pixelTop”;
    docStyle=””;
    styleDoc=”.style”;
    innerW=”document.body.clientWidth”;
    innerH=”document.body.clientHeight”;
    offsetX=”document.body.scrollLeft”;
    offsetY=”document.body.scrollTop”;
   }
}
function checkLocation()
{
    objectXY=”rightBottom”;         //获取始终显示在右下角的div
    var availableX=eval(innerW);    //最大x坐标
    var availableY=eval(innerH);    //最大y坐标
    var currentX=eval(offsetX);     //鼠标当前的x坐标
    var currentY=eval(offsetY);     //鼠标当前的y坐标
    x=availableX-(imgwidth+30)+currentX; //最终div的x坐标
    y=availableY-(imgheight+20)+currentY;//最终div的y坐标
    evalMove();
    setTimeout(“checkLocation()”,10);    //定时移动
}
function evalMove() {               //移动到指定位置
    eval(docStyle + objectXY + styleDoc + horz + “=” + x);
    eval(docStyle + objectXY + styleDoc + vert + “=” + y);
}
</script>
</head>
<body bgcolor=”#fef4d9″ onload=”setVariables(); checkLocation();”>
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
我爱编程网<br />
<div id=”rightBottom” style=”position:absolute; visibility:show; left:235px; top:50px; z-index:2″>
<table width=10 bgcolor=#ffffff><td>
<a href=”http://www.google.net” onmouseover=”window.status=’我爱的搜索’;return true” onmouseout=”window.status=”;return true”><center><img src=”logo1.gif” width=”240″ height=”20″ border=”0″></center></a></td>
</table>
</body>
</html>

js添加删除行和双击变文本框

<!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>
    <title>js添加删除行和双击变文本框—阿会楠练习作品</title>
    <style type=”text/css”>
    *{
        font-size:12px;
    }
    #myTable{
        background:#D5D5D5;
        color:#333333;
    }
    
    #myTable tr{
        background:#F7F7F7;
    }
    #myTable tr th{
        height:20px;
        padding:5px;
    }
    #myTable tr td{
        padding:5px;
    }
    </style>
    <script type=”text/javascript”>
    function $(obj){
        return document.getElementById(obj);
    }
    
    var num = 0;
    function row(id){
        //构造函数
        this.id = $(id);
    }
    row.prototype = {
        //插入行
        insert:function(){
            num = num + 1;
            var newTr = this.id.insertRow(-1);
            var td_1 = newTr.insertCell(0);
            var td_2 = newTr.insertCell(1);
            var td_3 = newTr.insertCell(2);
            td_1.innerHTML = num;
            td_2.innerHTML = “脚本之家 www.jb51.net“;
            td_3.innerHTML = “<input type=’button’ onclick=’delRow(this)’ value=’删除’ >”;
        },
        //删除行
        del:function(obj){
            var i = obj.parentNode.parentNode.rowIndex;
            this.id.deleteRow(i);
        }
    }
      
    function addRow(){
        var row2 = new row(“myTable”);
        row2.insert();
    }
    
    function delRow(obj){ 
        var row1 = new row(“myTable”);
        row1.del(obj);
    }
    
    var inputItem; // 输入框句柄
    var activeItem; // 保存正在编辑的单元格
    
    //转成文本
    function changeToText(obj){
        if( obj && inputItem ) {
            // 如果存在正在编辑的单元格, 则取消编辑状态, 并将编辑的数据保存起来
            var str = ” “;
            if(inputItem.value != “”) 
                str = inputItem.value;
            obj.innerText = str;   
        }
    }
    
    //转成编辑
    function changeToEdit(obj){
         if( !inputItem ) {
              inputItem = document.createElement(‘input’);
              inputItem.type = ‘text’;
              inputItem.style.width = ‘100%’;
         }
        // inputItem.style.display = ”;
         inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上
         obj.innerHTML = ”; // 清空单元格的数据
         obj.appendChild(inputItem);
         inputItem.focus();
         activeItem = obj;
    }
    
    
    //双击时文本变成文本框
    document.ondblclick = function(){
        if(event.srcElement.tagName.toLowerCase() == “td”){
            if(!inputItem){
                inputItem = document.createElement(“input”);
                inputItem.type = “text”;
                inputItem.style.width = “100%”;
            }
            changeToText();
            changeToEdit(event.srcElement);
        }else{
            event.returnValue = false;
            return false;
        }
    }
    
    //单击时文本框变成文本
    document.onclick = function(){
        if(event.srcElement.parentNode == activeItem || event.srcElement == activeItem)
            return;
        else
            changeToText(activeItem);
    }
    </script>
</head>
<body>
<input type=”button” onclick=”addRow()” value=”插入一行” />
<table id=”myTable” border=”0″ cellpadding=”0″ cellspacing=”1″>
<tr><th>编号</th><th>姓名</th><th>操作</th></tr>
</table>
</body>
</html>

css中style与visibility区别与如何使用

大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。

当visibility被设置为”hidden”的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置

—————————————————————

例子:

<script language=”JavaScript”>

function toggleVisibility(me){

if (me.style.visibility==”hidden”){

  me.style.visibility=”visible”;

  }

else {

  me.style.visibility=”hidden”;

  }

}

</script>

<div onclick=”toggleVisibility(this)” style=”position:relative”>第一行文本将会触发”hidden”和”visible”属性,注意第二行的变化。</div>

<div>因为visibility会保留元素的位置,所以虽然第一行看不见了但位置还在,第二行内容不会上下移动。</div>

—————————————————————

解释:注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为”hidden”的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。

—————————————————————

另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。

当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。

将display设置为inline,将使其行为和元素inline一样—即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。

————————————————————–

例子:-

<script language=”JavaScript”>

function toggleDisplay(me){

if (me.style.display==”block”){

  me.style.display=”inline”;

  alert(“文本现在是:’inline’.”);

  }

else {

  if (me.style.display==”inline”){

  me.style.display=”none”;

  alert(“文本现在是:’none’. 3秒钟后自动重新显示。”);

  window.setTimeout(“blueText.style.display=’block’;”,3000,”JavaScript”);

  }

  else {

  me.style.display=”block”;

  alert(“文本现在是:’block’.”);

  }

  }

}

</script>

<div>在<span id=”blueText” onclick=”toggleDisplay(this)” style=”color:blue;position:relative;cursor:hand;”>蓝色</span>文字上点击来查看效果.</div>

—————————————————————

最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)

—————————————————————

display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例:

<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1>

<P><SPAN id=”oSpan” style=”background-color: #CFCFCF;”>This is a SPAN</SPAN> in a sentence.</P>

<P>

<input type=button value=”Inline” onclick=”oSpan.style.display=’inline'”>

<input type=button value=”Block” onclick=”oSpan.style.display=’block'”>

<input type=button value=”None” onclick=”oSpan.style.display=’none'”>

<input type=button value=”Hidden” onclick=”oSpan.style.visibility=’hidden'”><input type=button value=”Visible” onclick=”oSpan.style.visibility=’visible'”>

</P>

<UL>

<LI>将元素设为 block,会在该元素后换行。</LI>

<LI>将元素设为 inline,会消除元素换行。</LI>

<LI>将元素设为 none,隐藏该元素内容。</LI>

</UL>

—————————————————————

《太难了》:

同时,关于display:inline;和float:left;两者的区别可以参看该篇文章:

(display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:left,是针对块级元素的浮动形式,是不同形式的两种状态。)http://www.andymao.com/andy/post/42.html

http://bbs.blueidea.com/thread-2596793-1-1.html

—————————————————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

<title>float &inline</title>

<style>

*{text-align:center;padding:4px;}

div,p{text-align:left;}

span{/*float:right;*/ background:#f5f5f5;border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;}

ul#inline li{ display:inline; list-style:none;border-left:1px #ccc solid;width:300px; background:#f5f5f5;/* float:left*/;}

ul#float li{ float:left;display:inline; list-style:none;border-left:1px #666 solid;width:300px; background:#f5f5f5; }

</style>

</head>

<body>

<span style=”width:300px;”>span为内联/inline元素,给他宽度赋值是没有效果的。</span>

<span style=”width:100px; float:right;”>span为内联/inline元素,给他宽度赋值100px+float:right;可以看到有了宽度。</span>

<div>

<p>这个li被定义为内联/inline,设置宽度没有效果</p>

<ul id=”inline”>

    <li>test</li>

    <li>test</li>

</ul>

</div>

<div>

<p>这个li被定义为内联/inline+float:left,设置宽度有效果</p>

<ul id=”float”>

    <li>test</li>

    <li>test</li>

</ul>

</div>

</body>

</html>

javascript+CSS实现Tab效果

利用Javascript和CSS来实现选项卡特效:

代码如下:

引用
<!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>tabdemo</title>

<style type=”text/css”>

body{

font-family:”Courier New”, Courier, monospace;

text-align:center

}

#tabDIV{

border:solid 1px #0099FF;

width:500px;

font-family:”Courier New”, Courier, monospace 12px;

line-height:25px;

text-align:left;

}

#tabHead{

font:bold;

display:block;

background-color:#CCCCCC;

}

.curTab{

padding-left:2em;

color:#0099FF;

float:left;

overflow:hidden;

}

.otherTab{

}

a{

text-decoration:none;

font-size:12px

}

a:hover{

text-decoration:underline;

font-size:12px

}

</style>

<script type=”text/javascript”>

function showTab(tabid){

var tabDiv = document.getElementById(“tabDIV”);

var taContents = tabDiv.childNodes;

for(var i=0; i<taContents.length; i++)

{

  if(taContents[i].id!=null && taContents[i].id != ‘tabHead’)

  {

      taContents[i].style.display = “none”;

  }

}

document.getElementById(tabid).style.display=”block”;

}

</script>

</head>

<body>

<h1 align=”center”>Javascript+CSS TabDemo</h1>

<div id=”tabDIV”>

<div id=”tabHead”>

<a href=”javascript:showTab(‘Content1’)”>EngList</a>

<a href=”javascript:showTab(‘Content2’)”>中文 </a>

</div>

<div id=”Content1″ style=”display:none”>

<p style=”padding-left:5em”>

hello javaworld</br>

hello javaeye<br/>

</p>

</div>

<div id=”Content2″ style=”display:none”>

<p style=”padding-left:5em”>

你好!javaworld</br>

你好! javaeye<br/>

</p>

</div>

<!– end tabHead –>

</div>

<!– end tabDIV –>

</body>

</html>

  • tab.rar (933 Bytes)
  • 下载次数: 68

用户名、邮箱验证

 

 

附上一张效果图

 

 

 

 

<!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-Typecontent=”text/html; charset=utf-8” />
  <title>无标题文档</title>
  <style>
  .errMsg{font-size:12px; color:#F00;}
  </style>
  <script>
  function nameerr(){
  var nameval = document.getElementById(“userName”).value;
  var reg = /^[a-z|A-Z]{1}[a-z|A-Z|0-9|_]{5,19}$/;
  //alert(reg.test(nameval));
  if(reg.test(nameval)){
   
  clearErr(“userNameCk”);
  return true;
  }else{
  document.getElementById(“userNameCk”).style.display=””;
  document.getElementById(“userNameCk”).innerHTML = “用户名非法”;
  return false;
  }
   
  }
   
  function clearErr(eleId){
  document.getElementById(eleId).style.display=”none”;
  }
   
  function verifyEmail(){
  var emailval = document.getElementById(“email”).value;
  var reg = /^[a-zA-Z][a-zA-Z0-9_-]*@([a-zA-Z0-9_-]+.)+(com|gov|net|com.cn|edu.cn)$/;
  //alert(reg.test(emailval));
  if(reg.test(emailval)){
  clearErr(“emailCk”);
  return true;
  }else{
  document.getElementById(“emailCk”).style.display=””;
  document.getElementById(“emailCk”).innerHTML = “邮箱地址非法”;
  return false;
  }
  }
   
  function regist(){
  if(nameerr()&&verifyEmail()){
  alert(“注册成功!”);
  document.form1.submit();
  }else{
  alert(“注册失败!”);
  }
   
  }
  </script>
  </head>
   
  <body>
  <form id=”form1name=”form1method=”getaction=”http://www.baidu.com“>
  <table align=”centerwidth=”580border=”1cellspacing=”0cellpadding=”2“>
  <tr>
  <td width=”125“>用户名</td>
  <td width=”262“><label for=”userName“></label>
  <input type=”textname=”userNameid=”userNameonblur=”nameerr();onfocus=”clearErr(‘userNameCk’);” /></td>
  <td width=”173“><div id=”userNameCkclass=”errMsg“></div></td>
  </tr>
  <tr>
  <td>邮箱</td>
  <td><label for=”email“></label>
  <input type=”textname=”emailid=”emailonblur=”verifyEmail();onfocus=”clearErr(’emailCk’);” /></td>
  <td><div id=”emailCkclass=”errMsg“></div></td>
  </tr>
  <tr>
  <td align=”centercolspan=”3“><input type=”buttonname=”regid=”regvalue=”注册onclick=”regist();“/></td>
  </tr>
  </table>
  </form>
  </body>
  </html>
 
  • 大小: 2.4 KB

在不刷新的情况下动态添加表格行

<!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>无标题文档</title>
</head>
<body>
<style type=”text/css”>
<!–
td{width:300px;text-align:center;margin:0px;padding:0px}
–>
</style>
<script language=”javascript” type=”text/javascript”>
<!–
function show(){
var num=document.getElementById(“test”).getElementsByTagName(“input”)[0].value;
var y=parseInt(num);
for(var i=0;i<y;i++){
var strS='<table cellpadding=”0″ cellspacing=”0″ border=”1px solid black”><tr><td><select style=”width:102px”><option>选择产品编号</option></select></td><td><input type=”text” style=”width:99px” /></td><td><input type=”text” style=”width:100px” />(数字)</td><td><input type=”text” style=”width:100px” /></td></tr></table>’;
document.getElementById(“change”).innerHTML+=strS;
}
}
//–>
</script>
<div id=”test”>
添加产品品种数:<input type=”text” name=”text” value=”” />
<input type=”button” name=”submit” value=”生成输入框” onclick=”show()” />
</div>
<table cellpadding=”0″ cellspacing=”0″ border=”1px solid #ccc”>
<tr style=”background-color:#009999″>
<td>产品编号</td>
<td>产品名称</td>
<td>数量</td>
<td>单价</td>
</tr>
</table>
<div id=”change”>
</div>
</body>
</html>

http://www.corange.cn//uploadfiles/06_163214_1111_24488.jpg

网页的DOCTYPE声明与文本框的高度差

网页开头声明DOCTYPE为<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>的情况下,文本框的实际高度会比设定值大一些,大约有6px的差距。

比如说,一个文本框和一个按钮放一起,排一行,如果要大家看上去高度一致,按钮height=34px,那么文本框height=28px。

为什么会这样?不知道。

如果将这个DOCTYPE声明去掉,高度立刻恢复正常:

有一个问题。如果页面代码用这种方式输出脚本:Response.Write(“<script>alert(‘Hello World!’);</script>”);,DOCTYPE声明也会立即失效,如果文本框设计的时候因为迁就这个高度差,这时候会立即露出原形。究其原因,这种方式输出脚本,脚本会位于DOCTYPE声明的前面,而DOCTYPE声明是要排在最前面的。

对付这种情况,最好用Page.ClientScript.RegisterStartupScript来输出脚本。

我想,<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>这种声明里面,文本框的高度差应该有个什么属性来消除的。但如何消除,我还不知道。

有时候,Reponse输出脚本后,本来用margin:auto方式定位居中的DIV一下子跑到左边,原因也在此。

一道阿里前端笔试题

题目:

用CSS实现布局

让我们一起来做一个页面首先,我们需要一个布局。请使用CSS控制3个div,实现如下图的布局。

用javascript优化布局

由于我们的用户群喜欢放大看页面,于是我们给上一题的布局做一次优化。当鼠标略过某个区块的时候,该区块会放大25%,并且其他的区块仍然固定不动。

思路:

注意题目由于是只让用3个div,这让我很不习惯,如果不这么限制,我至少用四个,类似这样。

 

<div class='left'>
    <div id='left1'></div>
    <div id='left2'></div>
</div>
<div class='right'></div>

把其中的left和right都设成float。

 

现在只能用3个div,最简单的办法就是使用绝对定位。如果还要用浮动的方法,那么只能将left1,left2都设置成浮动。

完整的代码如下:

<!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>teset</title>
<style type="text/css">
	div{background:red;}
	#left1,#left2{
		width:50px;
		height:50px;
		float:left;
	}
	#left2{
		margin-top:60px;
		margin-left:-160px;
	}
	#right{
		width:100px; 
		height:110px;
		float:left;
		margin-left:10px;
	}
</style>
</head>
<body>
	<div id='left1'></div>
	<div id='right'></div>
	<div id='left2'></div>
</body>
</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>teset</title>
<style type="text/css">
	div{background:red;}
	#left1,#left2{
		width:50px;
		height:50px;
		position:absolute;
	}
	#left1{
		top:0px;left:0px;
	}
	#left2{
		top:60px;left:0px;
	}
	#right{
		width:100px;height:110px;
		top:0px;left:60px;
		position:absolute;
	}
</style>
</head>
<body>
	<div id='left1'></div>
	<div id='left2'></div>
	<div id='right'></div>
</body>
</html>

 

下面开始写js函数控制div的变化,以#left1为例:

function zoomIn(){
	var node=dojo.byId('left1');
	dojo.style(node,'width','60px');
	dojo.style(node,'height','60px');
}
function zoomOut(){
	var node=dojo.byId('left1');
	dojo.style(node,'width','50px');
	dojo.style(node,'height','50px');
}	
dojo.addOnLoad(
	function(){
		dojo.connect(dojo.byId('left1'),'onmouseover',null,zoomIn);
		dojo.connect(dojo.byId('left1'),'onmouseout',null,zoomOut);
	}
);

 

这里用到了dojo,天天在用,也就顺手了。