Jquery-mobile data-role =内容澄清

Question

究竟是什么目的了data-role="content"？我正在测试一些像动画/过渡等的东西,所以,当我从具有内容的容器div中删除它时,一切仍然有效.

例如,如果我这样做:

<div id="secondPage" data-role="page">
    <div data-role="header">
    <h1>This is page 2 </h1>
    </div>

    <div data-role="content">
       <p>This is page 2 with some regular text here.</p>
       <p><a href="#firstPage" data-direction="reverse">Go to first page.</a></p><br/>
    </div> 
</div>

它可以正常工作,但如果我然后删除该data-role="content"部件,并举例如下:

  <div id="secondPage" data-role="page">
        <div data-role="header">
        <h1>This is page 2 </h1>
        </div>

        <div>
           <p>This is page 2 with some regular text here.</p>
           <p><a href="#firstPage" data-direction="reverse">Go to first page.</a></p><br/>
        </div> 
    </div>

它仍然有效,所以我对它的需求有点模糊.那么重点是什么呢？

Answer 1

这data-role="content"只是一个惯例,不是必需的.

引用jQuery网站:

"尽管上面概述的页面结构是使用jQuery Mobile构建的标准Web应用程序的推荐方法,但该框架在文档结构方面非常灵活.页面,页眉,内容和页脚数据角色元素是可选的,并且对于提供一些基本的格式和结构.以前需要自动初始化工作所需的页面包装器对于单页文档是可选的,因此根本没有任何必需的标记.对于具有自定义布局的网页,所有这些结构元素可以省略,Ajax导航和所有小部件都可以像在样板结构中那样工作."

虽然它们不是必需的,但它们被jQuery用于在pagecreate中应用类,例如,div data-role="content"将.ui-content添加类.