[原创] rails中使用framework7

framework7 rails

2016-07-30 2904

framework7是一个很不错的移动端ui框架。基于此可以实现一些很好的类似原生应用的交互效果。可以不借助客户端路由实现一个spa。

framework7 https://github.com/nolimits4web/Framework7

阿里有一个在此基础上开发的东西 https://github.com/sdc-alibaba/SUI-Mobile


本文内容主要针对framework7的使用做一个简短的入门介绍,以后有机会了会做更详细的分析进行分享。

首先是rails项目的初始化,就不做介绍了


rails fh7-app  #初始化项目
bundle install #安装依赖


在github上下载的代码,js、css、img等文件分别拷贝到vender中相应的文件夹下

简单的测试效果,我只写了两个页面

路由配置文件routes.rb


resources :home
get 'about/(:id)' => 'about#index'
页面中的代码很简单


home_controller.rb


class HomeController < ApplicationController
  def index
  end
end
about_controller.rb文件和上面类似

class AboutController < ApplicationController
  def index
    @name = params[:id] || 'Tom'
  end
end


application.html.erb中的文件比较特殊,主要是framework7的基础框架


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>Fh7App</title>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
  <div class="content-block">
    <p>Left panel content goes here</p>
  </div>
</div>
<!-- Views -->
<div class="views">
  <%= yield %>
</div>

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</body>
</html>


js入口文件的内容如下


//= require_tree .
//= require framework7.min
// Initialize app
var myApp = new Framework7();

// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var mainView = myApp.addView('.view-main', {
    // Because we want to use dynamic navbar, we need to enable it for this view:
    dynamicNavbar: true
});

myApp.onPageInit('index',function(page){
    console.log('index page initialized')
})

/**
 * 页面加载完成后处理页面内容
 */
myApp.onPageInit('about', function (page) {
    // Do something here for "about" page
    console.log(page)
})
两页中的代码都是官网上的源码,直接拷贝过来使用了。两个view的视图文件内容为


home/index.html.erb


<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
  <!-- Top Navbar-->
  <div class="navbar">
    <div class="navbar-inner">
      <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
      <div class="center sliding">Awesome App</div>
      <div class="right">
        <!--
          Right link contains only icon - additional "icon-only" class
          Additional "open-panel" class tells app to open panel when we click on this link
        -->
        <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
      </div>
    </div>
  </div>
  <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
  <div class="pages navbar-through toolbar-through">
    <!-- Page, "data-page" contains page name -->
    <div data-page="index" class="page">
      <!-- Scrollable page content -->
      <div class="page-content">
        <p>Page content goes here</p>
        <!-- Link to another page -->
        <a href="/about">About app</a>
      </div>
    </div>
  </div>
  <!-- Bottom Toolbar-->
  <div class="toolbar">
    <div class="toolbar-inner">
      <!-- Toolbar links -->
      <a href="#" class="link">Link 1</a>
      <a href="#" class="link">Link 2</a>
    </div>
  </div>
</div>


about/index.html.erb


<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <span>Back</span>
      </a>
    </div>
    <div class="center sliding">About</div>
    <div class="right">
      <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
    </div>
  </div>
</div>
<div class="pages">
  <div data-page="about" class="page">
    <div class="page-content">
      <div class="content-block">
        <p id="p">Here is About page![<%= @name %>]</p>
        <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
      </div>
    </div>
  </div>
</div>