使用Phonegap / Cordova进行移动开发的自定义CSS [英] Custom CSS for Mobile development using Phonegap/Cordova

问题描述

我计划使用Cordova v3开发通用应用程序，以使用HTML / CSS定位移动设备。哪个是最好的解决方案，以便重用大多数的html，但具有每个移动平台的视觉风格？

提前感谢。

解决方案

正如你所说，但是每个移动平台都有视觉风格？我知道你正在寻找在应用程序的本土外观。其他答案是好的框架，但除非你想花时间调整css他们不会看起来类似于一个原生的UI（视觉上）。

我已经使用Twitter引导和jQM。到目前为止这么好，但对于一个原生的UI看起来我会去的以下选项，我认为是最好的。
这些是我花了大量时间寻找jQM替代品之后的最佳选择，因为我在特定方面不太满意。

编辑：我根据我的经验以及我到目前为止找到的内容添加了两个新选项（ionic和onsen ui）。

Ionic Framework

http://ionicframework.com/

打算使用Angular JS开发混合应用程序是一个真正的宝石。
我一直在使用它，它真的帮助我开发比使用jQuery更快。

这也是UI元素，你可以使用

优点

• 基于Angular JS的框架


• 由于角度JS力量加快了开发过程




• 如果需要，您可以使用CSS。


• 免费开源
>

• 通过CSS或SASS进行主题化


• 开箱即用的组件可开始构建和应用。

缺点

• 也许阅读离子文档和Angular关系，如果你想享受所有
  
  

  href =http://s.onsen.io/> http://s.onsen.io/

  
  
  

  我尚未使用

  
  
  

  优点

  
  
  
  
  
  • 使用Angular和jQuery很好
  
  
  • 自由并打开SourceFree和开源
  
  
  • 它有一个主题工具，
  
  
  
  
  

  Kendo UI mobile

  
  
  

  http://www.kendoui.c​​om/mobile.aspx

  
  
  

  优点

  
  
  
  
  
  • 它可以帮助您在Android，iOS，Windows Phone，BB等平台上创建原生UI外观。 / li>
    
  • 加入MVC框架
  
  
  • 像jQM主题滚动器这样的主机
  
  
  • 看起来很实用使用它很快）
  
  
  • 基于jQuery，所以你可以利用所有jquery和JS库的力量很容易解决特定的问题。
  
  
  
  
  

  缺点

  
  
  
  
  
  • 不可免费用于商业用途。
  
  
  
  
  

  PhoneJS

  
  
  

  http：/ /phonejs.devexpress.com

  
  
  

  优点

  
  
  
  
  
  • 因此您可以利用所有jquery和JS库的强大功能，轻松解决特定问题。
  
  
  • 可选择支持Knockout.js进行MVVM用户界面开发
  
  
  
  
  

  缺点

  
  
  
  
  
  • 似乎其社区远比kendo
  
  
  
  
  

>

巧克力片UI

http：// chocolatechip-ui.com

优惠

• iOS 7， Android Jelly Bean和Windows Phone 8 UI


• 开放来源和项目看起来很活跃


• jQuery兼容


• ChocolateChip-UI使用自己的JavaScript库，ChocolateChip，用于DOM操作，Ajax请求等。它非常类似于jQuery。 （他们声称比jQuery和Zepto性能更好）

缺点

• 似乎没有广泛的社群。

类固醇

http://www.appgyver.com/steroids

如果你觉得像一个冒险探险家采取类固醇，这是cordova兼容，他们声称你的UI将表现和本机一样好。
这是一个新的，我不想给它一个尝试，但我似乎有希望，但仍然没有广泛使用我没有决定使用它作为有很多人使用它是有帮助的，当你面对问题。

注意：如果其他人对cordova / phonegap的这个或其他UI框架的体验有兴趣，请分享！

I´m planing to use Cordova v3 to develop a generic application to target mobile devices using HTML/CSS. Which is the best solution in order to reuse most of the html but having the visual style for each mobile platform? Which will be the best css/framework to use in this case (preferably free)?

Thanks in advance.

解决方案

As you said "but having the visual style for each mobile platform?" I understand you are searching for a native look in the apps. the other answers are good frameworks however unless you want to spend time tweaking css they will not look similar to a native UI (visually).

I have worked with Twitter bootstrap and jQM. So far so good but for a native UI look I will go for the following options which I think are the best. These are my top choices after spending a considerable time looking for a jQM alternative as I am not really happy with it in specific aspects.

EDIT: I am adding two new options based on my experience and what I have found so far (ionic and onsen ui).

Ionic Framework

http://ionicframework.com/

Intended to develop hybrid app using Angular JS is a really gem. I have been working with it and it has really helped me to develop faster than when using jQuery.

It also was UI elements that you can use out of the box and they are styled properly for iOS and Android although I think its style is more iOS-lish.

Pros

• Angular JS based framework
• Speed up the development process because of angular JS powers
• Very well documented and a lot of examples and tutorials and recipes.
• You could use the CSS without using angular if it is required
• Free and open source
• theming is done via CSS or SASS
• Enough components out of the box to start building and app.

Cons

• Maybe reading the ionic documentation and the Angular ties if you want to enjoy all of its powers, but it worth it.

Onsen UI

http://s.onsen.io/

I have not work yet with it but it looks like a really complete UI option for hybrid apps.

Pros

• Work with Angular and jQuery was well
• Free and Open SourceFree and Open Source
• It has a theming tool which make easier to customize the look in case you are afraid of CSS or SASS.

Kendo UI mobile

http://www.kendoui.com/mobile.aspx

Pros

• It help you create a native look with already native UI looking elements for Android, iOS, Windows Phone, BB.
• Incorporates an MVC framework
• Theming machine like jQM theme roller
• Looks solid (I am looking forward to use it soon)
• jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.

Cons

• It is not free for commercial use.

PhoneJS

http://phonejs.devexpress.com

Pros

• jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
• Optionally support Knockout.js for MVVM user interface development

Cons

• Seems like its community is far less reduced in comparison with kendo, so I am not sure how much people are out there using it and that could help later.
• It is not free for commercial use.

Chocolate chip UI

http://chocolatechip-ui.com

Pros

• iOS 7, Android Jelly Bean and Windows Phone 8 UI looking
• Open Source and the project looks active
• jQuery compatible
• ChocolateChip-UI uses its own JavaScript library, ChocolateChip, for DOM manipulation, Ajax requests, etc. It is very similar to jQuery. (they claim have better performance than jQuery and Zepto)

Cons

• Doesn´t seems that have a wide community out there

Steroids

http://www.appgyver.com/steroids

If you feel like a adventure explorer take a took at steroids, which is cordova compatible and they claim you UI will perform as well as native. It is quite new, I haven´t give it a try but I seems promising, however as still is not widely used I did not decided to use it as having a lot of people using it is helpful when you face problems.

NOTE: If other have interesting alternatives to experiences with this or other UI frameworks for cordova/phonegap please share!

这篇关于使用Phonegap / Cordova进行移动开发的自定义CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！