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

如果是在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. log4j 实现只输入我们指定包的日志

    #all logger output level is 'ERROR' and output position is stdout #so only write our project's DEBUG ...

  2. MongoDB与衍生版的TokuMX对比

    为什么会出现TokuMX呢? 查阅大量的资料和翻阅一些大牛的博客发现,MongoDB作为nosql派别的一个典型非关系型数据库其实存在许多缺陷不足之处. 然后肯定就会有有人跳出来,来做一个衍生的东西, ...

  3. Tomcat源码分析之—组件启动实现分析

    Tomcat由多个组件组成,那么Tomcat是怎么对他们的生命周期进行管理的么,这里将从Tomcat源码去分析其生命周期的实现: Bootstrape类为Tomcat的入口,所有的组件够通过实现Lif ...

  4. shell流程控制&函数

    条件 if-then-elif-then-fi if的条件部分经常使用test EXPRESSION或[ EXPRESSION ]实现,test的用法可以参见test if 条件1 #if 条件1;t ...

  5. linux enc28j60网卡驱动移植（硬件spi和模拟spi）

    本来想移植DM9000网卡的驱动,无奈硬件出了点问题,通过杜邦线链接开发板和DM9000网卡模块,系统上电,还没加载网卡驱动就直接崩溃了,找不到原因...刚好手上有一个enc28j60的网卡模块,于是 ...

  6. Centos 内存占满 释放内存

    free -m 查看内存使用情况 top,然后按下shift+m,按内存占用百分比排序 centos 为了提高效率,把部分使用过的文件缓存到了内存里.如果不需要这样的文件性能,那就可以释放. 如下两个 ...

  7. Google Cloud Platform

    一个离我们很遥远,很遥远的公司.作为全球三大公有云厂商之一,在国内根本听不到他的声音.其实吧,听到了也没用,因为在国内没法用!AWS还在纠结的落地过程中挣扎,GCP基本上就当不存在吧. 抛开这些乌烟瘴 ...

  8. Shell命令行操作

    1.1 shell提示符 [me@linuxbox ~]$ 如果最后一个字符是"#",表示当前终端会话有超级用户权限.使用root用户登录或者使用能提供超级用户权限的终端能获得该权 ...

  9. Caffe源码解析1：Blob

    转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ 首先看到的是Blob这个类,Blob是作为Caffe中数据流通的 ...

  10. ANE接入平台心得记录（安卓）

    开发环境:FlashBuilder4.7 AIR13.0 Eclipse 由于我懒得陪安卓的开发环境所以我下载了包含安卓SDK Manager的Eclipse,其实直接用FlashBuilder开发A ...