<![CDATA[WEB前端DEMO]]> http://www.9demo.com/ zh-cn PBlog2 v2.4 WEB前端DEMO http://www.9demo.com/images/logos.gif http://www.9demo.com/ WEB前端DEMO http://www.9demo.com/default.asp?id=274 <![CDATA[用li实现分页源码示例]]> feiwen8772@hotmail.com(feiwen8772) Wed,23 Apr 2008 23:01:25 +0800 http://www.9demo.com/default.asp?id=274 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>
<style type="text/css">
.pagination{
 overflow:hidden;
 margin:0;
 padding:10px 10px 6px 10px;
 border-top:1px solid #f60;
 _zoom:1;
}
.pagination *{
 display:inline;
 float:left;
 margin:0;
 padding:0;
 font-size:12px;
}
.pagination i{
 float:none;
 padding-right:1px;
}
.currentPage b{
 float:none;
 color:#f00;
}
.pagination li{
 list-style:none;
 margin:0 5px;
}
.pagination li li{
 position:relative;
 margin:-2px 0 0;
 font-family: Arial, Helvetica, sans-serif
}
.firstPage a,.previousPage a,.nextPage a,.lastPage a{
 overflow:hidden;
 height:0;
 text-indent:-9999em;
 border-top:8px solid #fff;
 border-bottom:8px solid #fff;
}
.pagination li li a{
 margin:0 1px;
 padding:0 4px;
 border:3px double #fff;
 +border-color:#eee;
 background:#eee;
 color:#06f;
 text-decoration:none;
}
.pagination li li a:hover{
 background:#f60;
 border-color:#fff;
 +border-color:#f60;
 color:#fff;
}
li.firstPage{
 margin-left:40px;
 border-left:3px solid #06f;
}
.firstPage a,.previousPage a{
 border-right:12px solid #06f;
}
.firstPage a:hover,.previousPage a:hover{
 border-right-color: #f60;
}
.nextPage a,.lastPage a{
 border-left:12px solid #06f;
}
.nextPage a:hover,.lastPage a:hover{
 border-left-color:#f60;
}
li.lastPage{
 border-right:3px solid #06f;
}
li li.currentState a{
 position:relative;
 margin:-1px 3px;
 padding:1px 4px;
 border:3px double #fff;
 +border-color:#f60;
 background:#f60;
 color:#fff;
}
li.currentState,.currentState a,.currentState a:hover{
 border-color:#fff #ccc;
 cursor:default;
}
</style>
</head>
<body>
<ul class="pagination" title="分页列表">
  <li class="totalAnnal">总记录数：<i>3</i></li>
  <li class="totalPage">总页数：<i>3</i></li>
  <li class="currentPage">当前页：<b>3</b></li>
  <li class="firstPage currentState"><a href="javascript:;" title="首页">首页</a></li>
  <li class="previousPage currentState"><a href="javascript:;" title="前一页">前一页</a></li>
  <li>
    <ol>
      <li><a title="转到第1页" href="javascript:;">1</a></li>
      <li><a title="转到第2页" href="javascript:;">2</a></li>
      <li class="currentState" title="当前页"><a href="javascript:;">3</a></li>
      <li><a title="转到第4页" href="javascript:;">4</a></li>
      <li><a title="转到第5页" href="javascript:;">5</a></li>
      <li><a title="转到第6页" href="javascript:;">6</a></li>
      <li><a title="转到第7页" href="javascript:;">7</a></li>
      <li><a title="转到第8页" href="javascript:;">8</a></li>
      <li><a title="转到第9页" href="javascript:;">9</a></li>
    </ol>
  </li>
  <li class="nextPage"><a href="javascript:;" title="后一页">后一页</a></li>
  <li class="lastPage"><a href="javascript:;" title="尾页">尾页</a></i>
