最近项目一个接着一个，之前说的精创环的项目还没做完，今天说先把那个放一下，先做访客系统，销售会见客户之后可以对客户进行一个跟踪记录，原型图也给了，今日头条的频道自定义页面一样。

如果是在IOS上让我来做我能很快搞定，但是让用web来做可是难着我了，由于上一博客也写了关于ul、li的导航的demo，我也知道这个也可以用ul、li来做，但是真自己动手做的时候完全不是那回事，搞了半天都没搞定，华为那边客户说让两天搞定，真是压力山大。今天晚上下班吃完饭就坐在电脑前来解决这个问题，功夫不负有心人，可算是解决了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<style type="text/css"'>
div.menu
{
    width:300px;
}
/* 所有class为menu的div中的ul样式 */
div.menu ul
{
    list-style:none; /* 去掉ul前面的符号 */
    margin: 5px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width:auto; /*宽度根据元素内容调整*/
}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
    float:left;
    width:300px;
    margin:0px;
    font-size:24;
    font-weight:bold;
}
div.menu ul li ul
{
    list-style:none; /* 去掉ul前面的符号 */
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width:auto; /*宽度根据元素内容调整*/
}
div.menu ul li ul li
{
    float:left; /* 向左漂移，将竖排变为横排 */
    width:auto;
}
ul button {
   background:#fff;
   border-width:0.5px;
   border-color:gray;
   display: block;
   margin:5px;
   padding: 4px 20px; /* 内部填充的距离 */
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
}
ul button.active{
   background:gray;
   border-color:transparent;
}
</style>

<body>
<div class="menu">
        <ul>
            <li>
            <div>关键字1<div>
            <ul signalSelect='0' id="key">
               <li><button type='button'>按钮</button></li>
               <li> <button type='button'>按钮</button></li>
               <li> <button type='button'>按钮</button></li>
               <li> <button type='button'>按钮</button></li>
            </ul>
            </li>
            <li>
            <div>类别<div>
            <ul signalSelect='1' id="typeClass">
              <li><button type='button' >按钮</button></li>
              <li><button type='button' >按钮</button></li>
              <li> <button type='button'  >按钮</button></li>
              <li> <button type='button'>按钮</button></li>
            </ul>
            </li>

        </ul>
        <button type='button' style="margin:30px;text-align:center;height:30px; width:120px;align:center;" id="saveBtn">保存</button>
    </div>
</body>
<script>
$('ul button').click(function(){
    $(this).toggleClass('active');
    if($(this).parent().parent().attr('signalSelect')=='1')
    {
       $(this).parent().siblings().find("button").toggleClass('active',false);
    }

});
$('#saveBtn').click(function(){
   $('#key  button.active').each(function(){
      alert($(this).text());
   });
});
</script>
</html>

1.这里要说明一下，不知道大家有没有注意，在ul中我增加了一个signalSelect属性，用它来做什么的呢，其实用它是来做单选和多选判断的，如果signalSelect=1，则是单选，否则是多选。

2.平时大家也会操作过类似的页面，在选中和取消选中的时候，button按钮选中状态会改变，不同的状态显示不同的样式，在上面的css中可以看到，给button定义button.active,那怎么判断按钮是active还是不是呢？这个就要用到jquery的toggleClass，$(selector).toggleClass(class,switch)，关于它的具体使用可以参考w3school.使用toggleClass可以改变样式，或者是新增、删除样式。

3.关于文字位置的问题，这个问题是困扰我很久的，回家自己又按照公司做的做了一遍，还是有问题，类别会跑到上面的那行，搞得我很郁闷，之前想着关键字、类别这些个li使用默认的float，而二级的li使用float:left，左浮动，但是这样子是有问题的，因为我设置display:block,一级的li宽度也没设置,导致错位。回来想了又想终于把这个bug解决了。首先是要设置大的div的宽度，不然一级二级的li的float都是left，这样会关键字并排着，设置宽度之和类别的那个li会自动在下面。

4.如何获得选中的按钮

这个问题我开始以为是很麻烦的问题，想着判断按钮是否是.active的状态，这个感觉不知道该怎么获得，不过在写css的时候使用ul button.active来设置选中的按钮，那也可以采用这样的方式直接过得选中的按钮。

ul、li模仿ios的TableView实现城市选择的更多相关文章

  1. js模仿ios select效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  2. js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性

    js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...

  3. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  4. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  5. html ul li的学习

    DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...

  6. ul li 下的元素内容垂直居中

    CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...

  7. DIV UL LI

    <style type="text/css"> .productDetailTabNav{ width:960px;} .productDetailTabNav ul{ ...

  8. 怎样去除ul li a标签文字下的下划线

      这个主要是text-decoration属性,颜色的话就是普通的了 <style> ul li a{ text-decoration:none; } ul li a { color: ...

  9. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

随机推荐

  1. Mongodb Manual阅读笔记：CH3 数据模型(Data Models)

    3数据模型(Data Models) Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作Mongodb Manual阅读笔记:CH3 数据模型(Data Models)Mon ...

  2. 批处理脚本为Mysql重置root密码（重置密码为123456）

    @echo off title mysql ::从注册表找到Mysql的安装路径写入文件mysql.txt reg query HKLM\SYSTEM\ControlSet001\Services\M ...

  3. 【转】MySQL 高可用架构在业务层面的分析研究

    原文地址 http://database.51cto.com/art/201507/483463_all.htm 前言: 相对于传统行业的相对服务时间9x9x6或者9x12x5,因为互联网电子商务以及 ...

  4. Linux 文件常见类型

  5. VC6.0 C++ 如何调用微软windows系统SDK 语音API

    下载3个语音API安装包 http://www.microsoft.com/en-us/download/details.aspx?id=10121 需要安装微软语音API安装包:SpeechSDK5 ...

  6. PhpSms 稳定可靠的php短信发送库

    可能是目前最聪明.优雅的PHP短信发送库了.从此不再为各种原因造成的个别短信发送失败而烦忧! phpsms的任务均衡调度功能由toplan/task-balancer提供. GitHub地址:http ...

  7. 如何在TFS中恢复系统默认查询”已指派给我”的设置（TFS 2013)

    故事是这样开始的,一天开发人员求助说,在浏览器中修改了系统默认的工作项查询"已指派给我"的后,发现这个查询每次都提示超时,并且没有办法恢复到初始的设置状态,因为出现超时提示以后,查 ...

  8. 有评论就是我最大的动力~MySQL基础篇完结（存储引擎和图形化管理工具）

    hi 今天登上来,发现竟然有了3个评论~~加油吧! 这周的计划其实远远没有达到,然后下周还有一大堆事情...那么...周末好好玩吧~ 今天试图完结MySQL的基础篇知识,小白变为大白? 1.MySQL ...

  9. Java Web之JSP技术

    JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术.JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比htm ...

  10. oracle基本用法

    作为企业版的后台数据支撑,就首先要掌握oracle的使用方法!!! 注册用户之前,需要使用system管理员来进行注册功能!!! 1.首先创建新用户 2.这样就能使创建的新用户能够登陆吗?不,还需要分 ...