-1

jQuery モバイルでカスタム リスト ビューを実装しています。私の問題:

  • 右下に位置する2つのボタンが必要です。ただし、常に上に表示されます。
  • 次に、これらのボタンを非表示にする必要があります。ユーザーがヘッダー ボタン (ページ上) をクリックしたときにのみ表示されます。多くのことを試しましたが、役に立ちませんでした。その方法を教えてください。

デモ

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

To position any element in bottom right corner, you need to use the following css.

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

Yes possible to show and hide check this Updated Fiddle.

Added css:

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

Your Script:

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

Updates:

To prevent going to next page

 $(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 に答える