有是给rain写的列表。笔记一下。 一直想给编辑器加一个直接运行代码的按钮，但是确实能力有限不知道怎么加。有不愿去搜索。毕竟blog是做笔记的地方。不是给别人show的，所以给为看的朋友请见谅 麻烦复制到 DW里面 保存看效果。 可以使用 /d 来替换所有的项目列表数字符号。之前我的文章里面有提到过。
这个选项列表要求大概是这样的， 点击标签然后 弹出列表，把列表项目最长的一项的宽度 给 点击标签。并且把文本值给过去。同时关闭列表。
XML/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=utf-8" />
- <title>大白奥特曼</title>
- <style>
- #s { border:#666 solid 1px; width:50px; line-height:18px; cursor:pointer; }
- #o { display:none; border:#666 solid 1px; padding:0; margin:0; list-style:none; position:relative; top:-1px; }
- #o a { display:block; height:18px; line-height:18px; overflow:hidden; text-decoration:none }
- #o a:hover { background: #039; color:#FFF; }
- </style>
- </head>
- <body>
- <div id="s">请选择</div>
- <ul id="o">
- <li><a href="#"><span>dabai</span></a></li>
- <li><a href="#"><span>奥特曼</span></a></li>
- <li><a href="#"><span>db.chen</span></a></li>
- <li><a href="#"><span>奥特曼打怪兽</span></a></li>
- <li><a href="#"><span>dabaii.com</span></a></li>
- </ul>
- <script>
- function operationList(objS,objO,longestTag){
- //tagD操作对象 tagU列表 tagO宽度对象 tagL宽度对象长度 tagW宽度对象存储宽度数组 displayState列表默认显示属性
- var tagD = document.getElementById(objS);
- var tagU = document.getElementById(objO);
- var tagO = tagU.getElementsByTagName(longestTag);
- var tagL = tagO.length;
- var tagW = [];
- var displayState;
- //获取默认显示属性
- if(document.all){
- displayState = tagU.currentStyle.display;
- }
- else{
- displayState = window.getComputedStyle(tagU,null).display;
- }
- //操作对象绑定点击事件 打开列表
- tagD.onclick = function(){
- if(displayState == 'none'){
- tagU.style.display = 'block';
- }
- }
- //列表项目 绑定点击事件，设置列表项目文字给操作对象
- for (var i = 0; i < tagL; i++){
- tagO[i].parentNode.onclick = (function(){
- var outText = function(){
- tagD.innerHTML = this.innerHTML;
- }
- return outText;
- })()
- }
- //列表绑定事件 获取列表项目最大宽度 并设置给操作对象，关闭列表
- tagU.onclick = function(){
- for (var i = 0; i < tagL; i++){
- tagW[i] = tagO[i].offsetWidth;
- }
- //列表项目排序
- tagW.sort(function(x1,x2){
- if(x1 > x2) {
- return 1;
- }
- else if(x1 = x2){
- return 0;
- }
- else{
- return -1;
- }
- }).reverse();
- tagD.style.width = tagW[0]+'px';
- tagU.style.display = 'none';
- }
- }
- operationList('s','o','span')
- </script>
- </body>
- </html>
#1
