要钱的

• Sencha Touch
• Kendo ui

Sencha Touch

Sencha Touch leans more heavily towards “full app framework” than many other popular options. 
Sencha Touch ships with 50 built-in components (and developers can create their own as well).

功能强大、华丽、重量级、掏钱

Sencha Touch

Sencha Touch is an HTML 5 mobile app framework for creating apps for several platforms including iOS, Android and Blackberry. 

It has been in existence for some years now and is popular among hybrid mobile application developers.

Sencha Touch scores highly against it’s competitors by providing a native look and feel across all of the platforms it supports.

Kendo UI

Fast, light, complete: 70+ jQuery-based UI widgets in one powerful toolset.
AngularJS integration, Bootstrap support, mobile controls, offline data solution.

功能强大、组件非常多、华丽、兼容性良好、掏钱

Kendo UI

Supported platforms

Windows XP +, Server 2003 +
Mac OS X +
Android 2.3 +
iOS 6.0 +
BlackBerry 10.0+
Windows Phone 8.0+
Chrome for Android

Fast and light. Every Kendo UI widget is rendered with the fastest possible mark-up to deliver ultimate JavaScript performance. 
Touch support, easy mobile rendering, responsive capabilities and integration with Bootstrap. 

Kendo UI

Kendo UI Mobile is part of a larger Kendo UI framework that can target both desktop and mobile devices.

Kendo UI

ActionSheet
Application
Mobile Button
ButtonGroup
Collapsible
Drawer
Forms
Layout
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView ...

Kendo UI Mobile comes with 14 widgets.

Similar to jQuery Mobile, Kendo UI Mobile makes use of HTML5 “data-*” attributes. For example, a “view” in a Kendo UI Mobile application is a DOM element with an attribute/value of ‘data-role=”view”‘. 

Kendo UI

<div id="example"></div>

<script id="javascriptTemplate" type="text/x-kendo-template">

    <ul>

    # for (var i = 0; i < data.length; i++) { #

        <li>#= data[i] #</li>

    # } #

    </ul>

</script>

 
<script type="text/javascript">

    //Get the external template definition using a jQuery selector

    var template = kendo.template($("#javascriptTemplate").html());


    //Create some dummy data

    var data = ["Todd", "Steve", "Burke"];
 

    var result = template(data); //Execute the template

    $("#example").html(result); //Append the result

</script>

jQuery series

• jQuery Mobile
• jQTouch

jQuery Mobile

Despite its popularity, jQuery Mobile has been criticized for performing poorly in mobile browsers. The jQuery Mobile team continues to work to improve the framework, including performance issues.

组件丰富、成熟、文档齐全、免费、好入门

jQuery Mobile

Heavy use of HTML “data-*” attributes. 
jQuery Mobile provides a light application framework – primarily covering navigation, & transitions between views. 

It’s designed to work within a Responsive Web Design (RWD) context – enabling developers to target a wide range of devices.

jQuery Mobile

A wide array of device and browser support as well as a helpful theme roller to help with quickly customizing the otherwise “clone” look and feel.

jQTouch

jQTouch is a Zepto/jQuery plugin which provides a framework for developing iOS and Android applications. It is both open source and free to use.

jQTouch provides a structure on which to base the HTML, the majority of the application styling, page transition animations and touch based event handling; 

jQTouch

Text

官网打不开

Angular series

• Mobile Angular UI
• Ionic

Mobile Angular UI

Awesome Mobile Components

No jQuery dependencies, no fat bootstrap js. Just a few

angular.js directives super easy to learn to put things together.

Mobile Angular UI retains most of the Bootstrap 3 syntax. 

Mobile Angular UI

提供了：

scroll、toggle、tabs、accordion、overlay、forms等原生组件（官方提供的较少）

Mobile Angular UI

Browser Support

Anything that can run Bootstrap 3 and Angular 1.3 and supports CSS3 transitions and transforms should fit:

Chrome
Firefox
Safari/IOS Safari
Android Browser 2.3+
Chrome for Android
Blackberry Browser
IE Mobile
Opera/Opera Mobile
IE10+
IEMobile 10+

Mobile Angular UI

Mobile Angular UI

<div ui-content-for="title">
  <span>Scroll</span>
</div>

<div class="scrollable" ui-state="searchBar">
  <input
    ng-if="Ui.active('searchBar')"
    type="search"
    class="form-control scrollable-header"
    placeholder="Search.." />

  <div class="scrollable-content" ui-scroll-bottom='bottomReached()'>
    <div class="list-group">
      <a ng-repeat="item in scrollItems" href="#" class="list-group-item">
        {{ item }} <i class="fa fa-chevron-right pull-right"></i>
      </a>
    </div>
  </div>

  <a class="btn btn-block btn-lg btn-primary scrollable-footer" ui-toggle='searchBar'>
    <i class="fa fa-search"></i> 
    <span ui-hide="searchBar">Show</span>
    <span ui-show="searchBar">Hide</span>
    Search Bar
  </a>
</div>

Mobile Angular UI

Mobile Angular UI