</ul>
</body>
</html>
]]> http://www.9demo.com/default.asp?id=273 <![CDATA[显示当前状态的导航]]> feiwen8772@hotmail.com(feiwen8772) Wed,23 Apr 2008 22:58:20 +0800 http://www.9demo.com/default.asp?id=273         "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Dynamic Navigation with CSS and Javascript: Example 7</title>
<style type="text/css">
body { font-family:verdana; }
#content { float:left; width:400px; border:1px solid #ccc; margin-left:20px; padding:2px 10px 10px 10px; }
ul { margin:0; padding:0; list-style: none; width:200px; float:left; }
ul li { margin:0 0 1px 0; padding:0; }
ul li a {
 display:block;
 padding:8px;
 text-decoration:none;
 background: #eee;
 color: #039;
}
ul li a:hover {
 background: #ffc;
}
ul li a.selected {
 background: #c63;
 color:#fff;
}
#content div { display:none; }
#content div.on { display:block; }
</style>
<script type="text/javascript">
function applySelectedTo(link) {
 var ul = document.getElementsByTagName("ul")[0]; // get the first ul tag on the page
 var allLinks = ul.getElementsByTagName("a"); // get all the links within that ul
 for (var i=0; i<allLinks.length; i++) { // iterate through all those links
  allLinks[i].className = ""; // and assign their class names to nothing
 }
 link.className = "selected";  // finally, assign class="selected" to our chosen link
 var allDivs = document.getElementsByTagName("div");
 for (var k=0; k<allDivs.length; k++) {
  allDivs[k].className = "";
 }
 var lyricId = link.getAttribute("href").split("#")[1];
 lyricId = document.getElementById(lyricId);
 lyricId.className = "on";
}
</script>
</head>
<body>
<h1>A list of links (styled, selected state, onclick, return false, and does something)</h1>
<ul>
 <li><a onclick="applySelectedTo(this);return false;" href="#heartbreakHotel">Heartbreak Hotel</a></li>
 <li><a onclick="applySelectedTo(this);return false;" href="#blueSuedeShoes">Blue Suede Shoes</a></li>
 <li><a onclick="applySelectedTo(this);return false;" href="#houndDog" class="selected">Hound Dog</a></li>
 <li><a onclick="applySelectedTo(this);return false;" href="#dontBeCruel">Don't Be Cruel</a></li>
 <li><a onclick="applySelectedTo(this);return false;" href="#teddyBear">Teddy Bear</a></li>
