Listview with more than one split button?

后端 未结 6 1665
北恋
北恋 2020-12-31 14:56

Based on the JQuery-Mobile example of the Split button list I am trying to generate a listview component in Android with two extra buttons to the right, one next to the othe

6条回答
  •  情歌与酒
    2020-12-31 15:47

    Inspired by Pablo's answer

    
    

    by placing the links in a wrapper div there's no need for a 'dummy' anchor (and can take more than two anchors).

    css styling gives the buttons the same height as the listitem, so the accessibility is the same as the standard split button

    .split-custom-wrapper {
        /* position wrapper on the right of the listitem */
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
    }
    
    .split-custom-button {
        position: relative;
        float: right;   /* allow multiple links stacked on the right */
        height: 100%;
        margin:0;
        min-width:3em;
        /* remove boxshadow and border */
        border:none;
        moz-border-radius: 0;
        webkit-border-radius: 0;
        border-radius: 0;
        moz-box-shadow: none;
        webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .split-custom-button span.ui-btn-inner {
        /* position icons in center of listitem*/
        position: relative;
        margin-top:50%;
        margin-left:50%;
        /* compensation for icon dimensions */
        top:11px; 
        left:-12px;
        height:40%; /* stay within boundaries of list item */
    }
    

提交回复
热议问题