javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > 网站技术 > DivCss教程

ul、li模仿ios的TableView实现城市选择

来源:IT技术网编辑:雨天发布于:2017-04-09人围观

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

如果是在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来设置选中的按钮,那也可以采用这样的方式直接过得选中的按钮。

 


与相关的文章
有时间的话来看看IT界的突发事件