jquery mobile

介绍

jQuery已成功进入手机世界。 它被称为jQuery Mobile，它非常易于使用，您只需要在标题中包含jQuery Mobile文件，并为标记添加一些数据属性就可以了。 所有样式均由jQuery和包含CSS文件处理，因此您仅需几分钟即可创建完整的移动网页。 在此示例中，我们将创建一个简单的页面，该页面使用过渡效果加载内部链接。 第一步将概述jQuery Mobile的一般用法，而其余步骤将窥视演示中使用的特定元素。

标头中的jQuery Mobile文件

这很简单； 您只需要包含框架文件。 您可以从jQuery Mobile网站下载它们，也可以从其自己的网站或CDN加载文件，这将减少带宽成本并保持网站的快速运行。 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

HTML标记属性

将data属性标签应用于HTML，其中n是要设置的功能。 

<div data-role="page" data-theme="b">
        <div data-role="header" data-theme="b">
            <h1>My Site</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
                <li data-role="list-divider">Transition Effects</li>
                <li><a href="effects.php?id=slide" data-transition="slide">Slide</a></li>
                <li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li>
                <li><a href="effects.php?id=slidedown" data-transition="slidedown">Slide Down</a></li>
                <li><a href="effects.php?id=pop" data-transition="pop">Pop</a></li>
                <li><a href="effects.php?id=flip" data-transition="flip">Flip</a></li>
                <li><a href="effects.php?id=fade" data-transition="fade">Fade</a></li>
            </ul>
            <br /><br />
            <ul data-role="listview" data-dividertheme="e">
                <li data-role="list-divider">Seamless List (margin-less)</li>
                <li><a href="#" data-transition="slide">Example Item 1</a></li>
                <li><a href="#" data-transition="slide">Example Item 2</a></li>
                <li><a href="#" data-transition="slide">Example Item 3</a></li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>© Copyright Info or Site URL</h1>
        </div>
    </div>

data-role元素指定应使用哪个DIV /块来支持页眉，页脚和内容，所有这些都在主页包装器中。 这是此示例中使用的数据属性。

  • 数据角色 –指定可设置为页面，页眉，内容和页脚的包装元素的性质。
  • 数据位置 –指定应固定在顶部还是底部渲染的元素。
  • 数据插入 –指定元素应在内容边距之内还是之外。
  • 数据转换 –指定在加载新页面时要使用的转换。 可以将其设置为滑动，向上滑动，向下滑动，弹出，翻转或淡入淡出。
  • 数据主题 –指定要用于元素的设计主题。
  • Data-dividertheme –指定列表分隔符的主题，该主题使用与数据主题相同的选项。

添加内容/在线发布

jQuery Mobie的行为与桌面浏览器相同，尽管它可以帮助消除错误，但您不必提供智能手机。

示例说明

为了方便起见，上面包含的示例分为一个页眉和页脚文件，请随时使用您喜欢的任何编码方法。

结论

jQuery无疑已经开始成为当今设计界的一部分。 因此，即使最小的互联网设备也可以读取jQuery，我也不会感到惊讶。

翻译自: https://www.sitepoint.com/simple-app-creation-jquery-mobile/

jquery mobile