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

如果是在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. PHP 5.3.0以上推荐使用mysqlnd驱动

    1. 什么是 mysqlnd 驱动 ? PHP 手册上的描述 : MySQL Native Driver is a replacement for the MySQL Client Library ( ...

  2. Redisd VS Memcached

    Redis也常常被当作 Memcached的挑战者被提到桌面上来.关于Redis与Memcached的比较更是比比皆是.然而,Redis真的在功能.性能以及内存使用效率上都超越了Memcached吗? ...

  3. Android中在sdcard上创建文件夹

    //在SD卡上创建一个文件夹    public void createSDCardDir(){     if(Environment.MEDIA_MOUNTED.equals(Environment ...

  4. ixgbe 82599 固定源与目标, UDP, 64字节小包, 1488w pps 单核CPU软中断sirq 100%

    ixgbe 82599 固定源与目标, UDP, 64字节小包, 1488w pps 单核CPU软中断sirq 100% 注: 测试使用, 正常应用不要开启 五元组不同, 开启ntupleethtoo ...

  5. linux线程同步(5)-屏障

    一.概述                                                    barrier(屏障)与互斥量,读写锁,自旋锁不同,它不是用来保护临界区的.相反,它跟条 ...

  6. container error log

    learn from error- Error: org.apache.hadoop.mapreduce.task.reduce.Shuffle$ShuffleError: error in shuf ...

  7. javaScript事件（五）事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

  8. 贤者时间太久了么？--MySQL继续玩

    hi 给自己放了大概三天的假,没有一点点防备,没有一点点准备,无意的 是不是贤者时间过不去了我不知道啊...继续看东西吧 1.MySQL -----运算符和函数----- 字符函数,数值运算符,比较运 ...

  9. Javascript笔记----实现Page页面右下角置顶按钮.

    从用博客开始,发现博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS ...

  10. MMORPG大型游戏设计与开发（part2 of net）

    网络第二部分的将要给大家描述的是网络代码方面的设计,从基础的代码讲起,了解详细的网络模块构架. 没有放出整个源代码,是因为其中还有许多不足的地方,不过想必大家应该也能猜想出这个项目源码的地址了.不过对 ...