jquery mobile开发手机webapp页面

最新推荐文章于 2017-11-16 03:28:54 发布

原创

最新推荐文章于 2017-11-16 03:28:54 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jquery mobile #web app

本文介绍了在Discuz论坛环境下，使用jQuery Mobile构建手机WebAPP的过程，重点关注了图片上传、添加配文和博客排序功能。应用结构包括首页、上传页、编辑页和我的页，其中我的页包含草稿箱、关注和收藏。强调了jQuery Mobile的引入顺序和基本元素如"data-role=page"、"data-role=header"和"data-role=footer"的使用，以及如何处理页面跳转问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去年的项目拿来和大家分享一下，总结一下前一段时间的工作。

直入主题，我们要做的是一个discuz下网站的webapp开发。主要功能是实现手机图片的上传，添加配文和博客排序功能。整个应用分为首页，图片上传页，编辑页，我的页。我的页面里面有草稿箱，我的关注和我的收藏等功能。我要主要介绍的是jquery mobile在项目中的应用和上传插件，排序插件的应用。

jquery mobile需要引入

    <link rel="stylesheet" href="./template/default/blog/jqmobile/jquery.mobile-1.4.2.min.css">
    <script type="text/javascript" src="./template/default/blog/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./template/default/blog/js/slide.js"></script>
    <script type="text/javascript" src="./template/default/blog/jqmobile/jquery.mobile-1.4.2.min.js"></script>

这里应该注意，引入jquerymobile的js文件之前一定要引用jquery文件。否则mobile无法运行。mobile编辑时候最外面的div是被定义为data-role=page,所有的代码都在这个标签之内。webapp的顶部用data-role=header来标识,底部用data-role=footer标识，例如：