html的jQuery手机结构

如果从jquery mobile基础结构中走出来的做法是不好的做法。在我的例子中，我得到了完全相同的代码。但在另一个我在 -tag之前加了一个div 。这给了我另一个看，因为CSS是不正确的。这不好吗？它打破了我的好看名单。有没有什么好的解决方案呢？html的jQuery手机结构

原因是因为我想对列表中的信息进行一些控制，以显示和隐藏与som jQuery的div。我会解决这个问题，让li -tag成为一个班级，然后隐藏并显示。但是我有点糊涂了abouth也无妨

如果我有这样的代码（采取从jQuery的演示页）：

<li> <a href="#"> <h2> Stephen Weber</h2> <p> <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> <p> Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> </a> <p class="ui-li-aside"> <strong>6:24</strong>PM</p> </li>

它会生成这个网站：

<li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c"> <div class="ui-btn-inner ui-li"> <div class="ui-btn-text"> <p class="ui-li-aside ui-li-desc"> <strong>6:24</strong> PM </p> <a class="ui-link-inherit" href="#"> <h2 class="ui-li-heading"> Stephen Weber</h2> <p class="ui-li-desc"> <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong> </p> <p class="ui-li-desc"> Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> </a> </div> </div> </li>

但是，如果我添加格在我的代码是这样的：

<li> **<div>** <a href="#"> <h2> Stephen Weber</h2> <p> <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> <p> Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> </a> <p class="ui-li-aside"> <strong>6:24</strong>PM</p> </div> </li>

它会生成这个网站：

<li class="ui-li ui-li-static ui-btn-up-c"> <div> <p class="ui-li-aside ui-li-desc"> <strong>6:24</strong> PM </p> <a class="ui-link" href="#"> <h2 class="ui-li-heading"> Stephen Weber</h2> <p class="ui-li-desc"> <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong> </p> <p class="ui-li-desc"> Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> </a> </div> </li>

来源

2013-04-09 thatsIT

是这是一个不好的做法，告诉我你想达到这个是什么？也许我可以帮助你。 jQuery Mobile希望允许你改变它的基本构件结构，但你可以在它们之上工作。 – Gajotres 2013-04-09 12:50:02

正如@Gajotres所说，您可以通过更改JQM CSS类来操纵JQM。 – Omar 2013-04-09 12:56:42

jQuery Mobile已经有了一个用于切换列表视图元素的解决方案。所以不需要用父div来包装li元素。

这里有一个解决方案为您：http://jsfiddle.net/Gajotres/TvwnQ/

$(document).on('pagebeforeshow', '#index', function(){  
    // Hide first listview element 
    $('#mylist li').eq(0).addClass('ui-screen-hidden');  
});

基本上你只需要切换类UI屏幕隐藏的ListView li元素上。

来源

2013-04-09 13:51:10 Gajotres

这也是我想出来的优点。但不知道'屏幕隐藏'级。再往下看，你可以看到我的喜悦。谢谢 – thatsIT 2013-04-09 14:31:43

jQuery Mobile的页面，如下

基本结构：

<html> 
<body> 
    <div data-role="page" name="page1"> 
     <div data-role="header"> 
      <!-- your header text -> 
     </div> 
     <div data-role="content"> 
      <!-- your main data write here ex listitem,form etc -> 
     </div> 
     <div data-role="header"> 
      <!-- your footer text -> 
     </div> 


    </div> 
    <div data-role="page" name="page=2"> 
     <div data-role="header"> 
      <!-- your header text -> 
     </div> 
     <div data-role="content"> 
      <!-- your main data write here ex listitem,form etc -> 
        <!-- here you can define your list and main content [body of page]--> 
     </div> 
     <div data-role="header"> 
      <!-- your footer text -> 
     </div> 
    </div> 
</body> 
</html>

获得更多参考www.jquerymobile.com

来源

2013-04-09 12:52:47

谢谢Butani但我知道基本的structrue。只有好奇JQM要我怎么以不同的方式构建列表视图以使其正确。这就像以新的方式再次学习HTML/CSS。在其他标签中添加标签以生成其他标签。我并不总是看到这样做的逻辑。

Okey Gajotres。这是我想要的。我已经条纹下来了一点：

    <li data-role="fieldcontain" data-theme="@messageTheme" class="clickableMessage" data-icon="false"> 
        <div class="clickableMessage"> 
         <a href=""> 
          <div class="receivers"> 
           <span>text </span> 
          </div> 
          <h2>@message.Header</h2> 
          <p> 
           @message.Text</p> 
         </a> 
        </div> 
        <div class="markeableMessage"> 
         <a href="#"> 
          <label> 
           <div class="receivers"> 
            <span>text </span> 
           </div> 
           <h2>@message.Header</h2> 
           <p> 
            @message.Text</p> 
           <fieldset data-role="controlgroup"> 
            <input id="@("cbx" + message.MessageRef)" class="markedForDelete" name="CheckboxToDelete" type="checkbox" [email protected] /> 
           </fieldset> 
          </label> 
         </a> 
        </div> 
       </li>

的巡航能力和<div class="clickableMessage">的<div class="markeableMessage">的原因是因为我想隐藏和切换他们。显示ClickableMessage并隐藏markeableMessage，切换这两个。

但正如我在第一篇文章中所说，现在我已经在“李”的课上并隐藏了它。所以我会用两个不同的类生成两个“li”，而不是一个“li”，其中有两个不同的div。但无论如何，我有点好奇它应该怎么做。

来源

2013-04-09 13:36:45 thatsIT

看看我的答案。 – Gajotres 2013-04-09 13:51:22

所以弄成这个样子：

module.toggleClickableAndCheckableMessage = function() { 
    var checkableMessage = pageId.find('li.checkableMessage'); 
    var clickableMessage = pageId.find('li.clickableMessage'); 

    if (clickableMessage.eq(0).is(':visible')) { 
     clickableMessage.addClass('ui-screen-hidden'); 
     checkableMessage.removeClass('ui-screen-hidden'); 
    } else { 
     checkableMessage.addClass('ui-screen-hidden'); 
     clickableMessage.removeClass('ui-screen-hidden'); 
    } 
};

来源

2013-04-09 14:32:28 thatsIT

html的jQuery手机结构

回答

相关问题