使用jquery mobile进行移动网页开发

最新推荐文章于 2018-04-01 10:38:39 发布

hexudong08

最新推荐文章于 2018-04-01 10:38:39 发布

阅读量2.2k

点赞数 1

分类专栏： jquery flash jwplayer ruby on rails jquery mobile html5 文章标签： mobile jquery stylesheet listview div html5

本文链接：https://blog.csdn.net/hexudong08/article/details/7287679

版权

ruby on rails 同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

flash

4 篇文章 0 订阅

订阅专栏

我所使用的技术是： jquery mobile, jwplayer(因为需要播放视频文件)

需要做的页面分析：
1，一个视频的列表页面
2，单个视频的播放页面

先准备一个固定的模板

<!DOCTYPE html>
<html>
  <head>
    <title>酷拍手机视频聊天</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <%=stylesheet_link_tag "mobile" %>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  </head>

  <body>
    <div data-role="page">

      <div data-role="header">
        <h1>酷拍手机视频聊天</h1>
      </div>

      <div data-role="content">
        <%=yield %>
      </div>

      <div data-role="footer">
        <h4>@酷拍手机视频聊天</h4>
      </div>
    </div>

  </body>
</html>

rails端准备的数据就不说了，记录一下列表的结构

<div class="content-primary">
  <ul class="listview-v" data-role="listview">
    <% @videos.each do |obj| %>
    <li>
    <a href="/video/<%=obj.id %>.mobile" data-ajax="false" rel="external">
      <img src="<%=obj.preview %>" width="90px" height="90px" />
      <h3><%=obj.title_m %></h3>
      <p>拍摄于<%=obj.created_at.strftime("%Y-%m-%d %H:%M") %></p>
    </a>
    </li>
    <% end %>
  </ul>
</div>

android端的播放页面如下

<video  poster="<%=@video.preview %>" id="myVideo">
<source src="<%=@video.url %>" type="video/flv">
</video>
<script>
  jwplayer("myVideo").setup({
    modes: [
      { type: 'html5' },
      { type: 'flash', src: '/jwplayer/player.swf' }
    ],
    controlbar: 'bottom',
  });
</script>

以上代码有一个问题，就是会自动的访问 index 页面，原因有待查明

参考文档：
jwplayer用在html5中
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/22644/using-the-html5-video-tag

jquery mobile的api文档
http://jquerymobile.com/demos/1.0.1/

终端判断的gem, 为移动设备单独准备的format
mobile-fu