</ul>
<div id="content">
 <div id="heartbreakHotel">
  <h2>Heartbreak Hotel</h2>
  <p>Well, since my baby left me,<br />
  I found a new place to dwell.<br />
  Its down at the end of lonely street<br />
  At heartbreak hotel.</p>
  <p>You make me so lonely baby,<br />
  I get so lonely,<br />
  I get so lonely I could die.</p>
  <p>And although its always crowded,<br />
  You still can find some room.<br />
  Where broken hearted lovers<br />
  Do cry away their gloom.</p>
  <p>You make me so lonely baby,<br />
  I get so lonely,<br />
  I get so lonely I could die.</p>
  <p>Well, the bell hops tears keep flowin,<br />
  And the desk clerks dressed in black.<br />
  Well they been so long on lonely street<br />
  They aint ever gonna look back.</p>
  <p>You make me so lonely baby,<br />
  I get so lonely,<br />
  I get so lonely I could die.</p>
  <p>Hey now, if your baby leaves you,<br />
  And you got a tale to tell.<br />
  Just take a walk down lonely street<br />
  To heartbreak hotel.</p>
 </div>
 <div id="blueSuedeShoes">
  <h2>Blue Suede Shoes</h2>
  <p>Well, its one for the money,<br />
  Two for the show,<br />
  Three to get ready,<br />
  Now go, cat, go.</p>
  <p>But dont you step on my blue suede shoes.<br />
  You can do anything but lay off of my blue suede shoes.</p>
  <p>Well, you can knock me down,<br />
  Step in my face,<br />
  Slander my name<br />
  All over the place.</p>
  <p>Do anything that you want to do, but uh-uh,<br />
  Honey, lay off of my shoes<br />
  Dont you step on my blue suede shoes.<br />
  You can do anything but lay off of my blue suede shoes.</p>
  <p>You can burn my house,<br />
  Steal my car,<br />
  Drink my liquor<br />
  From an old fruitjar.</p>
  <p>Do anything that you want to do, but uh-uh,<br />
  Honey, lay off of my shoes<br />
  Dont you step on my blue suede shoes.<br />
  You can do anything but lay off of my blue suede shoes.</p>
 </div>
 <div class="on" id="houndDog">
  <h2>Hound Dog</h2>
  <p>You aint nothin but a hound dog<br />
  Cryin all the time.<br />
  You aint nothin but a hound dog<br />
  Cryin all the time.<br />
  Well, you aint never caught a rabbit<br />
  And you aint no friend of mine.</p>
  <p>When they said you was high classed,<br />
  Well, that was just a lie.<br />
  When they said you was high classed,<br />
  Well, that was just a lie.<br />
  You aint never caught a rabbit<br />
  And you aint no friend of mine.</p>
 </div>
 <div id="dontBeCruel">
  <h2>Don't Be Cruel</h2>
  <p>You know I can be found,<br />
  Sitting home all alone,<br />
  If you cant come around,<br />
  At least please telephone.<br />
  Dont be cruel to a heart thats true.</p>
  <p>Baby, if I made you mad<br />
  For something I might have said,<br />
  Please, lets forget the past,<br />
  The future looks bright ahead,<br />
  Dont be cruel to a heart thats true.<br />
  I dont want no other love,<br />
  Baby its just you Im thinking of.</p>
  <p>Dont stop thinking of me,<br />
  Dont make me feel this way,<br />
  Come on over here and love me,<br />
  You know what I want you to say.<br />
  Dont be cruel to a heart thats true.<br />
  Why should we be apart?<br />
  I really love you baby, cross my heart.</p>
  <p>Lets walk up to the preacher<br />
  And let us say I do,<br />
  Then youll know youll have me,<br />
  And Ill know that Ill have you,<br />
  Dont be cruel to a heart thats true.<br />
  I dont want no other love,<br />
  Baby its just you Im thinking of.</p>
  <p>Dont be cruel to a heart thats true.<br />
  Dont be cruel to a heart thats true.<br />
  I dont want no other love,<br />
  Baby its just you Im thinking of.</p>
 </div>
 <div id="teddyBear">
  <h2>Teddy Bear</h2>
  <p>Baby let me be,<br />
  Your lovin teddy bear<br />
  Put a chain around my neck,<br />
  And lead me anywhere<br />
  Oh let me be<br />
  Your teddy bear.</p>
  <p>I dont wanna be a tiger<br />
  Cause tigers play too rough<br />
  I dont wanna be a lion<br />
  cause lions aint the kind<br />
  You love enough.<br />
  Just wanna be, your teddy bear<br />
  Put a chain around my neck<br />
  And lead me anywhere<br />
  Oh let me be<br />
  Your teddy bear.</p>
  <p>Baby let me be, around you every night<br />
  Run your fingers through my hair,<br />
  And cuddle me real tight.</p>
 </div>
</div>
</body>
</html>]]> http://www.9demo.com/default.asp?id=272 <![CDATA[用JS+css美化下拉框(select)]]> feiwen8772@hotmail.com(feiwen8772) Wed,23 Apr 2008 22:54:54 +0800 http://www.9demo.com/default.asp?id=272 一直以来用CSS控制select都没有实现过。

==================================================

