CSS实现的中英文双语导航菜单
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div id=""top""> <ul> <ul> <li><a class=""bi"" href=""index.html"">Home<span>首 页</span></a></li> </ul> </ul> <ul> <ul> <li><a class=""bi"" href=""about.html"">About us<span>关于我们</span></a></li> </ul> </ul> <ul> <ul> <li><a class=""bi"" href=""products.html"">Products<span>产品展示</span></a></li> </ul> </ul> <ul> <ul> <li><a class=""bi"" href=""services.html"">Services<span>售后服务</span></a></li> </ul> </ul> <ul> <ul> <li><a class=""bi"" href=""contact.html"">Contact<span>联系我们</span></a></li> </ul> </ul> </div> |
小方框中浏览大图
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<script type="text/javascript">// <![CDATA[ <!-- var p = new Array(); var speed = 0.05; //速度 var picWidth = 1280; // 大图的宽高 var picHeight = 971; var x,y // 鼠标点下去时背景的坐标 var x_new,y_new //位移 var haveclick = false; function getmouseposition(event) { if(document.all) { x = document.body.scrollLeft+event.clientX; y = document.body.scrollTop+event.clientY; }else { x = event.layerX; y = event.layerY; } haveclick = true; } function movestop() { haveclick = false; } function movestart(event) { if(haveclick) { if(document.getElementById('pic').style.backgroundPosition.length==0) {document.getElementById('pic').style.backgroundPosition="0px 0px";} p = document.getElementById('pic').style.backgroundPosition.split(" ") if(document.all) { x_new = document.body.scrollLeft+event.clientX; y_new = document.body.scrollTop+event.clientY; }else { x_new = event.layerX; y_new = event.layerY; } x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // 计算位移量 y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10); if (x2<-picWidth+420) x2=-picWidth+420; if (y2>0) y2=0; if (x2>0) x2=0; if (y2<-picHeight+300) y2=-picHeight+300; document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px"; } } --> // ]]></script> |
简洁的表单验证程序
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 |
<script type="text/javascript" language=""JavaScript"">// <![CDATA[ //程序基本思路：通过扩展对象来实现，将String扩展 将默认的表单元素扩展 定义两个自定义对象。 //String.isEmail //String.isUrl //表单元素.required //表单元素.isvalid //表单元素.validate // //字符串验证扩展 //├电子邮件验证 String.prototype.isEmail = function(){ var tmpStr = this; var email = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/; return email.test(tmpStr) } //├http地址验证 String.prototype.isUrl = function(){ var url = /^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&amp;_~`@[]':+!]*([^<>""])*$/; var tmpStr = this; return url.test(tmpStr); } //├日期验证（第一部分） String.prototype.isDateTime = function(){ if(Date.parse(this)||Date.parseDate(this)) { return true; } else { return false; } } String.prototype.isInteger = function() { var _i = /^[-+]?d+$/; var _s = this; return _i.test(_s); } Date.prototype.toIsoDate = function() { var _d = this; var _s; _Y =_d.getFullYear(); _M = _d.getMonth() + 1; _D = _d.getDate(); _H = _d.getHours(); _I = _d.getMinutes(); _S = _d.getSeconds(); with(_d) { _s = [getMonth() + 1,getDate(),getHours(),getMinutes(),getSeconds()]; } for(var i = 0; i < _s.length; i++) { if (_s<i>.toString().length == 1)_s<i>= '0'+_s<i>; } return (_Y + '-'+_s[0]+'-'+_s[1]+' '+_s[2]+':'+_s[3]+':'+_s[4]) } //├日期验证（第二部分） Date.parseDate = function(str, fmt) { fmt = fmt||"%Y-%m-%d %H:%M"; var today = new Date(); var y = 0; var m = -1; var d = 0; var a = str.split(/W+/); var b = fmt.match(/%./g); var i = 0, j = 0; var hr = 0; var min = 0; for (i = 0; i < a.length; ++i) { if (!a<i>) continue; switch (b<i>) { case "%d": case "%e": d = parseInt(a<i>, 10); break; case "%m": m = parseInt(a<i>, 10) - 1; break; case "%Y": case "%y": y = parseInt(a<i>, 10); (y < 100) &amp;&amp; (y += (y > 29) ? 1900 : 2000); break; case "%b": case "%B": for (j = 0; j < 12; ++j) { if (Calendar._MN[j].substr(0, a<i>.length).toLowerCase() == a<i>.toLowerCase()) { m = j; break; } } break; case "%H": case "%I": case "%k": case "%l": hr = parseInt(a<i>, 10); break; case "%P": case "%p": if (/pm/i.test(a<i>) &amp;&amp; hr < 12) hr += 12; else if (/am/i.test(a<i>) &amp;&amp; hr >= 12) hr -= 12; break; case "%M": min = parseInt(a<i>, 10); break; } } if (isNaN(y)) y = today.getFullYear(); if (isNaN(m)) m = today.getMonth(); if (isNaN(d)) d = today.getDate(); if (isNaN(hr)) hr = today.getHours(); if (isNaN(min)) min = today.getMinutes(); if (y != 0 &amp;&amp; m != -1 &amp;&amp; d != 0) return new Date(y, m, d, hr, min, 0); y = 0; m = -1; d = 0; for (i = 0; i < a.length; ++i) { if (a<i>.search(/[a-zA-Z]+/) != -1) { var t = -1; for (j = 0; j < 12; ++j) { if (Calendar._MN[j].substr(0, a<i>.length).toLowerCase() == a<i>.toLowerCase()) { t = j; break; } } if (t != -1) { if (m != -1) { d = m+1; } m = t; } } else if (parseInt(a<i>, 10) <= 12 &amp;&amp; m == -1) { m = a<i>-1; } else if (parseInt(a<i>, 10) > 31 &amp;&amp; y == 0) { y = parseInt(a<i>, 10); (y < 100) &amp;&amp; (y += (y > 29) ? 1900 : 2000); } else if (d == 0) { d = a<i>; } } if (y == 0) y = today.getFullYear(); if (m != -1 &amp;&amp; d != 0) return new Date(y, m, d, hr, min, 0); return today; }; //扩展完成 //对象定义 var vform = new Object; //获取弹出提示的显示位置 vform.getAbsolutePos = function(el) { var _p = { x: 0, y: 0 }; do{ _p.x += (el.offsetLeft - el.scrollLeft); _p.y += (el.offsetTop - el.scrollTop); } while(el=el.offsetParent) return _p; }; vform.toString = function() { return("vForm表单验证程序 版本：1.0beta 作者：雷晓宝 时间：2006-07-31 网址：<a href="http://lxbzj.com" target="_blank">http://lxbzj.com</a> 许可：LGPL"); } vform.rules = new Array; vform.rules.add = function(obj,minLength,dataType,errmsg,maxLength,rule,patams) { var curlen = this.length; this[curlen] = [obj,minLength,dataType,errmsg,maxLength,rule,patams]; //this[curlen] = [ 0 , 1 , 2 , 3 , 4 , 5 , 6 ]; return this.length; } vform.init= function() { if(document.getElementById(this.form_id)) { //获取表单 var o = document.getElementById(this.form_id); //遍历规则 for(var i = 0 ;i< this.rules.length;i++) { _r = this.rules<i> //如果存在元素，则添加验证程序 if(_o = o.elements[_r[0]]) { //判断是是否必填,是否有最小长度 if(_r[1] > 0 ) { _o.required = true;//必填的含义和最小长度为1是一样的 _o.minLength = parseInt(_r[1]); } else { _o.required = false; _o.minLength = 0; } //判断是否有最大长度; if(_r[4]) { _o.maxLength = parseInt(_r[4]); } //添加长度验证函数 _o.validLength = function () { var b =true; if(this.minLength) { b = (this.minLength <= this.value.length); } if(this.type == 'textarea' &amp;&amp; this.maxLength ) { b = b &amp;&amp; (this.maxLength >= this.value.length ); } return (b); } //添加验证，进行格式验证 switch(_r[2]) { case 'e-mail': _o.validate = function() { this.isvalid = this.validLength() &amp;&amp; this.value.isEmail(); return (this.isvalid); }; break; case 'url': _o.validate = function() { if (this.value.substring(0,7) != '<a href="http://" target="_blank">http://</a>')this.value = '<a href="http://" target="_blank">http://</a>' +this.value; this.isvalid = this.validLength() &amp;&amp; this.value.isUrl(); return (this.isvalid); } break; case 'date': _o.validate = function() { var _d = Date.parse(this.value)||Date.parseDate(this.value); this.value = _d.toIsoDate(); this.isvalid = this.validLength() &amp;&amp; this.value.isDateTime(); return (this.isvalid); a=a>b?1:1; } break; case 'number': _o.validate = function() { this.isvalid = this.validLength() &amp;&amp; this.value.isInteger(); return (this.isvalid); } break; case 'any': _o.validate = function() { this.isvalid = this.validLength(); return this.isvalid } break; default : var regexp = /^w+$/; if ( regexp.test(_r[2]))//表示必须和同表单下的某个字段的值一样。用于重复输入的验证 { _el = _r[2].substring(1); if (o.elements[_el]){ _o.equal = _el; _o.validate = function() { if(_o = this.form.elements[this.equal]) { if ( (_o.value == this.value) &amp;&amp; this.validLength()) { return true; }else { return false; } }else{ alert('setup error'); } } }else { alert(_el + 'is not a valid form element'); _o.validate = function(){return true;} } } var regexp1 = /^(==|!=|>=|<=|>|<)/; if ( regexp1.test(_r[2]) ) { _s0 = _r[2]; _s1 = RegExp.$1; _s2 = _s0.replace(regexp1,''); _operator = _s1.substring(0);//比较操作符 var regexp2 = /^w+$/; if (regexp2.test(_s2))//是一个标志符，整数 或者变量 { _o.operation = _operator+_s2; _o.validate = function() { _b = true; if (this.value.length !=0) { _b = eval(this.value+this.operation+';'); } _b = _b &amp;&amp; this.validLength(); return _b; } } }; break; } //添加验证提示(div标签)并初始化 var _p = vform.getAbsolutePos(_o); _o.tip = new tip(_r[3],vform.err_class,_p.x+_o.offsetWidth+3,_p.y); _o.tip.init(); //失去焦点时，开始验证 _o.onblur =function(e) { if(this.minLength || this.value.length >0) { if( this.validate() ) { this.tip.hide(); }else { this.tip.show();//显示错误信息 //this.focus(); 添加这句在ie里会导致死循环 :( return false; } } } } } //焦点验证可能会失败,所以最后需要表单提交前的验证作为最后的补充。 document.getElementById(this.form_id).onsubmit = function() { var valid = true; for(i=0;i <this.elements.length;i++) { _o = this.elements<i>; if(_o.minLength &amp;&amp; !_o.isvalid) { _o.tip.show(); valid = false; } } return valid; } } } //弹出提示定义 function tip(text,className,x,y) { var o = document.createElement("div"); o.style.display = "none"; o.innerHTML = text; //var t = document.createTextNode(text); document.body.appendChild(o); //o.appendChild(t); this.init = function(dis) { o.className = "info"; o.style.left = x+"px"; o.style.top = y+"px"; o.style.zindex = 100; if(dis) { o.style.display = ""; } else { o.style.display = "none"; } } this.show = function() { o.style.display = ""; } this.hide = function() { o.style.display = "none"; } } function start() { vform.form_id = 'form1';//必须是表单的id vform.err_class = 'info';//出错提示的样式 //验证规则，逐条填写 vform.rules.add('frm_name',1,'e-mail','请您按照 user@domain.com 的格式输入电子邮件地址。 <span style="color:#f00">必填项目</span>'); vform.rules.add('myweb',1,'url','请您按照 <a href="http://" target="_blank">http://</a>www.domain.com 的格式输入您的网址。 <span style="color:#f00">必填项目</span>'); vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。 <span style="color:#f00">必填项目</span>'); vform.rules.add('qq',0,'number','这必须是一个整数'); vform.rules.add('least10',10,'any','您必须至少填写10个 <span style="color:#f00">必填项目</span>'); vform.rules.add('ok100',1,'any','这里被限制为100个字符 <span style="color:#f00">必填项目</span>',100); vform.rules.add('r_pass0',5,'any','密码最短5位最长20位 <span style="color:#f00">必填项目</span>',20); vform.rules.add('r_pass1',5," _pass0",'确认密码错误 <span style="color:#f00">必填项目</span>',20); vform.rules.add('frm_sel',1,">2",'必须大于2000 <span style="color:#f00">必填项目</span>'); vform.init(); } // ]]></script> <form id=""form1"" action="""" method=""get"" name=""form1""><label for=""frm_name"">e-mail: <input id=""frm_name"" class=""text_input"" title=""输入一个电子邮箱地址"/" type=""text"" name=""frm_name"" /> </label> *<label for=""r_pass0"">输入密码：</label> <input id=""r_pass0"" class=""text_input"" title=""输入您希望的密码" type=""text"" name=""r_pass0"" /> * <label for=""r_pass1"">密码确认：</label> <input id=""r_pass1"" class=""text_input"" title=""将密码确认一次"" type=""text"" name=""r_pass1"" /> * <label for=""frm_sel"">选择： </label> 请选择一个答案 1000 2000 3000 4000 5000 6000 * <label for=""input3"">输入网址：</label> <input id=""input3"" class=""text_input"" title=""输入一个网址"" onmousemove="""" type=""text"" name=""myweb"" value=""<a" />http://" maxlength="100"/> * <label for=""dateinput"">输入日期</label> <input id=""dateinput"/" class=""text_input"" title=""输入一个日期"" type=""text"" name=""dateinput"" /> * <label for=""mub"">输入数字</label> <input id=""mub"/" class=""text_input"" title=""填写数字"" type=""text"" name=""qq"" /> <label for=""len"">输入任意但长度限制为10个</label> <input id=""len"/" class=""text_input"" type=""text"" name=""least10"" maxlength=""88"" /> * <label for=""text"">只能输入100个 <textarea id=""text"" title=""详细内容"" name=""ok100"" rows=""5"" cols=""40""></textarea> * </label> <input type=""submit"" name=""Submit"" value=""提交"" /> <button onclick=""alert(vform)"">关于验证程序</button> </form><!--具体的日期设置，必须放在body的结束标签前面--> <script type="text/javascript">// <![CDATA[ vform .init(); Calendar.setup({ inputField : "dateinput", // 把这个改成你需要的 id ifFormat : "%Y-%m-%d %H:%M", // format of the input field showsTime : true, //button : "dateinput_btn", timeFormat : "24" }); // ]]></script> <!--END具体的日期设置，必须放在body的结束标签前面--> <div class=""title""> <h1>vForm1.0beta</h1> <ul> <ul> <li>作者：雷晓宝</li> </ul> </ul> <ul> <ul> <li>时间：2006-08-08</li> </ul> </ul> <ul> <ul> <li>网址：<a href=""http://lxbzj.com"" target=""_blank"">http://lxbzj.com</a></li> </ul> </ul> <ul> <ul> <li>e-mail:lxbzmy@163.com</li> </ul> </ul> <ul> <ul> <li>许可：LGPL</li> </ul> </ul> <h2>功能简述：</h2> <ol> <ol> <li> <h3>验证：</h3> <ul> <ul> <li>http地址。</li> </ul> </ul> <ul> <ul> <li>时间日期</li> </ul> </ul> <ul> <ul> <li>e-mail</li> </ul> </ul> <ul> <ul> <li>数字</li> </ul> </ul> <ul> <ul> <li>字符长度检查</li> </ul> </ul> <ul> <ul> <li>一项输入与另一项输入比较（例如：密码的确认输入）</li> </ul> </ul> <ul> <ul> <li>大小比较（只能有一个比较符号）</li> </ul> </ul> </li> </ol> </ol> <ol> <ol> <li> <h3>特点</h3> <ul> <ul> <li>扩展容易，可以方便的添加自己需要的验证方式</li> </ul> </ul> <ul> <ul> <li>兼容性好（ie5,6 firefox,oprea）。</li> </ul> </ul> <ul> <ul> <li>可用性好，没有使用alert()来弹出提示;</li> </ul> </ul> </li> </ol> </ol> <h2>使用方法</h2> 使用时，需要定义一个出错提示框的样式，本例的样式为：<code>div.info { width: 170px;</code> overflow:visible; height:auto; font-size: small; position: absolute; background-color: #FFffdd; border: 1px solid #000; filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3); padding: 5px; } 然后在网页部分中添加<code><script type="text/javascript" src=""calendar/calendar.js""></script></code> ，然后可以写一个函数设置表单名称，验证规则，<code>function start()</code> { vFormvform.form_id = 'form1'; vform.err_class = 'info'; // (obj,required(true/false),dataType,errmsg,minlen,maxlen,rule,patams) //验证规则，逐条填写 vform.rules.add('frm_name',1,'e-mail','请您按照 user@domain.com 的格式输入电子邮件地址。 <span>必填项目</span>'); vform.rules.add('myweb',1,'url','请您按照 <a href=""http://"" target=""_blank"">http://</a>www.domain.com 的格式输入您的网址。 <span>必填项目</span>'); vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。 <span>必填项目</span>'); vform.rules.add('qq',0,'number','这必须是一个整数'); vform.rules.add('least10',10,'any','您必须至少填写10个 <span>必填项目</span>'); vform.rules.add('ok100',1,'any','这里被限制为100个字符 <span>必填项目</span>',100); vform.init(); }最后为body添加onload事件。 <code> </code> </div> |
模仿IE自动完成功能
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 |
New Document <script type="text/javascript" language=""JavaScript"">// <![CDATA[ <!-- // script by blueDestiny // email : blueDestiny [at] 126 . com // Object: jsAuto // browser: ie, mf. // example: // step1 : // create autocomplete container, return object and bind event to the object, and ///create a new jsAuto instance: // <div id="divautocomplete"></div> // var autocomplete = new jsAuto("autocomplete","divautocomplete") // handle event: // autocomplete.handleEvent(value, returnObjectID) // <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)> // step2 : // add autocompete item: // autocomplete.item(string) // string must be a string var, you can split the string by "," // autocomplete.item("blueDestiny,never-online,csdn,blueidea") // <a href="http://" target="_blank">http://</a>www.never-online.com function jsAuto(instanceName,objID) { this._msg = []; this._x = null; this._o = document.getElementById( objID ); if (!this._o) return; this._f = null; this._i = instanceName; this._r = null; this._c = 0; this._s = false; this._v = null; this._o.style.visibility = "hidden"; this._o.style.position = "absolute"; this._o.style.zIndex = "9999"; this._o.style.overflow = "auto"; this._o.style.height = "50"; return this; }; jsAuto.prototype.directionKey=function() { with (this) { var e = _e.keyCode ? _e.keyCode : _e.which; var l = _o.childNodes.length; (_c>l-1 || _c<0) ? _s=false : ""; if( e==40 &amp;&amp; _s ) { _o.childNodes[_c].className="mouseout"; (_c >= l-1) ? _c=0 : _c ++; _o.childNodes[_c].className="mouseover"; } if( e==38 &amp;&amp; _s ) { _o.childNodes[_c].className="mouseout"; _c--<=0 ? _c = _o.childNodes.length-1 : ""; _o.childNodes[_c].className="mouseover"; } if( e==13 ) { if(_o.childNodes[_c] &amp;&amp; _o.style.visibility=="visible") { _r.value = _x[_c]; _o.style.visibility = "hidden"; } } if( !_s ) { _c = 0; _o.childNodes[_c].className="mouseover"; _s = true; } }}; // mouseEvent. jsAuto.prototype.domouseover=function(obj) { with (this) { _o.childNodes[_c].className = "mouseout"; _c = 0; obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover"; }}; jsAuto.prototype.domouseout=function(obj) { obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout"; }; jsAuto.prototype.doclick=function(msg) { with (this) { if(_r) { _r.value = msg; _o.style.visibility = "hidden"; } else { alert("javascript autocomplete ERROR : can not get return object."); return; } }}; // object method; jsAuto.prototype.item=function(msg) { if( msg.indexOf(",")>0 ) { var arrMsg=msg.split(","); for(var i=0; i<arrMsg.length; i++) { arrMsg<i> ? this._msg.push(arrMsg<i>) : ""; } } else { this._msg.push(msg); } this._msg.sort(); }; jsAuto.prototype.append=function(msg) { with (this) { _i ? "" : _i = eval(_i); _x.push(msg); var div = document.createElement("DIV"); //bind event to object. div.onmouseover = function(){_i.domouseover(this)}; div.onmouseout = function(){_i.domouseout(this)}; div.onclick = function(){_i.doclick(msg)}; var re = new RegExp("(" + _v + ")","i"); div.style.lineHeight="140%"; div.className = "mouseout"; if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>"); div.style.fontFamily = "verdana"; _o.appendChild(div); }}; jsAuto.prototype.display=function() { with(this) { if(_f&amp;&amp;_v!="") { _o.style.left = _r.offsetLeft; _o.style.width = _r.offsetWidth; _o.style.top = _r.offsetTop + _r.offsetHeight; _o.style.visibility = "visible"; } else { _o.style.visibility="hidden"; } }}; jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this) { var re; _e = event; var e = _e.keyCode ? _e.keyCode : _e.which; _x = []; _f = false; _r = document.getElementById( fID ); _v = fValue; _i = eval(_i); re = new RegExp("^" + fValue + "", "i"); _o.innerHTML=""; for(var i=0; i<_msg.length; i++) { if(re.test(_msg<i>)) { _i.append(_msg<i>); _f = true; } } _i ? _i.display() : alert("can not get instance"); if(_f) { if((e==38 || e==40 || e==13)) { _i.directionKey(); } else { _c=0; _o.childNodes[_c].className = "mouseover"; _s=true; } } }}; window.onerror=new Function("return true;"); //--> // ]]></script> <h1>Autocomplete Function</h1> <div align=""center""><input id=""auto"" onkeyup=""jsAutoInstance.handleEvent(this.value,'auto',event)"" type="text" /></div> <div id=""divf"">Power By Miracle, never-online</div> <script type="text/javascript" language=""JavaScript"">// <![CDATA[ <!-- var jsAutoInstance = new jsAuto("jsAutoInstance","divc"); jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start"); jsAutoInstance.item("blueDestiny"); jsAutoInstance.item("BlueMiracle,Blue"); jsAutoInstance.item("angela,geniuslau"); jsAutoInstance.item("never-online"); //--> // ]]></script> |
模仿combox(select)控件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 |
simulate combox control - <a href=""http://"" target=""_blank"">http://</a>www.never-online.net <script type="text/javascript" language=""JavaScript"">// <![CDATA[ <!-- //------------------------------------------------------------- // @ Module: simulate select control, IE only. // @ Debug in: IE 6.0 // @ Script by: blueDestiny, never-online // @ Up&#100;ated: 2006-3-22 // @ Version: 1.0 apha // @ Email: blueDestiny [at] 126.com // @ Website: <a href="http://" target="_blank">http://</a>www.never-online.net // @ Please Hold this item please. // // API // @ class: simulateSelect() // // @ object.style(ctlStyle[,selStyle][,unselStyle]) // ctlStyle: main control combox css class name // selStyle: when mouseover o&#114; option focus css class name // unselStyle: options blur's css class name // // @ object.width=(widthPX) // widthPX must be a digit number. // // @ object.height=(heightPX) // heightPX must be a digit number. // // @ object.getValue(ctlSelID) // ctlSelID is the unique select control ID // // -------------- for the next Version ---------- // @ object.readOnly = (blnReadOnly) // blnReadOnly must be a boolean type o&#114; a number type. // @ object.addEvent(w, h) // w: fire handler's event. // h: handler function. //------------------------------------------------------------- function $(objID) { return document.getElementById(objID); }; function Offset(e) { var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight-2; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } return { top : t, left : l, width : w, height : h } } //----------------------------------------------- function simulateSelect() { with(this) { this.IDs = []; this.name = this; // property for beta Version // can editable combox this.readonly = true; this.height = 20; this.width = null; this.ctlStyle = "CtlSelect"; this.selStyle = "selected"; this.unselStyle = "unselected"; this.elementPrefix = "e__"; this.inputPrefix = "i__"; this.containerPrefix = "c__"; this.buttonPrefix = "b__"; return this; }}; simulateSelect.prototype.init = function(ctlSelIDs) { with(this) { eval(name).append(ctlSelIDs); eval(name).simulates(); }}; simulateSelect.prototype.style = function() { with(this) { ctlStyle = arguments[0]; selStyle = arguments[1]; unselStyle = arguments[2]; }}; //----------------------------------------------- simulateSelect.prototype.append = function(ctlSelIDs) { with(this) { if( ctlSelIDs.indexOf(",")>0 ) { var arrCtlSel = ctlSelIDs.split(","); for(var i=0; i<arrCtlSel.length; i++) { eval(name).IDs.push(arrCtlSel<i>); } } else { eval(name).IDs.push(ctlSelIDs); } }}; simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this) { // here compatible mf. var el = e ? e.srcElement: e.target; if( el.id.indexOf(elementPrefix)>-1 || el.id.indexOf(inputPrefix)>-1 || el.id.indexOf(containerPrefix)>-1 || el.id.indexOf(buttonPrefix)>-1 ) { return; } else { for(var i=0; i<eval(name).IDs.length; i++) if( $(containerPrefix + IDs<i>) ) $(containerPrefix + eval(name).IDs<i>).style.display = "none"; } }}; simulateSelect.prototype.simulates = function() { with(this) { for(var i=0; i<IDs.length; i++) eval(name).simulate(IDs<i>); }}; simulateSelect.prototype.simulate = function(ctlSelID) { with (this) { var input; var button; var object; var offset; object = $(ctlSelID); offset = Offset(object); input = document.createElement("INPUT"); button = document.createElement("BUTTON"); button.setAttribute("id", buttonPrefix + ctlSelID); //button.value = "⊿"; button.value = "6"; button.style.fontFamily = "Webdings, Marlett"; button.style.background = ""; button.onclick = input.onclick = function() { this.blur(); eval(name).expand(ctlSelID, offset); } input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; }; input.setAttribute("id", inputPrefix + ctlSelID); input.title = button.title = "click expand options"; input.style.cursor = button.style.cursor = "default"; input.className = button.className = ctlStyle; input.style.width = (width>0 ? width : object.offsetWidth); height ? input.style.height=button.style.height=height : ""; input.value = object[0].text; if( readonly==true ) input.readOnly=true; // this method is only IE. object.insertAdjacentElement("afterEnd",button); object.insertAdjacentElement("afterEnd",input); object.style.display = 'none'; }}; simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this) { var div, btn_off; var object = $(ctlSelID); if( !$(containerPrefix + ctlSelID) ) { div = document.createElement("DIV"); div.style.position = "absolute"; div.style.display = "block"; div.setAttribute("id", containerPrefix + ctlSelID); div.className = ctlStyle; div.style.left = offset.left; div.style.top = offset.top + offset.height; div.style.width = (width ? width : offset.width) + 20; div.style.height = offset.height; document.body.appendChild(div); for(var i=0; i<object.length; i++) { div = document.createElement("DIV"); div.setAttribute("id", div.id = elementPrefix + ctlSelID + i); div.style.cursor = "default"; if( object<i>.text==$(inputPrefix + ctlSelID).value ) div.className = selStyle; else div.className = unselStyle; div.innerText = div.title = object<i>.text; div.style.height = height; div.setAttribute("value", object<i>.value); div.onmouseover = function() { for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++) { if($(containerPrefix + ctlSelID).childNodes[j]==this) $(containerPrefix + ctlSelID).childNodes[j].className = selStyle; else $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle; } }; div.onclick = function() { $(inputPrefix + ctlSelID).value = this.innerText; $(containerPrefix + ctlSelID).style.display = "none"; }; $(containerPrefix + ctlSelID).appendChild(div); } return; } if( $(containerPrefix + ctlSelID).style.display=="none" ) { for(var i=0; i<object.length; i++) { if( object<i>.text==$(inputPrefix + ctlSelID).value ) $(elementPrefix + ctlSelID + i).className = selStyle; else $(elementPrefix + ctlSelID + i).className = unselStyle; } $(containerPrefix + ctlSelID).style.display="block"; return; } if( $(containerPrefix + ctlSelID).style.display=="block" ) { $(containerPrefix + ctlSelID).style.display="none"; return; } }}; simulateSelect.prototype.getValue = function(ctlSelID) { with(this) { if( $(inputPrefix + ctlSelID) ) return $(inputPrefix + ctlSelID).value; else return null; }}; simulateSelect.prototype.addEvent = function(w, h) { with(this) { }}; //----------------------------------------------- //window.onerror = Function("return true;"); // IE only. document.attachEvent("onmousedown", function() { a.checkupOnMouseDown(event); b.checkupOnMouseDown(event); c.checkupOnMouseDown(event) } ); //--> // ]]></script> <h1>simulate combox control</h1> <h4>demonstrate</h4> - please select your options - option1 option2 option3 option4 option5 - please select your options - 1option1 1option2 1option3 1option4 1option5 - please select your options - 2option1 2option2 2option3 2option4 2option5 - please select your options - 3option1 3option2 3option3 3option4 3option5 <button onclick=""alert(a.getValue('s1')">' + b.getValue('s2'))" class="CtlSelect"> Get value </button> <script type="text/javascript" language=""JavaScript"">// <![CDATA[ <!-- var a = new simulateSelect(); a.style("CtlSelect", "selected", "unselected"); a.init("s1"); var b = new simulateSelect(); b.style("CtlSelect1", "selected1", "unselected1"); b.width = 300; b.init("s2"); var c = new simulateSelect(); c.style("CtlSelect2", "selected2", "unselected2"); c.width = 320; c.init("s3"); //--> // ]]></script> <h4>description</h4> <pre>//------------------------------------------------------------- // @ Module: simulate select control, IE only. // @ Debug in: IE 6.0 // @ Script by: blueDestiny, never-online // @ Updated: 2006-3-22 // @ Version: 1.0 apha // @ Email: blueDestiny [at] 126.com // @ Website: <a href=""http://"" target=""_blank"">http://</a>www.never-online.net // @ Please Hold this item please. // // API // @ simulateSelect(ctlSelIDs) // ctlSelIDs: select control IDs, split by "," // // @ simulateSelect.style(ctlStyle[,selStyle][,unselStyle]) // ctlStyle: main control combox css class name // selStyle: when mouseover or option focus css class name // unselStyle: options blur's css class name // // @ simulateSelect.width=(widthPX) // widthPX must be a digit number. // // @ simulateSelect.height=(heightPX) // heightPX must be a digit number. // // -------------- for the next Version ---------- // @ simulateSelect.readOnly = (blnReadOnly) // blnReadOnly must be a boolean type or a number type. // @ simulateSelect.addEvent(w, h) // w: fire handler's event. // h: handler function. //-------------------------------------------------------------</pre> <div class=""copyright"">Power By blueDestiny, never-online <a href=""http://www.fightfly.com"" target=""_blank"">http://www.fightfly.com</a></div> |
好看的按钮
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
用css定义渐变背景 1.颜色渐变 2.背景图渐变 <img src=""未命名-1.jpg"" alt="" width="400" height="300" /> 3.表格颜色渐变 <table> <tbody> <tr> <td>dkkkkkkkkkkkkkkkkkkkkk</td> </tr> </tbody> </table> <table style=""filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#1CA4FF',;"> <tbody> <tr> <td>fdsafdafdsafda</td> </tr> </tbody> </table> <button class="btn" title=""好看的按钮"">好看的按钮</button> <button></button> onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="好看的按钮">好看的按钮 <button></button> onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮 <button class="btn2" title=""好看的按钮"">好看的按钮</button> <button class="btn3_mouseout" onmouseover=""this.className='btn3_mouseover'"<br"></button> onmouseout="this.className='btn3_mouseout'" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" title="好看的按钮">好看的按钮 <button class="btn_2k3" title=""好看的按钮"">好看的按钮</button> |
|
1 2 3 4 |
<div align=""center""><img src=""images/weather/hn2_sunny.gif"" alt="" width=""9"" height=""9"" /></div> 搜索结果 |