Skip to content

T
todomvc
Commit 6762ec68 authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Site: Rewrite popover and cleanups

parent b129e3b7
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 136 deletions
index.html
View file @ 6762ec68
......@@ -17,7 +17,7 @@
<div class="container">
<header class="row">
<div class="span8">
<img class="logo" src="site/img/logo.svg" width="500" height="86">
<img class="logo" src="site/img/logo.svg" width="500" height="86" alt="TodoMVC">
<p>Helping you <strong>select</strong> a MV* framework</p>
<nav>
<a href="#" class="zocial red">Download (1.0)</a>
......@@ -39,91 +39,72 @@
<h2>Our Stable Apps</h2>
<div class="row">
<div class="span2">
<a href="architecture-examples/angularjs/index.html" data-source="http://angularjs.org/" data-content="What HTML would have been
had it been designed for web apps">
AngularJS
<span class="label">R</span>
</a>
<a class="routing" href="architecture-examples/angularjs/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps">AngularJS</a>
<span class="label">R</span>
</div>
<div class="span2">
<a href="architecture-examples/backbone/index.html" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">
Backbone.js
<span class="label">R</span>
</a>
<a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
<span class="label">R</span>
</div>
<div class="span2">
<a href="architecture-examples/emberjs/index.html" data-source="http://emberjs.com/" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.">
Ember.js
<span class="label">R</span>
</a>
<a href="architecture-examples/emberjs/" data-source="http://emberjs.com" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.">Ember.js</a>
<span class="label">R</span>
</div>
<div class="span2">
<a href="architecture-examples/spine/index.html" data-source="http://spinejs.com/" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">
Spine.js
<span class="label">R</span>
</a>
<a href="architecture-examples/spine/" data-source="http://spinejs.com" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine.js</a>
<span class="label">R</span>
</div>
</div>
<div class="row">
<div class="span2">
<a href="architecture-examples/knockoutjs/index.html" data-source="http://knockoutjs.com/" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">KnockoutJS</a>
<a href="architecture-examples/knockoutjs/" data-source="http://knockoutjs.com" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">KnockoutJS</a>
</div>
<div class="span2">
<a href="architecture-examples/dojo/index.html" data-source="http://dojotoolkit.org/" data-content="Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.">
Dojo
<span class="label">R</span>
</a>
<a href="architecture-examples/dojo/" data-source="http://dojotoolkit.org" data-content="Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.">Dojo</a>
<span class="label">R</span>
</div>
<div class="span2">
<a href="architecture-examples/yuilibrary/index.html" data-source="http://yuilibrary.com/" data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUILibrary</a>
<a href="architecture-examples/yuilibrary/" data-source="http://yuilibrary.com" data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUILibrary</a>
</div>
<div class="span2">
<a href="architecture-examples/gwt/index.html" data-source="https://developers.google.com/web-toolkit/" data-content="Google Web Toolkit (GWT) is an MVP development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords.">GWT</a>
<a href="architecture-examples/gwt/" data-source="https://developers.google.com/web-toolkit/" data-content="Google Web Toolkit (GWT) is an MVP development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords.">GWT</a>
</div>
</div>
<div class="row">
<div class="span2">
<a href="architecture-examples/closure/index.html" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">
Closure
<span class="label">R</span>
</a>
<a href="architecture-examples/closure/" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">Closure</a>
<span class="label">R</span>
</div>
<div class="span2">
<a href="labs/architecture-examples/extjs/" data-source="http://www.sencha.com/products/extjs" data-content="Ext JS 4 is the next major advancement in our JavaScript framework. Featuring expanded functionality, plugin-free charting, and a new MVC architecture it's the best Ext JS yet. Create incredible web apps for every browser.">Ext.js</a>
</div>
<div class="span2">
<a href="architecture-examples/agilityjs/index.html" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">
Agility.js
<span class="label">R</span>
</a>
<a href="architecture-examples/agilityjs/" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">Agility.js</a>
<span class="label">R</span>
</div>
<div class="span2">
<a href="architecture-examples/knockback/index.html" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">
Knockback.js
<span class="label">R</span>
</a>
<a href="architecture-examples/knockback/" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
<span class="label">R</span>
</div>
</div>
<hr>
<h2>Apps using RequireJS/AMD</h2>
<div class="row">
<div class="span3">
<a href="dependency-examples/backbone_require/index.html" data-source="http://requirejs.org/" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a>
<div class="span4">
<a href="dependency-examples/backbone_require/" data-source="http://requirejs.org" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a>
</div>
<div class="span3">
<a href="dependency-examples/emberjs_require/index.html" data-source="http://emberjs.com" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. This is an example of using it with AMD modules">
Ember.js + RequireJS
<span class="label">R</span>
</a>
<div class="span4">
<a href="dependency-examples/emberjs_require/" data-source="http://emberjs.com" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. This is an example of using it with AMD modules">Ember.js + RequireJS</a>
<span class="label">R</span>
</div>
</div>
<h2>Compare these to a non-framework implementation</h2>
<div class="row">
<div class="span3">
<a href="vanilla-examples/vanillajs/index.html" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">Vanilla JS</a>
<div class="span4">
<a href="vanilla-examples/vanillajs/" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">Vanilla JS</a>
</div>
<div class="span3">
<a href="architecture-examples/jquery/index.html" data-source="http://jquery.com/" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a>
<div class="span4">
<a href="architecture-examples/jquery/" data-source="http://jquery.com" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a>
</div>
</div>
<p>* <span class="label">R</span> = App also demonstrates routing</p>
......@@ -136,7 +117,7 @@
<hr>
<div class="row">
<div class="span6">
<img class="screenshot" src="site/img/screenshot.png" width="558" height="246">
<img class="screenshot" src="site/img/screenshot.png" width="558" height="246" alt="Todo app screenshot">
<p class="tagline2">TodoMVC is a common learning application for popular JavaScript MV* frameworks</p>
</div>
<div class="span6">
......@@ -184,115 +165,113 @@
</div>
<hr>
<div class="row">
<div class="span12 applist labs">
<div class="span12">
<h2>Labs</h2>
<ul class="nav nav-pills">
<ul class="applist labs">
<li>
<a href="labs/architecture-examples/cujo/index.html" data-source="http://cujojs.github.com" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">cujo.js *</a>
<a href="labs/architecture-examples/cujo/" data-source="http://cujojs.github.com" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">cujo.js *</a>
</li>
<li>
<a href="labs/architecture-examples/maria/src/index.html" data-source="https://github.com/petermichaux/maria" data-content="An MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC. The three core design patterns of MVC (observer, composite, and strategy) are embedded in Maria's Model, View, and Controller objects. Other patterns traditionally included in MVC implementations (e.g. factory method and template) make appearances too.">Maria</a>
<a href="labs/architecture-examples/maria/src/" data-source="https://github.com/petermichaux/maria" data-content="An MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC. The three core design patterns of MVC (observer, composite, and strategy) are embedded in Maria's Model, View, and Controller objects. Other patterns traditionally included in MVC implementations (e.g. factory method and template) make appearances too.">Maria</a>
</li>
<li>
<a href="http://todomvc.meteor.com" data-source="http://meteor.com" data-content="Meteor is an ultra-simple environment for building modern websites.A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor *</a>
</li>
<li>
<a href="labs/architecture-examples/stapes/index.html" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a>
<a href="labs/architecture-examples/stapes/" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a>
available.">Stapes *</a>
</li>
<li>
<a href="labs/architecture-examples/troopjs/index.html" data-source="https://github.com/troopjs/" data-content="TroopJS attempts to package popular front-end technologies and bind them with minimal effort for the developer. It includes jQuery for DOM manipulation, ComposeJS for object composition, RequireJS for modularity and Has.js for feature detection. On top, it includes Pub/Sub support, templating, weaving (widgets to DOM) and auto-wiring.">TroopJS *</a>
<a href="labs/architecture-examples/troopjs/" data-source="https://github.com/troopjs/" data-content="TroopJS attempts to package popular front-end technologies and bind them with minimal effort for the developer. It includes jQuery for DOM manipulation, ComposeJS for object composition, RequireJS for modularity and Has.js for feature detection. On top, it includes Pub/Sub support, templating, weaving (widgets to DOM) and auto-wiring.">TroopJS *</a>
</li>
<li>
<a href="labs/architecture-examples/fun/index.html" data-source="https://github.com/marcuswestin/fun" data-content="Fun is not an MVC framework, but a programming language meant to tackle MVC/UI programming on a deeper, more fundamental level - part reactive/functional and part sequential/procedural.">Fun *</a>
<a href="labs/architecture-examples/fun/" data-source="https://github.com/marcuswestin/fun" data-content="Fun is not an MVC framework, but a programming language meant to tackle MVC/UI programming on a deeper, more fundamental level - part reactive/functional and part sequential/procedural.">Fun *</a>
</li>
<li>
<a href="labs/architecture-examples/duel/www/index.html" data-source="https://bitbucket.org/mckamey/duel/wiki/Home" data-content="DUEL is a dual-side templating engine using HTML for layout and 100% pure JavaScript as the binding language. The same views may be executed both directly in the browser (client-side template) and on the server (server-side template).">DUEL *</a>
<a href="labs/architecture-examples/duel/www/" data-source="https://bitbucket.org/mckamey/duel/wiki/Home" data-content="DUEL is a dual-side templating engine using HTML for layout and 100% pure JavaScript as the binding language. The same views may be executed both directly in the browser (client-side template) and on the server (server-side template).">DUEL *</a>
</li>
<li>
<a href="labs/architecture-examples/fidel/index.html" data-source="https://github.com/jgallen23/fidel" data-content="Fidel is a micro-framework for building widgets, modules and plugins. It resembles the controller in Spine.js and could be considered a controller library. Having not heavily needed models and routing in some of the single-page applications the author built, he found a library focusing on controller logic more useful.">Fidel</a>
<a href="labs/architecture-examples/fidel/" data-source="https://github.com/jgallen23/fidel" data-content="Fidel is a micro-framework for building widgets, modules and plugins. It resembles the controller in Spine.js and could be considered a controller library. Having not heavily needed models and routing in some of the single-page applications the author built, he found a library focusing on controller logic more useful.">Fidel</a>
</li>
<li>
<a href="labs/architecture-examples/broke/index.html" data-source="https://github.com/brokenseal/broke-client" data-content="The Broke Javascript Framework is a porting of the fantastic Django Web Framework on Javascript. It summarizes all the best concepts present in Django like url resolving, decoupling, DRY principle, project-specific settings and a pretty simple template engine. It could be put in the big Javascript MVC frameworks group outside there, but, as Django is, this is more a MTV (Model-Template-View) framework.">Broke.js</a>
<a href="labs/architecture-examples/broke/" data-source="https://github.com/brokenseal/broke-client" data-content="The Broke Javascript Framework is a porting of the fantastic Django Web Framework on Javascript. It summarizes all the best concepts present in Django like url resolving, decoupling, DRY principle, project-specific settings and a pretty simple template engine. It could be put in the big Javascript MVC frameworks group outside there, but, as Django is, this is more a MTV (Model-Template-View) framework.">Broke.js</a>
</li>
<li>
<a href="labs/architecture-examples/o_O/index.html" data-source="http://weepy.github.com/o_O/" data-content="o_O: HTML binding for teh lulz: &lt;br>
- Elegantly binds objects to HTML&lt;br>- Proxies through jQuery, Ender, etc&lt;br>- Automatic dependency resolution&lt;br>- Plays well with others">Funnyface.js *</a>
<a href="labs/architecture-examples/o_O/" data-source="http://weepy.github.com/o_O/" data-content="o_O: HTML binding for teh lulz: &lt;br> - Elegantly binds objects to HTML&lt;br>- Proxies through jQuery, Ender, etc&lt;br>- Automatic dependency resolution&lt;br>- Plays well with others">Funnyface.js *</a>
</li>
<li>
<a href="labs/architecture-examples/javascriptmvc/todo/todo/index.html" data-source="http://javascriptmvc.com/" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">JavaScriptMVC</a>
<a href="labs/architecture-examples/javascriptmvc/todo/todo/" data-source="http://javascriptmvc.com" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">JavaScriptMVC</a>
</li>
<li>
<a href="labs/architecture-examples/batman/index.html" data-source="http://batmanjs.org/" data-content="Batman.js is a framework for building rich web applications with CoffeeScript or JavaScript. App code is concise and declarative, thanks to a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority.">Batman.js *</a>
<a href="labs/architecture-examples/batman/" data-source="http://batmanjs.org" data-content="Batman.js is a framework for building rich web applications with CoffeeScript or JavaScript. App code is concise and declarative, thanks to a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority.">Batman.js *</a>
</li>
<li>
<a href="labs/architecture-examples/socketstream/index.html" data-source="http://www.socketstream.org" data-content="SocketStream is a fast, modular Node.js web framework dedicated to building realtime single-page apps">SocketStream + jQuery</a>
<a href="labs/architecture-examples/socketstream/" data-source="http://www.socketstream.org" data-content="SocketStream is a fast, modular Node.js web framework dedicated to building realtime single-page apps">SocketStream + jQuery</a>
</li>
<li>
<a href="labs/architecture-examples/olives/index.html" data-source="https://github.com/flams/olives" data-content="Olives is a JS MVC framework that helps you create realtime UIs. It includes a set of AMD/CommonJS modules that are easily extensive, a high level of abstraction to reduce boilerplate and is based on socket.io, to provide a powerful means to communicate with node.js.">Olives *</a>
<a href="labs/architecture-examples/olives/" data-source="https://github.com/flams/olives" data-content="Olives is a JS MVC framework that helps you create realtime UIs. It includes a set of AMD/CommonJS modules that are easily extensive, a high level of abstraction to reduce boilerplate and is based on socket.io, to provide a powerful means to communicate with node.js.">Olives *</a>
</li>
<li>
<a href="labs/architecture-examples/somajs/index.html" data-source="http://somajs.github.com/somajs" data-content="soma.js is a JavaScript Model-View-Controller (MVC) framework that is meant to help developers to write loosely-coupled applications to increase scalability and maintainability.">soma.js *</a>
<a href="labs/architecture-examples/somajs/" data-source="http://somajs.github.com/somajs" data-content="soma.js is a JavaScript Model-View-Controller (MVC) framework that is meant to help developers to write loosely-coupled applications to increase scalability and maintainability.">soma.js *</a>
</li>
<li>
<a href="labs/architecture-examples/rappidjs/index.html" data-source="http://www.rappidjs.com" data-content="rAppid.js is a declarative JavaScript framework for rapid web application development. It supports dependency loading, Model-View binding, View-Model binding, dependency injection and i18n.">rAppid.js</a>
<a href="labs/architecture-examples/rappidjs/" data-source="http://www.rappidjs.com" data-content="rAppid.js is a declarative JavaScript framework for rapid web application development. It supports dependency loading, Model-View binding, View-Model binding, dependency injection and i18n.">rAppid.js</a>
</li>
<li>
<a href="labs/architecture-examples/dijon/index.html" data-source="https://github.com/creynders/dijon-framework" data-content="Dijon is an IOC and DI micro-framework for Javascript. Originally it was meant to be a port of Robotlegs, but deviated to something quite different. It remains however heavily inspired by Robotlegs, and more specifically Swiftsuspenders.">Dijon *</a>
<a href="labs/architecture-examples/dijon/" data-source="https://github.com/creynders/dijon-framework" data-content="Dijon is an IOC and DI micro-framework for Javascript. Originally it was meant to be a port of Robotlegs, but deviated to something quite different. It remains however heavily inspired by Robotlegs, and more specifically Swiftsuspenders.">Dijon *</a>
</li>
<li>
<a href="labs/architecture-examples/sammyjs/index.html" data-source="http://sammyjs.org/" data-content="Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.">Sammy.js</a>
<a href="labs/architecture-examples/sammyjs/" data-source="http://sammyjs.org" data-content="Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.">Sammy.js</a>
</li>
<li>
<a href="labs/dependency-examples/knockoutjs_require/index.html" data-source="" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">Knockout + Require.js *</a>
<a href="labs/dependency-examples/knockoutjs_require/" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">Knockout + Require.js *</a>
</li>
<li>
<a href="labs/dependency-examples/angularjs_require/index.html" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a>
<a href="labs/dependency-examples/angularjs_require/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a>
</li>
<li>
<a href="architecture-examples/angularjs-perf/index.html" data-source="http://angularjs.org/" data-content="What HTML would have been
had it been designed for web apps. A version with several performance optimizations.">AngularJS (Optimized)</a>
<a href="architecture-examples/angularjs-perf/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. A version with several performance optimizations.">AngularJS (Optimized)</a>
</li>
<li>
<a href="labs/architecture-examples/plastronjs/index.html" data-source="https://github.com/rhysbrettbowen/PlastronJS" data-content="PlastronJS is an mvc framework built on top of the Closure Library and built to compile with projects that use the Closure Compiler.">PlastronJS *</a>
<a href="labs/architecture-examples/plastronjs/" data-source="https://github.com/rhysbrettbowen/PlastronJS" data-content="PlastronJS is an mvc framework built on top of the Closure Library and built to compile with projects that use the Closure Compiler.">PlastronJS *</a>
</li>
<li>
<a href="labs/architecture-examples/canjs/dojo/index.html" data-source="http://canjs.us" data-content="CanJS with Dojo. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Dojo)</a>
<a href="labs/architecture-examples/canjs/dojo/" data-source="http://canjs.us" data-content="CanJS with Dojo. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Dojo)</a>
</li>
<li>
<a href="labs/architecture-examples/canjs/dojo-widget/index.html" data-source="http://canjs.us" data-content="CanJS with Dojo (includes a Dojo widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Dojo Widget)</a>
<a href="labs/architecture-examples/canjs/dojo-widget/" data-source="http://canjs.us" data-content="CanJS with Dojo (includes a Dojo widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Dojo Widget)</a>
</li>
<li>
<a href="labs/architecture-examples/canjs/jquery/index.html" data-source="http://canjs.us" data-content="CanJS with jQuery. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (jQuery)</a>
<a href="labs/architecture-examples/canjs/jquery/" data-source="http://canjs.us" data-content="CanJS with jQuery. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (jQuery)</a>
</li>
<li>
<a href="labs/architecture-examples/canjs/jquery-widget/index.html" data-source="http://canjs.us" data-content="CanJS with jQuery (includes a jQuery UI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (jQuery Widget)</a>
<a href="labs/architecture-examples/canjs/jquery-widget/" data-source="http://canjs.us" data-content="CanJS with jQuery (includes a jQuery UI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (jQuery Widget)</a>
</li>
<li>
<a href="labs/architecture-examples/canjs/mootools/index.html" data-source="http://canjs.us" data-content="CanJS with Mootools. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (MooTools)</a>
<a href="labs/architecture-examples/canjs/mootools/" data-source="http://canjs.us" data-content="CanJS with Mootools. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (MooTools)</a>
</li>
<li>
<a href="labs/architecture-examples/canjs/yui/index.html" data-source="http://canjs.us" data-content="CanJS with YUI. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (YUI)</a>
<a href="labs/architecture-examples/canjs/yui/" data-source="http://canjs.us" data-content="CanJS with YUI. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (YUI)</a>
</li>
<li>
<a href="labs/architecture-examples/canjs/yui-widget/index.html" data-source="http://canjs.us" data-content="CanJS with YUI (includes a YUI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (YUI Widget)</a>
<a href="labs/architecture-examples/canjs/yui-widget/" data-source="http://canjs.us" data-content="CanJS with YUI (includes a YUI widget binding example). CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (YUI Widget)</a>
</li>
<li>
<a href="labs/architecture-examples/canjs/zepto/index.html" data-source="http://canjs.us" data-content="CanJS with Zepto. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Zepto)</a>
<a href="labs/architecture-examples/canjs/zepto/" data-source="http://canjs.us" data-content="CanJS with Zepto. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS (Zepto)</a>
</li>
</ul>
</div>
</div>
<hr>
<footer class="credit">
<p>Brought to you by<a href="https://github.com/addyosmani"><img src="http://www.gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275?s=40" width="40" height="40" alt="Sindre Sorhus">Addy Osmani</a> and <a href="https://github.com/sindresorhus"><img src="http://www.gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=40" width="40" height="40" alt="Sindre Sorhus">Sindre Sorhus</a></p>
</footer>
</div>
<hr>
<footer class="credit">
<p>Brought to you by<a href="https://github.com/addyosmani"><img src="http://www.gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275?s=40" width="40" height="40">Addy Osmani</a> and <a href="https://github.com/sindresorhus"><img src="http://www.gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=40" width="40" height="40">Sindre Sorhus</a></p>
</footer>
</div>
<script src="assets/jquery.min.js"></script>
<script src="site/js/jquery.hoverIntent.min.js"></script>
<script src="site/js/bootstrap.min.js"></script>
<script src="site/js/main.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>
<script src="assets/jquery.min.js"></script>
<script src="site/js/jquery.hoverIntent.min.js"></script>
<script src="site/js/bootstrap.min.js"></script>
<script src="site/js/main.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>
</body>
</html>
\ No newline at end of file
site/css/main.css
View file @ 6762ec68
......@@ -43,11 +43,6 @@ a:hover {
color: #787e7e;
}
.nav-tabs > li > a,
.nav-pills > li > a {
line-height: 20px;
}
p {
font-size: 15px;
line-height: 1.5;
......@@ -110,8 +105,11 @@ header nav a:first-child {
margin-bottom: 20px;
}
.applist a {
.applist .row > div {
white-space: nowrap;
}
.applist a {
position: relative; /* popover */
}
......@@ -123,24 +121,9 @@ header nav a:first-child {
background-color: rgba(0, 0, 0, .2);
}
.applist .popover {
margin: 0;
cursor: default;
color: #333;
white-space: normal;
z-index: 999;
}
.applist .popover-title {
padding: 9px 70px 9px 15px;
}
.applist .popover-title a {
font-size: 13px;
line-height: 18px;
position: absolute;
top: 16px;
right: 20px;
.applist a:hover .label {
text-decoration: none !important;
color: red;
}
.applist.labs {
......@@ -151,7 +134,13 @@ header nav a:first-child {
columns: 3;
}
.applist.labs {
list-style: none;
margin: 0;
}
.applist.labs li {
margin-bottom: 20px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-ms-column-break-inside: avoid;
......@@ -169,6 +158,26 @@ header nav a:first-child {
margin-right: 5px;
}
.popover {
margin: 0;
cursor: default;
color: #333;
white-space: normal;
z-index: 999;
}
.popover-title {
padding: 9px 70px 9px 15px;
}
.popover-title a {
font-size: 13px;
line-height: 18px;
position: absolute;
top: 16px;
right: 20px;
}
.zocial.red {
background-color: #a82400;
}
......
site/js/main.js
View file @ 6762ec68
......@@ -2,26 +2,40 @@
(function() {
'use strict';
// Apps popover
function hover() {
$( this ).popover('toggle');
}
$.fn.persistantPopover = function() {
var popoverTimeout;
$('.applist a').each(function() {
var $this = $( this );
$this.popover({
placement: 'in right',
animation: false,
title: $this[0].firstChild.textContent + '<a href="' + $this.data('source') + '">Go to site</a>'
});
})
.off()
.hoverIntent( hover, hover )
.on('click', '.popover', function( e ) {
// Prevent click on the popover, but allow links inside
if ( e.target.nodeName.toLowerCase() !== 'a' ) {
e.preventDefault();
function delay() {
popoverTimeout = setTimeout(function() {
$('.popover').hide();
}, 100);
}
});
this.each(function() {
var $this = $( this );
$this.popover({
trigger: 'manual',
placement: 'right',
animation: false,
title: this.firstChild.textContent + '<a href="' + $this.data('source') + '">Website</a>'
});
})
.mouseenter(function() {
clearTimeout( popoverTimeout );
$('.popover').remove();
$( this ).popover('show');
})
.mouseleave(function() {
delay();
$('.popover').mouseenter(function() {
clearTimeout( popoverTimeout ) ;
}).mouseleave(function() {
delay();
});
});
};
// Apps popover
$('.applist a').persistantPopover();
}());
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7