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

div下拉菜单-添加鼠标动作

Submitted by lijs on 2008, November 20, 12:55 PM. 我的作坊

添加了对鼠标的动作的反应。

注，本下拉菜单需要jquery库。

 

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('application','category','source','storetype','signalpath','recordingenv','language','place');   
  32. var ct=[["play","\u6d4b\u8bd5","\u60f3\u50cf","pok","listen"],["\u6587\u672c","music"],["thu","my","\u5b66\u751f","sun","microsoft"],["mu","mp3","txt","bits","wma","ape"],["\u7535\u8bdd","none","phoneline","line"],["\u5f55\u97f3\u5ba4","mic"],["cn","\u9e1f\u8bed","en"],["\u6570\u636e\u5e93","home","in brain","new"]];   
  33. var index=0;   
  34. var first=0;   
  35. var maxindex=0;   
  36. var oldstr='!old';   
  37. var nowastr='';   
  38. function getlist(str,kw){   
  39.     var i=0;   
  40.     for(i=0;i<8;i++){   
  41.         if(str==astr[i]){   
  42.             break;   
  43.         }   
  44.     }   
  45.     if(i==8){   
  46.         return Array();   
  47.     }else{   
  48.         var k=0;   
  49.         var j=0;   
  50.         var d=Array();   
  51.         for(k=0;k<ct[i].length;k++)   
  52.         {   
  53.             if(ct[i][k].substr(0,kw.length)==kw){   
  54.                 d[j++]=ct[i][k];   
  55.             }   
  56.         }   
  57.         return d;   
  58.     }   
  59. }   
  60. function getfocus(obj){   
  61.     //if(first==0){   
  62.         var pu=$("#popup");   
  63.         var offset=$(obj).offset();   
  64.         pu.css('top', offset.top+$(obj).height()+6);   
  65.         pu.css('left',offset.left);   
  66.         pu.css('width', $(obj).width()+4);   
  67.         index=0;   
  68.         first=1;   
  69.         oldstr='!old';   
  70.         oc(obj);   
  71.     //}   
  72. }   
  73. function lostfocus(){   
  74.     if(first==1){   
  75.     $("#popup").hide();   
  76.     first=0;   
  77.     }   
  78. }   
  79. function oku(event,obj){   
  80.     var e=event;   
  81.     keyCode=e.keyCode;   
  82.     if(keyCode==38){   
  83.         if(index>0){   
  84.             index--;   
  85.             var o=$(".selected");   
  86.             o.removeClass('selected');   
  87.             o.prev().addClass('selected');   
  88.         }   
  89.     }else if(keyCode==40){   
  90.         if(index<maxindex){   
  91.             index++;   
  92.             var o=$(".selected");   
  93.             o.removeClass('selected');   
  94.             o.next().addClass('selected');   
  95.         }   
  96.     }else if(keyCode==13){   
  97.         var str=$(obj).attr('value');   
  98.         var strstra=str.split(',');   
  99.         var newstr='';   
  100.         for(i=0;i<stra.length-1;i++){   
  101.             newstrnewstr=newstr+stra[i]+',';   
  102.         }   
  103.         newstrnewstr=newstr+$(".selected").text();   
  104.         $(obj).attr('value', newstr);   
  105.         oc(obj);   
  106.     }else{   
  107.         oc(obj);   
  108.     }   
  109. }   
  110. function mmove(obj){   
  111.     $(".selected").removeClass('selected');   
  112.     $(obj).addClass('selected');   
  113.     index=$(obj).attr('value');   
  114. }   
  115. function mclick(){   
  116.     var obj=nowastr;   
  117.     var str=$(obj).attr('value');   
  118.     var strstra=str.split(',');   
  119.     var newstr='';   
  120.     for(i=0;i<stra.length-1;i++){   
  121.         newstrnewstr=newstr+stra[i]+',';   
  122.     }   
  123.     newstrnewstr=newstr+$(".selected").text();   
  124.     $(obj).attr('value', newstr);   
  125.     $(obj).focus();   
  126.     var rng =$(obj)[0].createTextRange();   
  127.     rng.collapse(false);   
  128.     rng.select();   
  129.     oc(obj);   
  130. }   
  131. function oc(obj){   
  132.     var str=$(obj).attr('value');   
  133.     var strstra=str.split(',');   
  134.     str=stra[stra.length-1];   
  135.     if(str!=oldstr){   
  136.         if(str.length==0)index=0;   
  137.         var cstr=obj.substr(1,obj.length-5);   
  138.         d=getlist(cstr,str);   
  139.         maxindex=d.length-1;   
  140.         if(index>maxindex)index=maxindex;   
  141.         h='<ur>';   
  142.         for(i=0;i<d.length;i++){   
  143.             if(i==index)   
  144.                 hh=h+'<li value="'+i+'" onmousemove="mmove(this);" class="selected">'+d[i]+'</li>';   
  145.             else   
  146.                 hh=h+'<li value="'+i+'" onmousemove="mmove(this);">'+d[i]+'</li>';   
  147.         }   
  148.         hh=h+'</ur>';   
  149.         nowastr=obj;   
  150.         $("#popup").html(h);   
  151.         oldstr=str;   
  152.     }   
  153.     if(first){   
  154.         $("#popup").slideDown('fast');   
  155.     }   
  156. }   
  157. function st(){   
  158.     $("#addform").submit();   
  159.     return false;   
  160. }   
  161. -->  
  162. </script>  
  163. <div>对于　来源、类型、存储格式、信道、录音环境、语种、存放位置、应用，<br />都可用“,”(逗号)分隔多个条目。</div>  
  164. <div id='popup' onclick="mclick();" onmouseover="first=2;" onmouseout="first=1;" style='position:absolute;background:#EEEEEE;border: 1px solid #CCCCCC;font-size:14px;cursor: default;display:none;filter:alpha(opacity=80);z-index:20000'></div>  
  165. <div id="form">  
  166. <form id="addform" method="post" action="/index.php/Admin/savelib" onsubmit="return false;">  
  167. <input id="libid" name="libid" value="na" type="hidden" />  
  168. <input type="hidden" name="status" value="1" />  
  169. <input name="isnew" type="hidden" value="true" />  
  170. <table>  
  171.     <tr>  
  172.         <td class="tdleft"><label for="libname">名称</label></td><td><input id="libname" name="libname" type="text" /></td>  
  173.         <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>  
  174.     </tr>  
  175.     <tr>  
  176.         <td class="tdleft"><label for="ctime">发布日期</label></td><td><input id="ctime" name="ctime" type="text" value="2008-11-19" /></td>  
  177.         <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>  
  178.     </tr>  
  179.     <tr>  
  180.         <td class="tdleft"><label for="samplerate">采样率</label></td><td><input id="samplerate" name="samplerate" type="text" />(整数)</td>  
  181.         <td class="tdleft"><label for="samplebits">量化位数</label></td><td><input id="samplebits" name="samplebits" type="text" />(整数)</td>  
  182.     </tr>  
  183.     <tr>  
  184.         <td class="tdleft"><label for="tracks">声道</label></td><td><input id="tracks" name="tracks" type="text" />(整数)</td>  
  185.         <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>  
  186.     </tr>  
  187.     <tr>  
  188.         <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>  
  189.         <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>  
  190.     </tr>  
  191.     <tr>  
  192.         <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>  
  193.         <td class="tdleft"><label for="speaker">说话人</label></td><td><input id="speaker" name="speaker" type="text" /></td>  
  194.     </tr>  
  195.     <tr>  
  196.         <td class="tdleft"><label for="size">数据大小</label></td><td><input id="size" name="size" type="text" /></td>  
  197.         <td class="tdleft"><label for="price">价格</label></td><td><input id="price" name="price" type="text" /></td>  
  198.     </tr>  
  199.     <tr>  
  200.         <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>  
  201.         <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>  
  202.     </tr>  
  203.     <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>  
  204.     <tr><td colspan="4" align="center"><input type="button" onclick="st();" value="添加" />　<input type="reset" value="重置" /></td></tr>  
  205. </table>  
  206. </form>  
  207. </div>  
  208. <hr />  
  209. <script type="text/javascript">  
  210. <!--   
  211. function upload(){   
  212.     document.getElementById("uploadbutton").disabled=true;   
  213.     $("#uploadform").submit();   
  214.     return true;   
  215. }   
  216. -->  
  217. </script>  
  218. 样例上传：   
  219. <span id="info">  
  220. 请选择文件上传。   
  221. </span>  
  222. <div id="upload">  
  223. <form id="uploadform" method="post" action="/index.php/Admin/upload/" enctype="multipart/form-data" target="iframeUpload">  
  224. <input type="hidden" id="c" name="c" value="0" /><input id="ulibid" name="libid" value="na" type="hidden" />  
  225. <input type="file" id="file" name="file" size="60" />　<input id="uploadbutton" type="submit" value="上传" onclick="upload();" />  
  226. </form>  
  227. <iframe name="iframeUpload" src="" width="600" height="35" frameborder="0"  SCROLLING="no" style="display:none;"></iframe>  
  228. </div>  
  229. <div id="filelist">  
  230. 已经上传的文件：<br />  
  231. </div>  
  232.   
  233. </body>  
  234. </html>  

Tags: srt, 网页

« 上一篇 | 下一篇 »

只显示5条记录相关文章

可能是jQuery1.3.2的一个小bug (浏览: 622, 评论: 1)
今天对JavaScript的一点小收获 (浏览: 945, 评论: 2)
div下拉菜单的实现 (浏览: 2440, 评论: 0)
从z-blog 1.7到sablog-x 1.6 (浏览: 4996, 评论: 4)
php unescape iconv无效时 (浏览: 1308, 评论: 0)

发表评论

评论内容 (必填):