It has all the core functionalities of Mobile Angular UI. It aims to act as a common base for a UI framework providing services and directives to create components and implement UI interactions with angular.

Core

Ionic

Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.

Ionic

Speed is important. So important that you only notice when it isn't there. Ionic is built to perform and behave great on the latest mobile devices. With minimal DOM manipulation, zero jQuery, and hardware accelerated transitions, one thing is for sure: You'll be impressed.

Ionic

IONIC is one of the most promising HTML 5 mobile application frameworks. Built using SASS, it provides many UI components to help develop rich and interactive apps. 

Advanced HTML5 mobile development framework and SDK. Build incredible hybrid apps with web technologies you already know and love. Best friends with AngularJS.

Ionic

It uses the JavaScript MVVM framework, AngularJS to power apps. Two-way data binding, interaction with backend services and APIs makes AngularJS a mobile developer’s common choice. With the coming release of AngularJS 2.0, focused on mobile, it’s sure to gain even more popularity.

最具潜力

Ionic

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    <!-- Tab 1 content -->
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>

Ionic

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "templates/facts.html"
        }
      }
    })
    .state('tabs.facts2', {
      url: "/facts2",
      views: {
        'home-tab': {
          templateUrl: "templates/facts2.html"
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "templates/nav-stack.html"
        }
      }
    })
    .state('tabs.contact', {
      url: "/contact",
      views: {
        'contact-tab': {
          templateUrl: "templates/contact.html"
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

})

.controller('HomeTabCtrl', function($scope) {
  console.log('HomeTabCtrl');
});

CSS series

• TopCoat

TopCoat

TopCoat is a free HTML5 Mobile UI framework build by Adobe.  It is unique from the others in this list for several reasons.

TopCoat

First, it relies on CSS libraries over JavaScript to provide everything developers need.  That makes it easy to build using HTML5 elements only and gives the framework an edge in speed. 

TopCoat

Secondly, TopCoat’s look and feel sets it apart from the others.  It is very much a stylish product, and if you are a fan of Adobe’s aesthetics you won’t be disappointed by TopCoat. 

TopCoat

Finally, it is designed primarily for desktop browsers but includes a mobile stylesheet that features larger touch targets for controls.

Others

• Framework 7
• Chocolate Chip UI
• App Framework
• OnsenUI
• Lungo
• Famo.us
• Enyo

Framework 7

Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS native look and feel.

Chocolate Chip UI

Powerful, Simple, Clean

ChocolateChip-UI is built to run on jQuery, the widespread and well-know JavaScript library. However, ChocolateChip-UI can optionally run on ChocolateChipJS. This is a mobile-first JavaScript library written to be small and fast, as much as 30% faster than jQuery.

App Framework

Intel’s App Framework is a reliable and responsive HTML5 Mobile UI Framework that is ideal for creating hybrid mobile apps.  It is optimized for mobile, and so it lacks a lot of the “moving parts” that would allow the framework to adapt to the desktop. 

App Framework

<div class="panel">
  <ul class="list">
    <li><a class="icon home">Home</a></li>
    <li><a class="icon home big">Big Home Icon</a></li>
    <li><a class="icon home mini">Mini Home Icon</a></li>
    <li><a class="icon settings">Settings</a></li>
  </ul>
</div>

App Framework

<div class="panel">
  <div class="formGroupHead">Standard</div>
    <form>
      <input type="text" placeholder="test">
      <input type="search" placeholder="search">
      <textarea rows="6" placeholder="Enter your address"></textarea>
    </form>
  </div>

App Framework

OnsenUI

 Onsen UI is a free and open source hybrid app framework released under the Apache License. It provides native-like UI components using HTML5, JavaScript and CSS. It’s built using Angular directives to provide custom tags. The framework includes useful components like sliding menu, list view, dialogs, etc. that are all optimized for mobile development.

OnsenUI

<script>
  ons.ready(function() {
    ons.createAlertDialog('alert.html').then(function(alertDialog) {
      alertDialog.show();
    });
  });
</script>

<script type="text/ons-template" id="alert.html">
  <ons-alert-dialog animation="default" cancelable>
    <div class="alert-dialog-title">Warning!</div>
    <div class="alert-dialog-content">
      An error has occurred!
    </div>
    <div class="alert-dialog-footer">
      <button class="alert-dialog-button">OK</button>
    </div>
  </ons-alert-dialog>
</script>

Lungo

Lungo is a framework for developing cross-platform applications in HTML5. Lungo applications are run in the browser, similar to other HTML-based frameworks such as jQuery Mobile. Lungo provides 2 main workflows:

Lungo

Famo.us

Famo.us is a free and open source JavaScript platform for building mobile apps and desktop experiences. What makes Famo.us unique is its JavaScript rendering engine and 3D physics engine that gives developers the power and tools to build native quality apps and animations using pure JavaScript. 

Famo.us

Enyo

Enyo is built around the philosophy of fully-encapsulated components, which allow a developer to reuse component pieces (or even an entire application) in new or existing projects. It is possible to embed full Enyo applications in the DOM elements of existing Web pages.

比较

比较

如何选择