又一个移动应用HTML5库 – Junior

Junior是一个专为移动应用的HTML5库，Junior长于模拟原生界面，在工程组织上，与Extjs类似。

目前Junior的特性有：

专为移动设备而优化的CSS3效果

通过flickable.js而实现的旋转灯箱效果

与backbone.js结合的视图与路由

使用经典的ratchet UI

如何使用

Junior和大多数标榜HTML5的库一样，高度依赖于JavaScript，在工程的组织上和之前的jQuery Mobile及Sencha Touch大同小异。在引入了必要的JS和CSS之后，HTML骨架创建如下：

之后创建路由：

var AppRouter = Jr.Router.extend({
    routes: {
      '': 'home',
      'about': 'about',
      'details': 'details'
    },

    home: function(){
      var homeView = new HomeView();
      this.renderView(homeView);
    },

    details: function() {
      var detailsView = new DetailsView();
      this.renderView(detailsView);
    }

});

创建视图：

var HomeView = Jr.View.extend({
  render: function(){
    this.$el.html("Hi");
    return this;
  },

  events: {
    'click .some-element': 'onClickSomeElement'
  },

  onClickSomeElement: function() {
    console.log('This event occurs on touchend on mobile or on click otherwise')
  }

});

要引入动画，就必须使用导航。创建导航：

Jr.Navigator.navigate('details',{
  trigger: true,
  animation: {
    type: Jr.Navigator.animations.SLIDE_STACK,
    direction: Jr.Navigator.directions.RIGHT
  }
});

如此，一个最基本的移动应用网页即打造完成。

许可证

Junior使用MIT协议进行授权。