<!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">
<HTML>
<HEAD>
<TITLE>搜索条</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
/*basic*/
*{padding:0;margin:0;color:#000;font:12px/20px Arial,Sans-serif,"宋体";}
/*elements*/
.clear{clear:both;height:0px;overflow:hidden;}
ul,li,ol{list-style-type:none;list-style-position:outside;}
button,.btnNormal{height:22px;line-height:18px;padding:0 9px!important;padding:0 5px;}
a{color:#0042ff;text-decoration:underline;}
a,a *{cursor:pointer;}
a img{border:0;}
.searchTool{float:left;width:520px;}
.searchTool .searchExtend{float:left;line-height:24px;_padding-top:5px;}
.searchTool .radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:0;}
.searchTool .txtSearch{float:left;width:232px;padding:2px 2px 0 2px;height:20px;line-height:20px;vertical-align:bottom;border:1px solid #3e99d4;}
.searchTool .selSearch{float:left;width:60px;background:#fff;height:22px;line-height:22px;border:1px solid #3e99d4;border-left:0;}
.searchTool .nowSearch{float:left;width:40px;height:20px;line-height:22px;overflow:hidden;padding-left:4px;}
.searchTool .btnSel{float:right;border-left:1px solid #3e99d4;width:14px;height:22px;}
.searchTool .btnSel a{background:url(http://static.youku.com/v1.0.0217/index/img/btn_sel.gif) no-repeat center center;display:block;width:14px;height:22px;}
.searchTool .btnSel a:hover{background:url(http://static.youku.com/v1.0.0217/index/img/btn_sel_over.gif) no-repeat center center;border:1px solid #fff;width:12px;height:20px;}
.searchTool .selOption{z-index:9999;position:absolute;margin-left:-1px;width:60px;background:#fff;border:1px solid #3e99d4;}
.searchTool .selOption a{display:block;height:21px;padding-left:5px;line-height:21px;color:#000;text-decoration:none;}
.searchTool .selOption a:hover{color:#fff;background:#95d5f1;}
.searchTool .btnSearch{float:left;margin-left:10px;width:58px;height:22px;line-height:22px;border:1px solid #3e99d4;overflow:hidden;}
.searchTool .btnSearch a{background:url(http://static.youku.com/v1.0.0217/index/img/bg_nav_option.gif) repeat-x center -6px;display:block;text-decoration:none;height:22px;line-height:22px;overflow:hidden;}
.searchTool .btnSearch a:hover{background:url(http://static.youku.com/v1.0.0217/index/img/bg_nav_option_over.gif) repeat-x center center;border:1px solid #fff;height:20px;line-height:20px;}
.searchTool .btnSearch .lbl{cursor:pointer;display:block;width:40px;padding-left:5px;letter-spacing:5px;text-align:center;height:18px;padding-top:1px;margin:0 auto;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#daeefa,offX=1,offY=1,positives=true);}
.searchTool .btnSearch a:hover .lbl{padding-top:0px;}
</style>
<script>
function drop_mouseover(pos){
 try{window.clearTimeout(timer);}catch(e){}
}
function drop_mouseout(pos){
 var posSel=document.getElementById(pos+"Sel").style.display;
 if(posSel=="block"){
  timer = setTimeout("drop_hide('"+pos+"')", 1000);
 }
}
function drop_hide(pos){
 document.getElementById(pos+"Sel").style.display="none";
}
function search_show(pos,searchType,href){
    document.getElementById(pos+"SearchType").value=searchType;
    document.getElementById(pos+"Sel").style.display="none";
    document.getElementById(pos+"Slected").innerHTML=href.innerHTML;
    document.getElementById(pos+'q').focus();
    var sE = document.getElementById("searchExtend");
    if(sE != undefined && searchType == "bar"){
     sE.style.display="block";
    }else if(sE != undefined){
     sE.style.display="none";
    }
 try{window.clearTimeout(timer);}catch(e){}
 return false;
}
</script>
</HEAD>
<BODY>
<div class="searchTool">
<form method="get" action="http://so.youku.com/search_playlist" name="headSearchForm" id="headSearchForm" onsubmit="return dosearch(this);">
     <input class="txtSearch" id="headq" name="q" type="text" value="闯关东" />
     <input name="searchdomain" type="hidden" value="http://so.youku.com">
     <input id="headSearchType" name="searchType" type="hidden" value="playlist">
     <div class="selSearch">
    <div class="nowSearch" id="headSlected" onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;" onmouseout="drop_mouseout('head');">专辑</div>
    <div class="btnSel"><a href="#" onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;" onmouseout="drop_mouseout('head');"></a></div>
    <div class="clear"></div>
    <ul class="selOption" id="headSel" style="display:none;">
     <li><a href="#" onclick="return search_show('head','video',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">视频</a></li>
     <li><a href="#" onclick="return search_show('head','playlist',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">专辑</a></li>
     <li><a href="#" onclick="return search_show('head','user',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">会员</a></li>
     <li><a href="#" onclick="return search_show('head','bar',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">看吧</a></li>
     <li><a href="#" onclick="return search_show('head','pk',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">PK擂台</a></li>
    </ul>
     </div>
     <div class="btnSearch">
    <a href="#" onclick="javascript:return dosearch(document.getElementById('headSearchForm'));"><span class="lbl">搜索</span></a>
     </div>
          <div class="searchExtend" id="searchExtend" name="searchExtend" style="display:none">
           <input type="radio" class="radio" name="sbt" value="post" onclick="csbt(this,this.form.sbts);" />搜贴子<input type="radio" name="sbt" value="user" onclick="csbt(this,this.form.sbts);" class="radio" />按作者搜<input type="hidden" name="sbts" value="bar">
     </div>
          <div class="clear"></div>
     </form>
   </div>
   <div class="clear"></div>
  </div>
 </div>
</BODY>
</HTML>

]]> http://www.9demo.com/default.asp?id=271 <![CDATA[在FF解决自动保存input框内容，通过回车选中]]> feiwen8772@hotmail.com(feiwen8772) Sun,20 Apr 2008 01:37:08 +0800 http://www.9demo.com/default.asp?id=271 在FF中如果在input框中抓了回车键后，ie的自动保存，无法通过回车键完成。

可以通过下列的方法实现，原理，延长页面回车后的动作。

function key_submit(evt)
{
 if(evt==null) evt=window.event;
 if(evt.keyCode==13) {//捕捉回车键
  tempUserName=document.getElementById(”loginForm”).fldEmail.value;
  window.setTimeout(’preloginSubmit()’,100);//延迟100毫秒触发
 }
}
function preloginSubmit()
{
 if (tempUserName==document.getElementById(”loginForm”).fldEmail.value)
  loginSubmit();
 else
  return;
}

]]> http://www.9demo.com/default.asp?id=270 <![CDATA[制作不规则导航]]> feiwen8772@hotmail.com(feiwen8772) Wed,16 Apr 2008 19:35:07 +0800 http://www.9demo.com/default.asp?id=270 前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。



先看图（图片只是大致做了一下）



xhtml结构部分内容：

程序代码 程序代码
<ul>
    <li><a href="#" title="菜单">菜单</a></li>
    <li><a href="#" title="菜单">菜单</a></li>
    <li><a href="#" title="菜单">菜单</a></li>
</ul>



css部分内容：

程序代码 程序代码
* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(attachments/month_0804/d200843194011.gif) center center no-repeat;}
a:hover {color:#000;background:url(attachments/month_0804/s200843194022.gif) 0 0 no-repeat;width:86px;position:relative;}

===================================================

<!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=utf-8" />
<meta name="author" content="Linxz" />
<title>无标题文档</title>
<style type="text/css">
* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(attachments/month_0804/s200843194022.gif) center center no-repeat;}
a:hover {color:#000;background:url(attachments/month_0804/d200843194011.gif) 0 0 no-repeat;width:86px;position:relative;}
</style>
</head>

<body>
<ul>
 <li><a href="#" title="菜单">菜单</a></li>
 <li><a href="#" title="菜单">菜单</a></li>
 <li><a href="#" title="菜单">菜单</a></li>
</ul>
</body>
</html>

]]> http://www.9demo.com/default.asp?id=268 <![CDATA[图片和文字布局问题]]> feiwen8772@hotmail.com(feiwen8772) Wed,16 Apr 2008 19:30:31 +0800 http://www.9demo.com/default.asp?id=268 这两天制作页面遇如下图的问题, 整理了一下方便自己同时也希望方便了同行们…
备注: 根据要求,XHTML架构是固定以下的代码, 另外图片跟文字的,宽度比例是随内容而改变

实现左文右图板块-Gulu77

这问题一时三刻没有弄出来,通过在经典论坛中得到了wiseinfo帮助,给了一些提示在此非常感激!

解决方案:

左图右文板块http://blog.gulu77.com/demo/200804/imgfloatleft.html

左文右图板块http://blog.gulu77.com/demo/200804/imgfloatright.html

针对IE的http://blog.gulu77.com/demo/200804/floattest.html

问题解决思路:
IE系列浏览器-
在.block内的div设置浮动后问题得以解决。(据我个人理解,IE的解析为 给同等级元素设置float后,自动赋予对象,所谓的100%高度空间!所以内容才会分为左右两块)

非IE浏览器-
在非IE中则没有float 100%高度空间的解析, 而我采用了wiseinfo所说的用display:table-call;把.block内的div作为表格单元格显示问题得以解决

延伸思考:
为什么在IE中同等级元素设置float后,会占100%高度空间,这样的解析在非IE中确没有,到底谁的解析才是正确? 他们的解析机制是什么?

注意文中所指的IE为:  IE5.5 / IE6 / IE7 

]]> http://www.9demo.com/default.asp?id=267 <![CDATA[下拉框(select)遮住弹出层问题]]> feiwen8772@hotmail.com(feiwen8772) Mon,14 Apr 2008 22:40:06 +0800 http://www.9demo.com/default.asp?id=267 在IE6下下拉框(select)会遮住弹出层，用样式办法暂时无法解决，包括z-index这个属性。

想了一个最变态的方法：

就是在层弹出的时候把下拉框给隐藏掉，用display:none属性或visable:hiddle属性;当层隐藏的时候再把下拉框给显示出来：

function hiddenselect()
{
    var f = document.forms["form1"];
    if (f)
    {
    for (i=0;i<f.elements.length;i++)
   {
   if (f.elements[i].type=="select-one")
   {
   f.elements[i].style.display="none";
   }
   }
   }
}

function showselect()
{
    var f = document.forms["form1"];
    if (f)
    {
    for (i=0;i<f.elements.length;i++)
   {
   if (f.elements[i].type=="select-one")
   {
   f.elements[i].style.display="";
   }
   }
   }
}

 

]]> http://www.9demo.com/default.asp?id=266 <![CDATA[按回车执行js函数]]> feiwen8772@hotmail.com(feiwen8772) Fri,11 Apr 2008 19:28:11 +0800 http://www.9demo.com/default.asp?id=266 网页中经常会有提交表单，按回车执行登录或者注册，比较方便

HTML：

<input class="btn_l" type="image" alt="登录" src="img/login.gif" onclick="login();" onKeyDown="ctlent()">

JS：

function ctlent(eventobject){
if((event.ctrlKey&&window.event.keyCode==13)||window.event.keyCode==13)
{login();return false;}
else{return true;}}
</script>

]]> http://www.9demo.com/default.asp?id=265 <![CDATA[用CSS美化按钮（button）]]> feiwen8772@hotmail.com(feiwen8772) Thu,10 Apr 2008 00:30:06 +0800 http://www.9demo.com/default.asp?id=265  

演示地址：http://www.9demo.com/demo/css_button/css_button.htm

 

我们用 A 包含一个 SPAN 标签来实现此效果：

HTML:

<a class="button" href="#"><span>按钮文字</span></a> 


设置按钮样式：

CSS:

<style type="text/css">  a.button {     background: transparent url('bg_button_a.gif') no-repeat scroll top right;     color: #444;     display: block;     float: left;     font: normal 12px arial, sans-serif;     height: 24px;     margin-right: 6px;     padding-right: 18px; /* sliding doors padding */     text-decoration: none; }  a.button span {     background: transparent url('bg_button_div.gif') no-repeat;     display: block;     line-height: 14px;     padding: 5px 0 5px 18px; }  </style> 


为按钮添加点击样式：

CSS:

<style type="text/css">  a.button:active {     background-position: bottom right;     color: #000;     outline: none; /* hide dotted outline in Firefox */ }  a.button:active span {     background-position: bottom left;     padding: 6px 0 4px 18px; /* push text down 1px */ }  </style> 


由于 IE 下点击后不能还原到默认状态，因此，我们需要在标签里添加一段代码：

HTML: <a class="button" href="#" onclick="this.blur(); return false;"><span>按钮文字</span></a> 


如果你需要用它提交表单（FORM），那么可以在 onclick 里面添加一个提交语句，如：document.forms['theForm'].submit();

 

]]> http://www.9demo.com/default.asp?id=264 <![CDATA[AJAX实例合辑]]> feiwen8772@hotmail.com(feiwen8772) Wed,09 Apr 2008 23:54:56 +0800 http://www.9demo.com/default.asp?id=264 Ajallerix  : AJAX, simple, fast Web image gallery demo ; at Novell
  • AJAX - microlink pattern tutorial  : A microlink is a link that opens up content below it.
  • Ajax BBC News RSS Reader : demo by Nigel Crawley
  • AJAX Chat in Python with Dojo : at AquaAjax
  • Ajax Chess : multiplayer chess
  • Ajax examples at BackBase : examples demonstrating several aspects of the Backbase technology.
  • Ajax examples at Rico : Inner HTML, JavaScript updater etc.
  • Ajax examples using ColdFusionMX, SQLServer, SOAP : Contact Manager, NOAA 7 Day Forecast code and demos.
  • Ajax Feed TV : News feed
  • Ajax inline dictionary : Highlight any text on this site then right click. A tooltip containing the definition of the selected word should show up.
  • Ajaxload : Ajax loading gif generator.
  • Ajax Login Demo : Creating a secure login system using XMLHttpRequest
  • Ajax Newsletter Signup : A newsletter signup form that shows Thank You on the same page.
  • ajaxProject : Project Management applicaiton with rich UI
  • Ajax Rater : A star rating system that uses Ajax.
  • AJAX-S : An Ajax-based slideshow system.
  • AJAX Spell Checker : spell check text / form content.
  • Ajax Toolbox : Tools for the Ajax Developer
  • Amazon Catalog Tree : Amazon Catalog Tree
  • Amazon Zuggest : Amazon product suggestion (like google suggest)
  • Askeet by symfony : Digg-like AJAX interactions; open source
  • Backbase - Ajax Demos : Ajax demos at BackBase
  • Basic Ajax Examples : Ping, track changes, drop down, Google suggest hack etc at Clearnova
  • Behaviour : Fading lists, Sortable lists, Dropout boxen, Shaky lists
  • chat.app : ajax chat
  • Chihuahua Word Puzzle : daily word puzzles
  • Coloir : Ajax Slideshow
  • DHTML arcade/action games : a collection that demonstrate the power of DHTML
  • DomAPI : Windows Desktop, Outlook-like, RSS Reader
  • Drag and Drop Shopping Cart Demo : at CyberDummy
  • Easy AJAX inline text edit 2.0 : edit a piece of text inline
  • FileChucker : File upload and progress bar at Encodable.com
  • Gmail Style Check Username AJAX Demo : at CyberDummy
  • Google Web Toolkit Example Projects : Hello World, Dynamic Table, Desktop App Clone etc
  • GreyBox  : Pop up window using idea of light box.
  • FiftyFourEleven: Ajax Examples
  • IntuiCat - ajax Catalogue : Ajax-based Catalogue Demo
  • jsLINB programming demos : LINB(Lazy INternet and Browser)
  • JSlog : Ajax logging tool.
  • JS/UIX Unix Shell : JS/UIX is an UN*X-like OS for standard web-browsers, written entirely in JavaScript.
  • Lace : free web chat application
  • Lightbox : simple, unobtrusive script used to overlay images on the current page.
  • Leightbox : Light Box with inline div’s instead of AJAX calls.
  • Live Quote Demo : Simple way of creating an updating stock quote table in ajax.
  • Magnetic Poetry : drag and drop poetry
  • Metatron Chat Engine : PHP/MySQL/JavaScript powered chat engine
  • Monket Calendar : online calendar
  • Multi List Drag Drop Demo : at CyberDummy
  • NetDirector : open and extensible framework for managing configurations of common open source network services.
  • nexImage : Image processing demo
  • Opera Platform : Enabling AJAX applications on mobile phones
  • Orbeon examples : various examples illustrating the capabilities of OPS, from the OPS Tutorial examples to XForms examples
  • OVO Suite : Online Virtual Office : virtual office limited demo
  • phpFreeChat : php Free Chat
  • S5: A Simple Standards-Based Slide Show System : S5 is a slide show format based entirely on XHTML, CSS, and JavaScript.
  • script.aculo.us Reflector : image reflector script that uses uses opacity-based fades
  • Slider Bar Demo : at CyberDummy
  • SmallestAjax : Smallest Ajax example in the world?
  • Spell Check demo : by Primal Grasp
  • Super Maryo World : Japanese game demo
  • Tacos : Tacos provides a library of useful Tapestry components. This application provides some examples to get you started.
  • theList : to-do list / bug-tracker
  • ThickBox : ThickBox is a Lightbox than can show html pages as well as images.
  • Tooltip.js : Tooltip.js is a simple class to make it possible to add tooltips to your page.
  • Treehouse Chat : ajax chat
  • Tudu Lists : open-source to-do lists
  • WeBoggle : Ajax Boggle
  • XHTML live Chat : ajax chat
  • YahooSearchAsYouType : Yahoo search as you type
  • ZK Demo : demo programs for various components
    • ]]>