• Uncle Liu's Blog
  • 追忆曾经逝去的岁月,在此存放我容易丢失的记忆!
  • 首页
  • 碎语
  • 留言板
  • 登录

  • 51job多选效果

    [Javascript]
    post by Uncle Liu / 2009-3-5 1:44 Thursday

     

    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=gb2312" />  
    5. <title>无标题文档</title>  
    6. <style type="text/css">  
    7. <!--   
    8. body{padding-top:50px;font-size:12px;}   
    9. h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;}   
    10. .bton{border:1px solid #CCC;background:#DDD;}   
    11. .cont{padding:10px;}   
    12. #main{width:400px;margin:0px auto;}   
    13. #selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;width:400px;z-index:2;}   
    14. #preview{margin:1px;border:1px solid #CCC;}   
    15. #result{border:1px solid #CCC;margin-top:10px;}   
    16. .tit{line-height:20px;height:20px;margin:1px;padding-left:10px;}   
    17. .bgc_ccc{background:#CCC;}   
    18. .bgc_eee{background:#eee;}   
    19. .c_999{color:#999}   
    20. .pointer{cursor:pointer;}   
    21. .left{float:left;}   
    22. .right{float:right;}   
    23. .cls{clear:both;font-size:0px;height:0px;overflow:hidden;}   
    24. #bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;}   
    25. .hidden{display:none;}   
    26. .move{cursor:move;}   
    27. -->  
    28. </style>  
    29. </head>  
    30. <body>  
    31. <div id="main">  
    32.   <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/>  
    33.   <div id="result">  
    34.   <div class="tit bgc_eee">  
    35.    <h2>您已选择的城市汇总</h2>  
    36.   </div>    
    37.   <div class="cont" id="makeSureItem">  
    38.   </div>  
    39.   </div>  
    40. </div>  
    41.     
    42. <div id="bg">  
    43. </div>  
    44. <div id="selectItem" class="hidden">  
    45.   <div class="tit bgc_ccc move" onmousedown="drag(event,this)">  
    46.    <h2 class="left">请选择城市</h2>  
    47.    <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span>  
    48.    <span class="pointer right" onclick="makeSure();">[确定]</span>      
    49.   </div>  
    50.   <div class="cls"></div>  
    51.   <div class="cont">  
    52.    <div id="selectSub">  
    53.     <select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;">  
    54.      <option value="0">第0层</option>  
    55.      <option value="1">第1层</option>  
    56.      <option value="2">第2层</option>  
    57.      <option value="3">第3层</option>  
    58.     </select>  
    59.     <div id="c00">  
    60.      <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京   
    61.      <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建   
    62.      <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川    
    63.      <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏   
    64.     </div>  
    65.     <div id="c01">  
    66.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海   
    67.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南   
    68.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州   
    69.     </div>  
    70.     <div id="c02">  
    71.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江   
    72.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林   
    73.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁   
    74.     </div>  
    75.     <div id="c03">  
    76.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国   
    77.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗   
    78.      <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本   
    79.     </div>  
    80.    </div>  
    81.   </div>  
    82.   <div id="preview">  
    83.    <div class="tit bgc_eee c_999">  
    84.     <h2>您已选择的城市</h2>  
    85.    </div>    
    86.    <div class="cont" id="previewItem">  
    87.    </div>  
    88.   </div>  
    89. </div>  


     

    « Linux对普通用户的优势 | 男人不成熟的35个标志!»

    引用地址:

    有以下朋友发表了自己的看法：

    Gravatar tiffanyjewelryhot
    2011-12-19 12:59
    还是只支持ie
    Gravatar moncler jackets
    2011-12-19 12:54
    感谢分享哈。。

    发表评论：

  • 搜索

  • 岁月如梭

  • 分类

    • 心情记事(40) 订阅该分类
    • 经典网文(30) 订阅该分类
    • PHP+MYSQL(40) 订阅该分类
    • Javascript(21) 订阅该分类
    • 电脑网络(33) 订阅该分类
    • emlog(7) 订阅该分类
    • Linux(2) 订阅该分类

  • 日历

  • 随机日志

    • 40条优化php代码的小实例
    • php删除文件夹及其文件夹下所有文件
    • 我是一个不喜欢看AV的人
    • 烽火辞
    • 在线工具

  • 链接

    • TangJun's blog
    • vb.vc个性域名
    • 点滴记忆
    • 奇遇——心情随笔
    • Sfan@Live
    • 乐小北
    • 游戏毁我半生
    • 铁观音茶叶
    • ═╬簡箪√嗳
    • KLLER's Blog
    • Web前端开发
    • 零度自由
    • PHP100中文站论坛
    • Api.im
    • emlog

  • 最新日志

    • 茶汤
    • 操蛋的一年终于过去了
    • 域名城第16届域名大赛 - “非6勿扰”双拼.com域名大赛
    • 永远的兄弟
    • 夜半孤寂茶当酒，一壶独饮到天明

  • soft

    • 分类信息
订阅Rss
Powered by emlog | Loekman 主题 | 沪ICP备09020591号