发表新帖
发表新帖

Listview with more than one split button?

后端 未结
关注
6 1626
北恋
北恋 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:42 
    <link href="http://demos.jquerymobile.com/1.4.3/css/themes/default/jquery.mobile-1.4.3.min.css" rel="stylesheet"/>
<script src="http://demos.jquerymobile.com/1.4.3/_assets/js/index.js"></script>
<script src="http://demos.jquerymobile.com/1.4.3/js/jquery.mobile-1.4.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<div>
<ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="true">
						<li><a href="#" style="margin-right:5em">
							<img src="../_assets/img/album-bb.jpg">
							<h2>Broken Bells</h2>
							<p>Broken Bells</p></a>
							<a href="#purchase" data-rel="popup" style="right: 2.5em;border-radius:0" data-position-to="window" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" data-transition="pop">Purchase album</a>
							<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
						</li>
						<li><a href="#">
							<img src="../_assets/img/album-hc.jpg">
							<h2>Warning</h2>
							<p>Hot Chip</p></a>
							<a href="#purchase" data-rel="popup" style="right: 2.5em;border-radius:0" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" data-position-to="window" data-transition="pop">Purchase album</a>
							<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
						</li>
						<li><a href="#">
							<img src="../_assets/img/album-p.jpg">
							<h2>Wolfgang Amadeus Phoenix</h2>
							<p>Phoenix</p></a>
							<a href="#purchase" data-rel="popup" data-position-to="window" style="right: 2.5em;border-radius:0" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" data-transition="pop">Purchase album</a>
							<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
						</li>
					</ul>
					<div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
						<h3>Purchase Album?</h3>
						<p>Your download will begin immediately on your mobile device when you purchase.</p>
						<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
						<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>
					</div>

  • Broken Bells

    Broken Bells

    Purchase album Purchase album

  • Warning

    Hot Chip

    Purchase album Purchase album

  • Wolfgang Amadeus Phoenix

    Phoenix

    Purchase album Purchase album 
    •                 <div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
                    <h3>Purchase Album?</h3>
                    <p>Your download will begin immediately on your mobile device when you purchase.</p>
                    <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
                    <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>
                </div>
0 讨论(0)
  • 花落未央
    2020-12-31 15:46

    It works for me

    <ul data-role="listview" >
                    <li>
                        <div class="ui-grid-b">
                            <div class="ui-block-b" style="width: 60%;">
                                <div data-role="fieldcontain">
                                    <h2>Manikandan</h2>
                                    <p>Email : tomanikandan.j@gmail.com</p>
                                    <p>Store Name : Mani Store</p>
                                </div>
                            </div>
                            <div class="ui-block-c" style="width: 40%; padding-top: 20px; float: right;">
                                <div style="float: right;">
                                    <a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">Edit</a>
                                    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Delete</a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
    0 讨论(0)
  • 情歌与酒
    2020-12-31 15:47

    Inspired by Pablo's answer

    <ul data-role="listview">
    <li>
        <a href="#">
            <img class="cover" src="images/cover.jpg"/>
            <h3>title</h3>
            <p>description</p>
        </a>
        <div class="split-custom-wrapper">
            <a href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>
            <a href="#" data-role="button" class="split-custom-button" data-icon="delete" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>           
        </div>
    </li>
</ul>

    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 */
}
    0 讨论(0)
  • 粉色の甜心
    2020-12-31 15:53

    I was able at last to achieve something similar:

    The result! :)

    In case anyone is interested, here is the final code:

    <ul data-role="listview" data-filter="true" data-theme="b" style="margin-bottom: 50px;">
  <li>
    <a href="#" onclick="alert('the item!');">
      <h3>The item</h3>
    </a>
    <a href="#" onclick="alert('1st splitbutton!');" class="split-button-custom" data-role="button" data-icon="gear" data-iconpos="notext">1st link</a>
    <a href="#" onclick="alert('2nd splitbutton!');" class="split-button-custom" data-role="button" data-icon="arrow-r" data-iconpos="notext">2nd link</a>
    <a href="#" style="display: none;">Dummy</a>
  </li>
</ul>

    And the new defined classes:

    .split-button-custom {
    float: right;
    margin-right: 10px;
    margin-top: -32px;
    border-bottom-left-radius: 1em 1em;
    border-bottom-right-radius: 1em 1em;
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;   
}

.split-button-custom span.ui-btn-inner {
    border-bottom-left-radius: 1em 1em;
    border-bottom-right-radius: 1em 1em;
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;
    padding-right: 0px;
}

.split-button-custom span.ui-icon {
    margin-top: 0px;
    right: 0px;
    top: 0px;
    position: relative;
}
    0 讨论(0)
  • 情话喂你
    2020-12-31 15:59

    Here is another option to acomplish the same thing

    http://jsfiddle.net/wZg75/

    <ul data-role='listview'>
    <li >
        <a>i can run
        </a>
        <p>test</p> 
        <p>test</p> 
        <p>test</p> 
        <p>test</p> 
        <div position=relative align=right data-role="controlgroup" data-type="horizontal">
            <a href="index.html" data-role="button">Yes</a>
            <a href="index.html" data-role="button">No</a>
            <a href="index.html" data-role="button">Maybe</a>
        </div>
    </li>
</ul>
    0 讨论(0)
  • 借酒劲吻你
    2020-12-31 16:00

    http://jsfiddle.net/YneYY/

    <ul data-role="listview">
    <li>
        <a href="#">
            <img class="cover" src="images/cover.jpg"/>
            <h3>title</h3>
            <p>description</p>
        </a>
        <div class="split-custom-wrapper">
            <a href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>
            <a href="#" data-role="button" class="split-custom-button" data-icon="delete" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>           
        </div>
    </li>
    <li>
        <a href="#">
            <img class="cover" src="images/cover.jpg"/>
            <h3>title</h3>
            <p>description</p>
        </a>
        <div class="split-custom-wrapper">
            <a href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>
            <a href="#" data-role="button" class="split-custom-button" data-icon="delete" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>           
        </div>
    </li>
</ul>

    JS Fiddle clreated for Arney's example

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题