-1

我正在 jQuery mobile 中实现自定义列表视图。我的问题：

  • 我需要两个按钮，它们的位置在右下角。但它总是显示在顶部。
  • 其次，我需要这些按钮是不可见的。它们仅在用户单击标题按钮（在页面上）时可见。我尝试了很多东西，但没有帮助。你能帮我怎么做吗？

演示

http://jsfiddle.net/ravi1989/d47ry/2/

HTML

<div data-role="page" id="DocumentScreen">
    <div data-position="fixed" data-role="header" data-tap-toggle="false"
    data-theme="b">
        <a data-inline="true" data-role="button" data-theme="b" href="#Home"
        style=
        "text-align:left;margin-left: 20px; margin-bottom: 10px;">Back</a>

        <h1 class="ui-title" id="hdr" style=
        "text-align:left;margin-left: 100px;">My Documents</h1>

        <div class="ui-btn-right" data-role="controlgroup" data-type=
        "horizontal">
            <div>
                <a data-role="button">AddORDelete</a>
            </div>
        </div>
    </div>

    <div data-role="content">
        <ul data-inset="true" data-role="listview" id="folderInside_Data"></ul>
    </div>
</div>

JS

  for (i = 0; i < 40; i++) {
      $('#folderInside_Data').append('<li  data-icon="edit" data-icon="delete" class="rowID"  id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<button class="ui-btn-right" >Edit</button>' + '<button class="ui-btn-right" >Delete</button>' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>');
      $('#folderInside_Data').listview('refresh');
  }
  $(document).on('click', '.rowID', function() {
      // $.mobile.changePage($("#realTimeScreen"));
      $.mobile.changePage($("#realTimeScreen"), {
          transition: "slide",
          reverse: false,
          changeHash: false
      });
      console.log(this.id)
  });
4

2 回答 2

2

要将任何元素定位在右下角，您需要使用以下 css。

position: absolute;
bottom:0;
right:0;

是的，可以显示和隐藏检查这个更新的小提琴。

添加了CSS：

.positionCorner {
    position: absolute;
    bottom:0;
    right:0;
    display: none;
}

你的脚本：

$('.ui-btn-text').click(function () {
                   $('.positionCorner').show();
                   // $.mobile.changePage($("#realTimeScreen"));
                   $.mobile.changePage($("#realTimeScreen"), {
                       transition: "slide",
                       reverse: false,
                       changeHash: false
                   });
                   console.log(this.id)
               });

更新：

防止进入下一页

 $(document).on('click', '.rowID', function (event) {
                   // $.mobile.changePage($("#realTimeScreen")); 
                   if(!($("fieldset").is(":visible"))){
                   $.mobile.changePage($("#realTimeScreen"), {
                       transition: "slide",
                       reverse: false,
                       changeHash: false
                   });
                   console.log(this.id)  
                   }
               })
于 2013-06-29T05:03:29.393 回答
0

您必须将这些按钮包装在 a 中controlgroup，将控件组包装在 a 中span。

<span class="ctrl">
   <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
      <button>Edit</button>
      <button>Delete</button>
   </fieldset>
</span>

然后，添加text-align:right到.ctrl

.ctrl
{
text-align:right
}

就是这样 ：）

演示：http: //jsfiddle.net/hungerpain/d47ry/4/

要在单击按钮时切换可见性，您可以使用toggleClass

演示：http: //jsfiddle.net/d47ry/12/

于 2013-06-29T04:46:31.823 回答