是否有一个现代/轻量级的javascript布局库用于backbone.js等?

时间:2011-05-27 01:22:15

标签: javascript jquery layout backbone.js

我在中断之后回到网络用户界面并希望使用backbone.js创建一个现代的单页面javascript应用程序(如果它曾经是desublimates,则创建一个batman.js),node.js,通过now.js等进行通信 - 但我的问题是我该如何解决这个问题? CSS对于这种情况不是最佳的加上我相信css固定定位在iPad上不起作用(并且css布局破坏了我的灵魂)。理想情况下,该库可用于桌面和移动布局,但这并不是严格要求,因为似乎有可以处理移动布局的库。

我只关心支持现代浏览器(webkit和FF),并希望使用css3动画和渲染所有内容,而不是遗留动画和圆角技巧。如果使用旧浏览器或禁用js的人无法查看该网站,我也不在乎。

似乎很多人都在使用JQuery(JQuery UI插件?)或类似的“传统”库,但随着现代js库的爆炸,我很惊讶没有一些独立的东西可以与Backbone.js的。我看到了jLayout(http://www.bramstein.com/projects/jlayout/),但它缺少我需要的功能(边框布局中的可拖动/可折叠窗格等)。

那么我应该使用传统的框架,如JQuery + UI插件或Mootools MochaUI? ExtJS由于许可而退出,UKI看起来很有希望,但似乎疯狂地记录不足。有没有人对这些有很好的经验还是有其他选择?或者我应该重新考虑CSS布局的痛苦可能性吗?

更新

谢谢你们。除非我遗漏了什么,否则所有的模板化解决方案都只是 - 模板解决方案,而不是可以做我想要的布局框架(具有固定区域的边框布局等)。那么共识似乎是我应该坚持使用CSS,可能使用像Compass + Sass这样的东西吗?我的理解和经验是,很难做到跨浏览器工作的固定区域边界布局,并且在移动设备上不会失败,但我可能会离开。我也不确定我在这里理解模板的作用,它是自动渲染区域和模型吗?

5 个答案:

答案 0 :(得分:4)

您的问题听起来不像是在寻找一个javascript框架,更像是在寻找有助于页面布局的东西。我大量使用Backbone,刚开始涉足蝙蝠侠。我认为没有理由不使用这些库/框架。我更喜欢使用lightweight tools并避免单片框架。

在我看来,如果要构建单页面web应用程序,必须具备扎实的CSS知识。我完全同意你应该咬紧牙关并学习它。使用Less,Stylus或SASS来简化CSS是完全可以接受的,但您仍然应该理解这些工具生成的基础CSS。我个人现在使用Stylus。

如果您想要随时启动项目并学习CSS,那么您可能需要查看一些项目。这些将帮助您快速启动和运行,并减少从头开始创建所需的CSS数量。

HTML5Boilerplate

这是HTML的一个很好的起点,包括一个可靠的CSS重置。我个人不会使用整个重置并将其自定义为我需要的。此时没有理由不使用HTML5。即使您不使用HTML5Boilerplate,仍然需要使用Modernizr和YepNope进行特征检测和polyfill资源加载。

Twitter Bootstrap

该项目包括各种CSS样板,以获得一致且有吸引力的许多常见布局功能。请注意,这将使您的应用程序具有“叽叽喳喳”的感觉,但当然您可以调整它看起来不同。它使用LESS来更轻松地管理CSS。我可能会在某些时候将它转换为手写笔。

Semantic.gs

语义网格系统提供了一个网格系统,但没有使用.grid_x类填充标记。我还没用过它,但我打算很快就玩它。您可能会发现它有助于创建布局。它也使用LESS。再次,我可能会分叉并转换为手写笔。

jQuery UI Layout

这是一个功能强大的布局插件,我在我的应用程序中使用,虽然它很重,我最近一直在考虑删除它并使用自定义CSS / javascript。我创建了a tabbed interface layout and custom theme并将其贡献给了UI Layout项目的Kevin。也许你会发现它很有用。这是基于jquery的other layout solutions列表。

Template Precompiler

有大量的模板资源,包括下划线模板,jquery模板,小胡子,玉石,coffeekup等等。我目前正在使用Jade并使用node.js创建tmpl-precompile项目来编译,组合和压缩/ uglify jade模板到可以提供给客户端的可执行javascript函数。 uglified预编译模板并不比原始HTML模板大得多,并且不需要在客户端上编译它们。将这些模板与Backbone一起使用就像在render方法中调用函数一样简单。

答案 1 :(得分:2)

也许microjs可能对您有用。您可以查看templating库和css animation库,甚至可能查看single page app个库。

答案 2 :(得分:2)

我不会使用它们,但是有一些工具包可以进行布局抽象。

正如评论者所说,如果我是你,我会咬紧牙关。 backbone.js非常接近金属,对现代css / html组合的深刻理解是非常强制性的。

我会使用模板和类似语言的语言来使css更加可口。

模板:

CSS元语言:

约什

答案 3 :(得分:2)

最好的js布局插件:

http://masonry.desandro.com

答案 4 :(得分:0)

非常有趣且超轻量级的是Tempo JS。非常好的json渲染引擎,你会找到有关tempo + backbone的文章。