会挽雕弓如满月，西北望，射天狼。 注册 | 登陆

div下拉菜单的实现

Submitted by lijs on 2008, October 25, 10:04 AM. 我的作坊

这几天有时间都在弄这个东西，为了提升客户使用感受。这个是SRT项目的一部分。

我把客户端代码放上来给大家参考。

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>添加语料库</title>  
  6. <link rel='stylesheet' type='text/css' href='/Tpl/default/Public/css/admin.css' />  
  7. </head>  
  8. <body>  
  9. <div id="title">添加语料库</div>  
  10. <hr width="600px" align="left" />  
  11. <script type='text/javascript' src='/Tpl/default/Public/js/jquery-1.2.6.pack.js'></script>    
  12. <style type="text/css">  
  13. <!--   
  14. .selected {   
  15. background:#CDEB8B;   
  16. }   
  17. #popup ur {   
  18. margin:0px;   
  19. padding:0px;   
  20. }   
  21. #popup li {   
  22. margin:0px;   
  23. padding:1px;   
  24. line-height:20px;   
  25. list-style:none;   
  26. }   
  27. -->  
  28. </style>  
  29. <script type="text/javascript">  
  30. <!--   
  31. var astr=Array('source','category','storetype','signalpath','recordingenv','language','place','application');   
  32. var ct=[["my","thu","sun","microsoft"],["music"],["mp3","bits","mu","wma","ape"],["\u7535\u8bdd","none","phone","line"],["\u5f55\u97f3\u5ba4","mic"],["cn","en"],["home","in brain","new"],["\u60f3\u50cf","play","pok","listen"]];   
  33. var index=0;   
  34. var first=0;   
  35. var maxindex=0;   
  36. var oldstr='!old';   
  37. function getlist(str,kw){   
  38.     var i=0;   
  39.     for(i=0;i<8;i++){   
  40.         if(str==astr[i]){   
  41.             break;   
  42.         }   
  43.     }   
  44.     if(i==8){   
  45.         return Array();   
  46.     }else{   
  47.         var k=0;   
  48.         var j=0;   
  49.         var d=Array();   
  50.         for(k=0;k<ct[i].length;k++)   
  51.         {   
  52.             if(ct[i][k].substr(0,kw.length)==kw){   
  53.                 d[j++]=ct[i][k];   
  54.             }   
  55.         }   
  56.         return d;   
  57.     }   
  58. }   
  59. function getfocus(obj){   
  60.     if(first==0){   
  61.         var pu=$("#popup");   
  62.         var offset=$(obj).offset();   
  63.         pu.css('top', offset.top+$(obj).height()+6);   
  64.         pu.css('left',offset.left);   
  65.         pu.css('width', $(obj).width()+4);   
  66.         index=0;   
  67.         first=1;   
  68.         oldstr='!old';   
  69.         oc(obj);   
  70.     }   
  71. }   
  72. function lostfocus(){   
  73.     $("#popup").hide();   
  74.     first=0;   
  75. }   
  76. function oku(event,obj){   
  77.     var e=event;   
  78.     keyCode=e.keyCode;   
  79.     if(keyCode==38){   
  80.         if(index>0){   
  81.             index--;   
  82.             var o=$(".selected");   
  83.             o.removeClass('selected');   
  84.             o.prev().addClass('selected');   
  85.         }   
  86.     }else if(keyCode==40){   
  87.         if(index<maxindex){   
  88.             index++;   
  89.             var o=$(".selected");   
  90.             o.removeClass('selected');   
  91.             o.next().addClass('selected');   
  92.         }   
  93.     }else if(keyCode==13){   
  94.         var str=$(obj).attr('value');   
  95.         var strstra=str.split(',');   
  96.         var newstr='';   
  97.         for(i=0;i<stra.length-1;i++){   
  98.             newstrnewstr=newstr+stra[i]+',';   
  99.         }   
  100.         newstrnewstr=newstr+$(".selected").text();   
  101.         $(obj).attr('value', newstr);   
  102.         oc(obj);   
  103.     }else{   
  104.         oc(obj);   
  105.     }   
  106. }   
  107. function oc(obj){   
  108.     var str=$(obj).attr('value');   
  109.     var strstra=str.split(',');   
  110.     str=stra[stra.length-1];   
  111.     if(str!=oldstr){   
  112.         if(str.length==0)index=0;   
  113.         var cstr=obj.substr(1,obj.length-5);   
  114.         d=getlist(cstr,str);   
  115.         maxindex=d.length-1;   
  116.         if(index>maxindex)index=maxindex;   
  117.         h='<ur>';   
  118.         for(i=0;i<d.length;i++){   
  119.             if(i==index)   
  120.                 hh=h+'<li class="selected">'+d[i]+'</li>';   
  121.             else   
  122.                 hh=h+'<li>'+d[i]+'</li>';   
  123.         }   
  124.         hh=h+'</ur>';   
  125.         $("#popup").html(h);   
  126.         oldstr=str;   
  127.     }   
  128.     if(first){   
  129.         $("#popup").slideDown('fast');   
  130.     }   
  131. }   
  132. function st(){   
  133.     $("#addform").submit();   
  134.     return false;   
  135. }   
  136. -->  
  137. </script>  
  138. <div>对于　来源、类型、存储格式、信道、录音环境、语种、存放位置、应用，<br />都可用“,”(逗号)分隔多个条目。</div>  
  139. <div id='popup' style='position:absolute;background:#EEEEEE;border: 1px solid #CCCCCC;font-size:14px;cursor: default;display:none;filter:alpha(opacity=80);z-index:20000'></div>  
  140. <div id="form">  
  141. <form id="addform" method="post" action="/index.php/Admin/savelib" onsubmit="return false;">  
  142. <input id="libid" name="libid" value="na" type="hidden" />  
  143. <input type="hidden" name="status" value="1" />  
  144. <input name="isnew" type="hidden" value="true" />  
  145. <table>  
  146.     <tr>  
  147.         <td class="tdleft"><label for="libname">名称</label></td><td><input id="libname" name="libname" type="text" /></td>  
  148.         <td class="tdleft"><label for="sourcename">来源</label></td><td><input id="sourcename" name="sourcename" type="text" onkeyup="oku(event,'#sourcename');" onfocus="getfocus('#sourcename');" onblur="lostfocus();" autocomplete="off" /></td>  
  149.     </tr>  
  150.     <tr>  
  151.         <td class="tdleft"><label for="ctime">发布日期</label></td><td><input id="ctime" name="ctime" type="text" value="2008-10-25" /></td>  
  152.         <td class="tdleft"><label for="categoryname">类型</label></td><td><input id="categoryname" name="categoryname" type="text" onkeyup="oku(event,'#categoryname');" onfocus="getfocus('#categoryname');" onblur="lostfocus();" autocomplete="off" /></td>  
  153.     </tr>  
  154.     <tr>  
  155.         <td class="tdleft"><label for="samplerate">采样率</label></td><td><input id="samplerate" name="samplerate" type="text" />(整数)</td>  
  156.         <td class="tdleft"><label for="samplebits">量化位数</label></td><td><input id="samplebits" name="samplebits" type="text" />(整数)</td>  
  157.     </tr>  
  158.     <tr>  
  159.         <td class="tdleft"><label for="tracks">声道</label></td><td><input id="tracks" name="tracks" type="text" />(整数)</td>  
  160.         <td class="tdleft"><label for="storetypename">存储格式</label></td><td><input id="storetypename" name="storetypename" type="text" onkeyup="oku(event,'#storetypename');" onfocus="getfocus('#storetypename');" onblur="lostfocus();" autocomplete="off" /></td>  
  161.     </tr>  
  162.     <tr>  
  163.         <td class="tdleft"><label for="signalpathname">信道</label></td><td><input id="signalpathname" name="signalpathname" type="text" onkeyup="oku(event,'#signalpathname');" onfocus="getfocus('#signalpathname');" onblur="lostfocus();" autocomplete="off" /></td>  
  164.         <td class="tdleft"><label for="recordingenvname">录音环境</label></td><td><input id="recordingenvname" name="recordingenvname" type="text" onkeyup="oku(event,'#recordingenvname');" onfocus="getfocus('#recordingenvname');" onblur="lostfocus();" autocomplete="off" /></td>  
  165.     </tr>  
  166.     <tr>  
  167.         <td class="tdleft"><label for="languagename">语种</label></td><td><input id="languagename" name="languagename" type="text" onkeyup="oku(event,'#languagename');" onfocus="getfocus('#languagename');" onblur="lostfocus();" autocomplete="off" /></td>  
  168.         <td class="tdleft"><label for="speaker">说话人</label></td><td><input id="speaker" name="speaker" type="text" /></td>  
  169.     </tr>  
  170.     <tr>  
  171.         <td class="tdleft"><label for="size">数据大小</label></td><td><input id="size" name="size" type="text" /></td>  
  172.         <td class="tdleft"><label for="price">价格</label></td><td><input id="price" name="price" type="text" /></td>  
  173.     </tr>  
  174.     <tr>  
  175.         <td class="tdleft"><label for="placename">存放位置</label></td><td><input id="placename" name="placename" type="text" onkeyup="oku(event,'#placename');" onfocus="getfocus('#placename');" onblur="lostfocus();" autocomplete="off" /></td>  
  176.         <td class="tdleft"><label for="applicationname">应用</label></td><td><input id="applicationname" name="applicationname" type="text" onkeyup="oku(event,'#applicationname');" onfocus="getfocus('#applicationname');" onblur="lostfocus();" autocomplete="off" /></td>  
  177.     </tr>  
  178.     <tr><td class="tdleft">介绍</td><td colspan="3"><!-- 编辑器调用开始 --><script type="text/javascript" src="/Public/Js/FCKeditor/fckeditor.js"></script><textarea id="editor" name="intro"></textarea><script type="text/javascript"> var oFCKeditor = new FCKeditor( "editor","500px","250px" ) ; oFCKeditor.BasePath = "/Public/Js/FCKeditor/" ; oFCKeditor.ReplaceTextarea() ;function resetEditor(){setContents("editor",document.getElementById("editor").value)}; function saveEditor(){document.getElementById("editor").value = getContents("editor");} function InsertHTML(html){ var oEditor = FCKeditorAPI.GetInstance("editor") ;if (oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml(html) ;}else   alert( "FCK必须处于WYSIWYG模式!" ) ;}</script> <!-- 编辑器调用结束 --></td></tr>  
  179.     <tr><td colspan="4" align="center"><input type="button" onclick="st();" value="添加" />　<input type="reset" value="重置" /></td></tr>  
  180. </table>  
  181. </form>  
  182. </div>  
  183. <hr />  
  184. <script type="text/javascript">  
  185. <!--   
  186. function upload(){   
  187.     document.getElementById("uploadbutton").disabled=true;   
  188.     $("#uploadform").submit();   
  189.     return true;   
  190. }   
  191. -->  
  192. </script>  
  193. 样例上传：   
  194. <span id="info">  
  195. 请选择文件上传。   
  196. </span>  
  197. <div id="upload">  
  198. <form id="uploadform" method="post" action="/index.php/Admin/upload/" enctype="multipart/form-data" target="iframeUpload">  
  199. <input type="hidden" id="c" name="c" value="0" /><input id="ulibid" name="libid" value="na" type="hidden" />  
  200. <input type="file" id="file" name="file" size="60" />　<input id="uploadbutton" type="submit" value="上传" onclick="upload();" />  
  201. </form>  
  202. <iframe name="iframeUpload" src="" width="600" height="35" frameborder="0"  SCROLLING="no" style="display:none;"></iframe>  
  203. </div>  
  204. <div id="filelist">  
  205. 已经上传的文件：<br />  
  206. </div>  
  207.   
  208. </body>  
  209. </html>  

Tags: srt, 网页

« 上一篇 | 下一篇 »

只显示5条记录相关文章

可能是jQuery1.3.2的一个小bug (浏览: 626, 评论: 1)
今天对JavaScript的一点小收获 (浏览: 955, 评论: 2)
div下拉菜单-添加鼠标动作 (浏览: 1382, 评论: 0)
从z-blog 1.7到sablog-x 1.6 (浏览: 4997, 评论: 4)
php unescape iconv无效时 (浏览: 1309, 评论: 0)

发表评论

评论内容 (必填):