如何使列表看起来像iphone菜单

我需要一个列表的样子iphone菜单，看到这张照片如何使列表看起来像iphone菜单

我的列表实际上是这个

enter image description here 我无法获得相同的外观

我的js代码

var store = new Ext.data.JsonStore({ 
     model : 'Contact',  
     getGroupString : function(record) { 
      return record.get('menu')[0]; 
     }, 

     data: [ 
      {menu: '<img src="images/summary2.png" height="42" width="42" /> Shipment Summary ',item:'1'}, 
       {menu: '<img src="images/detail2.png" height="42" width="42" /> Shipment Details ',item:'2'}, 
      {menu: '<img src="images/documents2.png" height="42" width="42" /> Shipment Documents ',item:'3'} 
     ] 
    }); 

    SL.views.mainMenuBottomBar = new Ext.List 
    ({ 
      id: 'MBB', 
      fullscreen: false, 
      centered: true, 
      cls: 'settingscls', 
      disableSelection: true, 
      scroll: false, 
      dock: 'bottom', 
      itemTpl : '<tpl for="."><div class="x-list-group-items">{menu}</div></tpl>', 
      grouped : false, 
      indexBar: false, 
      onItemDisclosure: 
        function(record) 
        { 
         if(record.get('item')=='1')    { 
         } 
         ... 
        }, 
     store: store 
    });

我的CSS代码

.settingscls 
{ 
    background:transparent; 
} 
.settingscls .x-list-disclosure 
{ 
     margin-top:0.6em; 
     right:1em !important; 
     -webkit-mask:none; 
     -webkit-mask-box-image: url('images/list-arrow.png'); 
} 
.settingscls .x-list-item 
{ 
    background:white; 
    left:10px; 
    right:10px; 
    bottom:10px; 
    -webkit-border-top-left-radius: 0.4em ; 
     -webkit-border-top-right-radius: 0.4em; 
    -webkit-border-bottom-left-radius: 0.4em; 
     -webkit-border-bottom-right-radius: 0.4em; 
}

- 在CSS我不能申请边框第一和最后一个项目列表

-The文本显示在垂直对齐底部

-the字体不一样，以iphone菜单

-the右页边距或填充工作

请帮我

先谢谢您！

来源

2012-04-30 cmujica

检查出了类似的问题问上煎茶触摸论坛： -

How to create something like iPhone settings menu?

输出： -

enter image description here

来源

2012-04-30 04:29:25

感谢您的回复，但我无法将边框应用于我的代码中的第一个和最后一个项目列表。 – cmujica

是的，你可以。使用jQuery并有一个合适的选择器。 http://www.mkyong.com/jquery/jquery-first-child-last-child-selector-example/ –

请务必容器具有填充到左侧和右边，并且ul显示为块元素，如下所示：http://jsfiddle.net/P9pSG/4/

来源

2012-04-30 04:35:23

谢谢您的回复，但我无法将边框应用到第一个和最后一个项目列表 – cmujica

哦，对。在这里你去：http://jsfiddle.net/P9pSG/6/ –

如何使列表看起来像iphone菜单

回答

相关问题