Browse files

Update the docs and remove all the deprecated/broken stuff

  • Loading branch information...
1 parent 10e2222 commit 0e4f96e38af4a795701f6c1635681ac63e963943 @creationix committed Oct 8, 2009
Showing with 134 additions and 2,328 deletions.
  1. +16 −142 README.markdown
  2. +5 −15 examples/{jquery-haml → }/index.html
  3. +0 −3 examples/jquery-haml/README.markdown
  4. +0 −159 examples/jquery-haml/embedded.html
  5. +0 −219 examples/jquery-haml/js/common_widgets.js
  6. +0 −37 examples/jquery-haml/js/jquery.json-1.3.min.js
  7. +0 −419 examples/jquery-haml/js/showdown.js
  8. +0 −83 examples/jquery-haml/pages/databind.js
  9. +0 −43 examples/jquery-haml/pages/index.js
  10. +0 −61 examples/jquery-haml/pages/markdown.js
  11. +0 −125 examples/jquery-haml/pages/ui-demo.js
  12. 0 examples/{jquery-haml → }/js/jquery-1.3.2.min.js
  13. 0 examples/{jquery-haml → }/js/jquery-ui-1.7.2.custom.min.js
  14. +113 −0 examples/js/ui-demo.js
  15. 0 examples/node-haml/README.markdown
  16. +0 −23 examples/node-haml/convert.js
  17. +0 −20 examples/node-haml/haml/sample.haml
  18. +0 −563 examples/node-haml/haml/ui.haml
  19. +0 −11 examples/node-haml/server.js
  20. 0 examples/{jquery-haml → }/skin/images/ui-bg_diagonals-medium_20_d34d17_40x40.png
  21. 0 examples/{jquery-haml → }/skin/images/ui-bg_flat_30_cccccc_40x100.png
  22. 0 examples/{jquery-haml → }/skin/images/ui-bg_flat_50_5c5c5c_40x100.png
  23. 0 examples/{jquery-haml → }/skin/images/ui-bg_gloss-wave_45_817865_500x100.png
  24. 0 examples/{jquery-haml → }/skin/images/ui-bg_gloss-wave_60_fece2f_500x100.png
  25. 0 examples/{jquery-haml → }/skin/images/ui-bg_gloss-wave_70_ffdd57_500x100.png
  26. 0 examples/{jquery-haml → }/skin/images/ui-bg_gloss-wave_90_fff9e5_500x100.png
  27. 0 examples/{jquery-haml → }/skin/images/ui-bg_highlight-soft_100_feeebd_1x100.png
  28. 0 examples/{jquery-haml → }/skin/images/ui-bg_inset-soft_30_ffffff_1x100.png
  29. 0 examples/{jquery-haml → }/skin/images/ui-icons_3d3d3d_256x240.png
  30. 0 examples/{jquery-haml → }/skin/images/ui-icons_bd7b00_256x240.png
  31. 0 examples/{jquery-haml → }/skin/images/ui-icons_d19405_256x240.png
  32. 0 examples/{jquery-haml → }/skin/images/ui-icons_eb990f_256x240.png
  33. 0 examples/{jquery-haml → }/skin/images/ui-icons_ed9f26_256x240.png
  34. 0 examples/{jquery-haml → }/skin/images/ui-icons_fadc7a_256x240.png
  35. 0 examples/{jquery-haml → }/skin/images/ui-icons_ffe180_256x240.png
  36. 0 examples/{jquery-haml → }/skin/jquery-ui-1.7.2.custom.css
  37. 0 {lib → }/jquery.haml-1.3.js
  38. +0 −405 lib/haml.js
View
158 README.markdown
@@ -8,8 +8,8 @@ can do more work independent of the server for a better user experience. See
---------------------
-haml-js is a jQuery plugin. In order to use it you simply include the `js/jquery.haml-1.3.js` file
-in your jquery-ui project and use it as a dom builder.
+haml-js is a jQuery plugin. In order to use it you simply include the `jquery.haml-1.3.js` file
+in your jquery project and use it as a dom builder.
How to use
----------
@@ -48,7 +48,7 @@ One thing you'll notice right away is that this is encoded in pure JSON. This me
stream it from a server via ajax calls and it can be executed in the browser to create dom
structures on the fly.
-The basic rules are very similair to the real haml for ruby. If the first item in a list is a
+The basic rules are very similar to the real haml for ruby. If the first item in a list is a
string, then that is the css selector for that node. It consists of `element#id.class`. If the
element is left out, haml-js will assume div. You can have multiple css classes and even include
spaces. The id and class are of course optional. After that, everything in the list is considered
@@ -60,7 +60,7 @@ Here is another example with some html attributes specified:
**haml-js**
- ["strong", {class: "code", style: "color:red;"}, "Hello, World!"]
+ ["%strong", {class: "code", style: "color:red;"}, "Hello, World!"]
**html**
@@ -76,8 +76,8 @@ Sometimes css can be complex enough that some structure is desired.
**haml-js**
- ["#main", {_: {position: "absolute", left:0, right:0, top:0, bottom:0}},
- [".greeting", {_: {"margin-top": "200px", "text-align": "center"}}, "Hello, World!"]
+ ["#main", {css: {position: "absolute", left:0, right:0, top:0, bottom:0}},
+ [".greeting", {css: {"margin-top": "200px", "text-align": "center"}}, "Hello, World!"]
]
**html**
@@ -86,16 +86,16 @@ Sometimes css can be complex enough that some structure is desired.
<div class="greeting" style="margin-top:200px;text-align:center;">Hello, World!</div>
</div>
-When underscore, `_`, is used as an attribute, the value is a json object with key/value pairs
+When `css`, is used as an attribute, the value is a json object with key/value pairs
representing the css styles. These will be applied using jQuery's css method. Note that other
parameters can be used in this same overall hash. Also if prefered, a regular style attribute can be
specified with manually formatted css.
### Javascript jQuery plugin Syntax
This is where this template language/framework really shines. Until now, this had little power over
-server side html generation or other dom builders like the one built into Prototype.js. Javascript
-execution syntax allows you to declarativly schedule js methods to be called when the node gets
+server side html generation or other dom builders like the ones built into other frameworks. Javascript
+execution syntax allows you to declaratively schedule JavaScript methods to be called when the node gets
attached to the page.
**haml-js**
@@ -135,146 +135,20 @@ scope of the jquery node.
Usually you will be wanting to attach these element to some part of the page and so the this format
is used more often. This is the `.haml` plugin that all jQuery object now have.
- $("body").haml(["p", "Hello ", ["img",{src:"logo.jpg"]]);
+ $("body").haml(["%p", "Hello ", ["%img",{src:"logo.jpg"}]]);
This will create the new element and append it to the end of the body tag. Once it's the recursive
function gets to the last step and appends the element tree to the page, any event's queued up would
then take place.
-### Using regular haml
-
-haml-js also has a text parser that allows you to use external haml files without encoding them to
-JSON first.
-
-**haml**
-
- #header
- %h1 Haml for the Browser!
- %img{src: "/images/logo.png", alt:"haml-js logo"}
- #main
- %p
- Welcome to my simple site.
- This is a multiline paragraph.
- %p{$:{click:[function(){this.hide();}]}}
- Hide Me!
- #sidebar
- %h2 Cool Links
- %ul
- %li <http://haml.hamptoncatlin.com/>
- %li <http://github.com/creationix/haml-js>
- %li <http://github.com/creationix/rack-php>
- #footer
- © 2009 Tim Caswell
-
-**js**
-
- // This made up ajax function simply loads a remote resource
- // and passes the result to given callback.
- ajax("http://server.com/views/sample.haml", function(text) {
- var haml = $.haml_parse(text);
- $('body').haml(haml);
- });
+Here is a fun one. Add a paragraph saying "Hello World" onto every element in a page.
-**html**
-
- <div id="header">
- <h1>Haml for the Browser!</h1>
- <img alt="haml-js logo" src="/images/logo.png">
- </div>
- <div id="main">
- <p>Welcome to my simple site. This is a multiline paragraph.</p>
- <p>Hide Me!</p>
- </div>
- <div id="sidebar">
- <h2>Cool Links</h2>
- <ul>
- <li>&lt;http://haml.hamptoncatlin.com/&gt;</li>
- <li>&lt;http://github.com/creationix/haml-js&gt;</li>
- <li>&lt;http://github.com/creationix/rack-php&gt;</li>
- </ul>
- </div>
- <div id="footer">© 2009 Tim Caswell</div>
-
-This is almost exactely like regular ruby based haml. A couple of things to note:
-
- * Since this is for dom building, there is no support for doctypes, xml headers, or anything other
- than html tags with attributes and content.
- * You can use jquery methods on the elements as they are created.
- * You embed javascript in your attributes values instead of ruby
- * There is no `-` operator yet. I'm not quite sure how this work though.
- * The attributes use the json format since everything between the braces is native JavaScript
- * Future versions will allow for loops and specifying the context in which the template is evaled.
-
-### Markdown integration
-
-One thing that haml is terrible at is content text. The mixture of a tags, em tags, ul, li, etc can
-get out of hand very quickly.
-
-I've found that markdown is an excellent tool for this part. The haml like dom builder is great for
-structure and logic while markdown is good for content generation.
-
-**haml-js**
-
- var data = {
- name: "World",
- website: "http://creationix.com/",
- title: "My Website"
- };
- var markdown = "# Hello {name}\n\nThis *is* **a** paragraph.\n\nClick [here]({website} \"{title}\") for fun.";
- $('body').haml(
- ["#content", {$:{ markdown:[data]}}, markdown]
- );
-
-**html**
-
- <div id="content">
- <h1>Hello World</h1>
- <p>This <em>is</em> <strong>a</strong> paragraph.</p>
- <p>Click <a title="My Website" href="http://creationix.com/">here</a> for fun.</p>
- </div>
-
-This has variable replacement within the markdown and then markdown parsing to html.
-
-### Advanced examples
-
-Since the haml-js templates are pure json, they are also native Javascript. This means if you don't
-plan on piping the templates through an ajax call, you can include then inline in the page or in
-external js files and put logic within them.
-
-For example you can call the jQuery `bind` method on a node and pass in the callback as a native
-function (inline or referenced). You can write your own array map function like the `collect` in the
-example library and have loops inline in your json template. Also you can build the haml
-procedurally in javascript and then append it to the page. With clever use of closures you can
-create entire databound systems with minimal effort. See the databind example for more details.
-
-One common pattern is to write functions that convert domain data into haml data. These are the
-equivalents of view templates in MVC arcitectures. This way, the server only needs to send the raw
-data and the client can transform it into interactive html all on it's own.
-
-With a little practice and a good understanding of javascript internals, you can easily create
-entire applications with the entire interface written in haml-js. There is no longer a need for
-servers to feed html to your site. The page can manage it just fine on it's own.
-
-Want to see it in action?
--------------------------
-
-The rest of this package is a reference implementation using the library. Simply point a browser
-to the test.html file.
-
-Also you ran use rack to serve the folder on a local web server. Simple type `rackup` in
-the main folder and point your browser to http://localhost:9292/test.html
-
-**js/common_widgets** is an example of a common library used by several haml-js views. It contains
-a form builder with data binding and some useful sub templates.
-
-**pages/index.js** is a very small page that generates all the possible urls for the sample data.
+$('*').haml(["%p", "Hello World"])
-**pages/ui-demo.js** is a small collection of the examples in the jQuery-ui documentation converted
-to haml-js as an exercise.
+Run that in the Javascript console of any page that has jquery-haml loaded and watch the messages fly.
-**pages/databind.js** is an advanced demo showing how the library could be used for a rich userface
-to load data from a sever, modify it client side, and sync with the server via async ajax calls.
-Note save method in the example is a stub and doesn't actually make an ajax call, but it easily could.
+## TopCloud
-These examples make heavy use of closures, so read up on the topic if your're unsure what that means.
+Since jquery-haml can get out of hand for large application, I wrote an abstraction layer on top of it. Check out [TopCloud][].
+[TopCloud]: http://github.com/creationix/topcloud
View
20 examples/jquery-haml/index.html → examples/index.html
@@ -1,23 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
- <title>jQuery HAML + UI Example Page</title>
- <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
+ <title>jQuery HAML + UI Example Page</title>
+ <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link type="text/css" href="skin/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<style type="text/css">body{font-size: 11px;}</style>
- <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
- <script type="text/javascript" src="../../lib/jquery.haml-1.3.js"></script>
- <script type="text/javascript" src="js/common_widgets.js"></script>
- <script type="text/javascript">
- //<![CDATA[
- function getparam(key, d) {
- var value = window.location.href.match(new RegExp("[?&]" + key + "=([^&#]*)"));
- return value ? value[1] : d;
- }
- console.log('pages/' + getparam("page", "index") + '.js');
- $.getScript('pages/' + getparam("page", "index") + '.js')
- //]]>
- </script>
+ <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
+ <script type="text/javascript" src="../jquery.haml-1.3.js"></script>
+ <script type="text/javascript" src="js/ui-demo.js"></script>
</head>
<body></body>
</html>
View
3 examples/jquery-haml/README.markdown
@@ -1,3 +0,0 @@
-# haml-js jQuery integration demo
-
-This section is currently broken. I'll soon update the example to work right once the api becomes stable.
View
159 examples/jquery-haml/embedded.html
@@ -1,159 +0,0 @@
-<!-- ex:ts=2:et: -->
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
- <head>
- <title>jQuery HAML + UI Example Page</title>
- <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
- <style type="text/css">body{font-size: 11px;}</style>
- <link type="text/css" href="css/sunny/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
- <script type="text/javascript" src="jquery/jquery-ui-1.7.2.custom.min.js"></script>
- <script type="text/javascript" src="js/showdown.js"></script>
- <script type="text/javascript" src="js/jquery.haml-1.3.js"></script>
- <script type="text/javascript">
- $(function () {
-
- // Pulls data from script tags and optionally parses it based on mime type
- var data_store = {};
- var converter;
- function load_data(id) {
- if (!data_store[id]) {
- $("script#" + id).each(function () {
-
- // Pull the contents out of the script tag
- var lines = $(this).html().split("\n");
- lines.shift();
- // We don't care about empty script tags.
- if (lines.length === 0) {
- return;
- }
- // Remove indentation so that the first line starts flush
- var indent = lines[0].match(/^[ \t]*/)[0].length;
- var data = $.map(lines, function (line) {
- return line.substr(indent);
- }).join("\n");
-
- // If the mime type is a known transformer, then transform it automatically
- switch (this.type) {
- // Process haml through haml-js
- case "text/x-haml":
- data = $.haml_parse(data);
- break;
- // Process markdown through Showdown
- case "text/x-markdown":
- if (!converter) {
- converter = new Showdown.converter();
- }
- data = converter.makeHtml(data);
- break;
- }
- data_store[this.id] = {type: this.type, data: data};
- });
- }
- return data_store[id];
- }
-
- // Replace the script tags with their rendered contents
- $('body script').each(function () {
- if (this.type !== "text/javascript") {
- var contents = load_data(this.id);
- switch(contents.type) {
- case "text/x-haml":
- var new_node = document.createElement('div');
- $(this).haml(contents.data, "replaceWith");
- break;
- case "text/x-markdown":
- $(this).replaceWith(contents.data);
- break;
- }
- }
-
- });
-
- $('body').haml(load_data('datepicker'));
- $('body').append(load_data('welcome_text'));
- $('body').haml(load_data('accordian'));
-
- });
- </script>
- </head>
- <body>
- <table><tr><td valign="top">
- <script id="welcome_text" type="text/x-markdown">
- WMD Demo
- ========
-
- *Modify or delete this text in the editor above.*
-
- WMD's context-sensitive commands pack a lot of power into a simple user interface. Here are some advanced features to try:
-
-
- Keyboard shortcuts
- ------------------
-
- Use keyboard shortcuts to quickly toggle formatting while you type:
-
- - Ctrl+B for **strong**
- - Ctrl+I for *emphasis*
- - Ctrl+K for `code`
-
- See the tooltips for other keyboard commands.
- </script>
- </td><td valign="top" style="width:33%">
- <script id="datepicker" type="text/x-haml">
- %div{$: {datepicker: []}}
- </script>
- </td><td valign="top" style="width:33%">
- <script id="accordian" type="text/x-haml">
- %div{$: {accordion: []}}
- %h3
- %a{ href: "#" }
- Section 1
- %div
- %p
- Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
- ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
- amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
- odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
- %h3
- %a{ href: "#" }
- Section 2
- %div
- %p
- Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
- purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
- velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
- suscipit faucibus urna.
- %h3
- %a{ href: "#" }
- Section 3
- %div
- %p
- Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
- Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
- ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
- lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- %ul
- %li
- List item one
- %li
- List item two
- %li
- List item three
- %h3
- %a{ href: "#" }
- Section 4
- %div
- %p
- Cras dictum. Pellentesque habitant morbi tristique senectus et netus
- et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
- mauris vel est.
- %p
- Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
- Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
- inceptos himenaeos.
- </script>
- </td></tr></table>
- </body>
-</html>
-
View
219 examples/jquery-haml/js/common_widgets.js
@@ -1,219 +0,0 @@
-// requires jquery-ui
-
-if (typeof Object.create !== 'function') {
- Object.create = function (o) {
- function F() {}
- F.prototype = o;
- return new F();
- };
-}
-
-
-// Test an object for it's constructor type. Sort of a reverse, discriminatory instanceof
-function isTypeOf(t, c){ if (t === undefined) {return c == 'Undefined';} return t.constructor.toString().match(new RegExp(c, 'i')) !== null; }
-
-function trace(message, obj)
-{
- console.log(message, obj);
- return obj;
-}
-
-function collect(obj, fn)
-{
- var accum = [];
- jQuery.each(obj, function(i,v){
- accum.push(fn(i,v));
- });
- return accum;
-}
-
-function filter(obj, fn)
-{
- var accum = [];
- jQuery.each(obj, function(i,v){
- if (fn(i,v)) {
- accum.push(v);
- }
- });
- return accum;
-}
-
-// Kinda like a var_export for json data
-function inspect(data, limit) {
- if (limit === undefined) {
- limit = 5;
- }
- if (limit <= 0) {return "...";}
- var accum;
- if (isTypeOf(data, "Array")) {
- accum = ["ul"];
- jQuery.each(data, function(k,v){ accum.push(["li", inspect(v, limit-1)]); });
- return accum;
- }
- else if (isTypeOf(data, "String")) {
- return '"'+data.replace(/\"/g,'\\"').replace(/\t/g,'\\t').replace(/\n/g,'\\n')+'"';
- }
- else if (isTypeOf(data, "Object")) {
- accum = ["dl"];
- jQuery.each(data, function(k,v){
- accum.push(["dt", k+":"]);
- accum.push(["dd", inspect(v, limit-1)]);
- });
- return accum;
- }
- else {
- return data+"";
- }
-}
-
-
-function small_header(options, content)
-{
- return [".ui-state-default ui-corner-all", {
- style: "padding:4px;margin: 0 0 10px 0"
- },
- ["span.ui-icon.ui-icon-" + options.icon, {style: "float:left; margin:-2px 5px 0 0;" }],
- content
- ];
-}
-
-function button(options, content)
-{
- return ["button.ui-state-default ui-button ui-corner-all", {
- style:"float: left; margin: 0 5px; line-height:13px;",
- $:{bind:["click", options.callback]}
- },
- ["span.ui-icon.ui-icon-" + options.icon, {style: "float:left; margin:-2px 3px -2px -2px;" }],
- content
- ];
-}
-
-// Options:
-//
-// title - the title of the dialoc
-// callback - a function called with true or false
-//
-function confirmation_dialog(options, content)
-{
- return ["div", {
- title: options.title,
- $:{dialog: [{
- bgiframe: true,
- resizable: false,
- modal: true,
- buttons: {
- Ok: function() {
- jQuery(this).dialog('close');
- options.callback(true);
- },
- Cancel: function() {
- jQuery(this).dialog('close');
- options.callback(false);
- }
- },
- close: function() {
- $(this).remove();
- }
- }]}
- }, ["p",
- ["span.ui-icon ui-icon-alert", {style:"float:left; margin:0 7px 20px 0;"}],
- content
- ]
- ];
-}
-
-
-// Options:
-//
-// title - dialog title
-// w - dialog width
-// h - dialog content height
-function inline_dialog(options, content)
-{
- return ["div", {
- title: options.title,
- $:{dialog: [{
- bgiframe: true,
- height: 29+options.h,
- width: options.w,
- modal: true,
- resizable: true,
- close: function(e){
- $(this).remove();
- if (options.close) {
- options.close(e);
- }
- }
- }]}
- },
- content
- ];
-}
-
-// Meta example:
-// {
-// name: {type:"text"},
-// description: {type:"textarea",title:"Long Description"}
-// }
-// Data is reference to actual data store.
-function form_builder(meta, data, notify)
-{
- var disabled;
- if (notify === undefined)
- {
- disabled = true;
- notify = function(){};
- }
- return collect(meta, function(name, options) {
- if (!options.label) {
- options.label = name.charAt(0).toUpperCase() + name.substr(1).toLowerCase();
- }
- var content;
- switch (options.type) {
- case "textarea":
- content = ["textarea.ui-widget-content ui-corner-all", {
- style:"width:250px;padding:5px;margin:2px 15px;height:100px",
- name:name,
- $:{
- bind:["keyup", function(e){data[name]=this.value;notify(name);}],
- $: function() { if (disabled){this.attr("disabled", "disabled").addClass('ui-state-disabled');} }
- }
- }, data[name]];
- break;
- case "slider":
- content = ["div", {style: "width:260px; margin:15px;", $:{
- slider: [{
- value: data[name],
- change: function(event, ui) { data[name] = ui.value;notify(name); }
- }],
- $: function() { if (disabled){this.slider('disable');} }
- }}];
- break;
- case "eq":
- content = [".clearfix", collect(data[name], function(i,v){
- return ["div", {_: {height: "120px", "float": "left", margin: "15px"}, $:{
- slider: [{
- value: v,
- range:"min",
- orientation:"vertical",
- change: function(event, ui) { data[name][i] = ui.value;notify(name); }
- }],
- $: function() { if (disabled){this.slider('disable');} }
- }}
- ];
- })];
- break;
- default:
- content = ["input.ui-widget-content ui-corner-all", {
- style:"padding:5px;width:250px;margin:2px 15px",
- name:name,
- value:data[name],
- $:{
- bind:["keyup", function(e){data[name] = this.value;notify(name);}],
- $: function() { if (disabled){this.attr("disabled", "disabled").addClass('ui-state-disabled');} }
- }}];
- break;
- }
- return [["p", {style:"font-weight:bold;"}, options.label], content];
- });
-}
View
37 examples/jquery-haml/js/jquery.json-1.3.min.js
@@ -1,37 +0,0 @@
-
-(function($){function toIntegersAtLease(n)
-{return n<10?'0'+n:n;}
-Date.prototype.toJSON=function(date)
-{return this.getUTCFullYear()+'-'+
-toIntegersAtLease(this.getUTCMonth())+'-'+
-toIntegersAtLease(this.getUTCDate());};var escapeable=/["\\\x00-\x1f\x7f-\x9f]/g;var meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};$.quoteString=function(string)
-{if(escapeable.test(string))
-{return'"'+string.replace(escapeable,function(a)
-{var c=meta[a];if(typeof c==='string'){return c;}
-c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+(c%16).toString(16);})+'"';}
-return'"'+string+'"';};$.toJSON=function(o,compact)
-{var type=typeof(o);if(type=="undefined")
-return"undefined";else if(type=="number"||type=="boolean")
-return o+"";else if(o===null)
-return"null";if(type=="string")
-{return $.quoteString(o);}
-if(type=="object"&&typeof o.toJSON=="function")
-return o.toJSON(compact);if(type!="function"&&typeof(o.length)=="number")
-{var ret=[];for(var i=0;i<o.length;i++){ret.push($.toJSON(o[i],compact));}
-if(compact)
-return"["+ret.join(",")+"]";else
-return"["+ret.join(", ")+"]";}
-if(type=="function"){throw new TypeError("Unable to convert object of type 'function' to json.");}
-var ret=[];for(var k in o){var name;type=typeof(k);if(type=="number")
-name='"'+k+'"';else if(type=="string")
-name=$.quoteString(k);else
-continue;var val=$.toJSON(o[k],compact);if(typeof(val)!="string"){continue;}
-if(compact)
-ret.push(name+":"+val);else
-ret.push(name+": "+val);}
-return"{"+ret.join(", ")+"}";};$.compactJSON=function(o)
-{return $.toJSON(o,true);};$.evalJSON=function(src)
-{return eval("("+src+")");};$.secureEvalJSON=function(src)
-{var filtered=src;filtered=filtered.replace(/\\["\\\/bfnrtu]/g,'@');filtered=filtered.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']');filtered=filtered.replace(/(?:^|:|,)(?:\s*\[)+/g,'');if(/^[\],:{}\s]*$/.test(filtered))
-return eval("("+src+")");else
-throw new SyntaxError("Error parsing JSON, source is not valid.");};})(jQuery);
View
419 examples/jquery-haml/js/showdown.js
@@ -1,419 +0,0 @@
-/*
- A A L Source code at:
- T C A <http://www.attacklab.net/>
- T K B
-*/
-
-var Showdown={};
-Showdown.converter=function(){
-var _1;
-var _2;
-var _3;
-var _4=0;
-this.makeHtml=function(_5){
-_1=new Array();
-_2=new Array();
-_3=new Array();
-_5=_5.replace(/~/g,"~T");
-_5=_5.replace(/\$/g,"~D");
-_5=_5.replace(/\r\n/g,"\n");
-_5=_5.replace(/\r/g,"\n");
-_5="\n\n"+_5+"\n\n";
-_5=_6(_5);
-_5=_5.replace(/^[ \t]+$/mg,"");
-_5=_7(_5);
-_5=_8(_5);
-_5=_9(_5);
-_5=_a(_5);
-_5=_5.replace(/~D/g,"$$");
-_5=_5.replace(/~T/g,"~");
-return _5;
-};
-var _8=function(_b){
-var _b=_b.replace(/^[ ]{0,3}\[(.+)\]:[ \t]*\n?[ \t]*<?(\S+?)>?[ \t]*\n?[ \t]*(?:(\n*)["(](.+?)[")][ \t]*)?(?:\n+|\Z)/gm,function(_c,m1,m2,m3,m4){
-m1=m1.toLowerCase();
-_1[m1]=_11(m2);
-if(m3){
-return m3+m4;
-}else{
-if(m4){
-_2[m1]=m4.replace(/"/g,"&quot;");
-}
-}
-return "";
-});
-return _b;
-};
-var _7=function(_12){
-_12=_12.replace(/\n/g,"\n\n");
-var _13="p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math|ins|del";
-var _14="p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math";
-_12=_12.replace(/^(<(p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math|ins|del)\b[^\r]*?\n<\/\2>[ \t]*(?=\n+))/gm,_15);
-_12=_12.replace(/^(<(p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math)\b[^\r]*?.*<\/\2>[ \t]*(?=\n+)\n)/gm,_15);
-_12=_12.replace(/(\n[ ]{0,3}(<(hr)\b([^<>])*?\/?>)[ \t]*(?=\n{2,}))/g,_15);
-_12=_12.replace(/(\n\n[ ]{0,3}<!(--[^\r]*?--\s*)+>[ \t]*(?=\n{2,}))/g,_15);
-_12=_12.replace(/(?:\n\n)([ ]{0,3}(?:<([?%])[^\r]*?\2>)[ \t]*(?=\n{2,}))/g,_15);
-_12=_12.replace(/\n\n/g,"\n");
-return _12;
-};
-var _15=function(_16,m1){
-var _18=m1;
-_18=_18.replace(/\n\n/g,"\n");
-_18=_18.replace(/^\n/,"");
-_18=_18.replace(/\n+$/g,"");
-_18="\n\n~K"+(_3.push(_18)-1)+"K\n\n";
-return _18;
-};
-var _9=function(_19){
-_19=_1a(_19);
-var key=_1c("<hr />");
-_19=_19.replace(/^[ ]{0,2}([ ]?\*[ ]?){3,}[ \t]*$/gm,key);
-_19=_19.replace(/^[ ]{0,2}([ ]?\-[ ]?){3,}[ \t]*$/gm,key);
-_19=_19.replace(/^[ ]{0,2}([ ]?\_[ ]?){3,}[ \t]*$/gm,key);
-_19=_1d(_19);
-_19=_1e(_19);
-_19=_1f(_19);
-_19=_7(_19);
-_19=_20(_19);
-return _19;
-};
-var _21=function(_22){
-_22=_23(_22);
-_22=_24(_22);
-_22=_25(_22);
-_22=_26(_22);
-_22=_27(_22);
-_22=_28(_22);
-_22=_11(_22);
-_22=_29(_22);
-_22=_22.replace(/ +\n/g," <br />\n");
-return _22;
-};
-var _24=function(_2a){
-var _2b=/(<[a-z\/!$]("[^"]*"|'[^']*'|[^'">])*>|<!(--.*?--\s*)+>)/gi;
-_2a=_2a.replace(_2b,function(_2c){
-var tag=_2c.replace(/(.)<\/?code>(?=.)/g,"$1`");
-tag=_2e(tag,"\\`*_");
-return tag;
-});
-return _2a;
-};
-var _27=function(_2f){
-_2f=_2f.replace(/(\[((?:\[[^\]]*\]|[^\[\]])*)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g,_30);
-_2f=_2f.replace(/(\[((?:\[[^\]]*\]|[^\[\]])*)\]\([ \t]*()<?(.*?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g,_30);
-_2f=_2f.replace(/(\[([^\[\]]+)\])()()()()()/g,_30);
-return _2f;
-};
-var _30=function(_31,m1,m2,m3,m4,m5,m6,m7){
-if(m7==undefined){
-m7="";
-}
-var _39=m1;
-var _3a=m2;
-var _3b=m3.toLowerCase();
-var url=m4;
-var _3d=m7;
-if(url==""){
-if(_3b==""){
-_3b=_3a.toLowerCase().replace(/ ?\n/g," ");
-}
-url="#"+_3b;
-if(_1[_3b]!=undefined){
-url=_1[_3b];
-if(_2[_3b]!=undefined){
-_3d=_2[_3b];
-}
-}else{
-if(_39.search(/\(\s*\)$/m)>-1){
-url="";
-}else{
-return _39;
-}
-}
-}
-url=_2e(url,"*_");
-var _3e="<a href=\""+url+"\"";
-if(_3d!=""){
-_3d=_3d.replace(/"/g,"&quot;");
-_3d=_2e(_3d,"*_");
-_3e+=" title=\""+_3d+"\"";
-}
-_3e+=">"+_3a+"</a>";
-return _3e;
-};
-var _26=function(_3f){
-_3f=_3f.replace(/(!\[(.*?)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g,_40);
-_3f=_3f.replace(/(!\[(.*?)\]\s?\([ \t]*()<?(\S+?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g,_40);
-return _3f;
-};
-var _40=function(_41,m1,m2,m3,m4,m5,m6,m7){
-var _49=m1;
-var _4a=m2;
-var _4b=m3.toLowerCase();
-var url=m4;
-var _4d=m7;
-if(!_4d){
-_4d="";
-}
-if(url==""){
-if(_4b==""){
-_4b=_4a.toLowerCase().replace(/ ?\n/g," ");
-}
-url="#"+_4b;
-if(_1[_4b]!=undefined){
-url=_1[_4b];
-if(_2[_4b]!=undefined){
-_4d=_2[_4b];
-}
-}else{
-return _49;
-}
-}
-_4a=_4a.replace(/"/g,"&quot;");
-url=_2e(url,"*_");
-var _4e="<img src=\""+url+"\" alt=\""+_4a+"\"";
-_4d=_4d.replace(/"/g,"&quot;");
-_4d=_2e(_4d,"*_");
-_4e+=" title=\""+_4d+"\"";
-_4e+=" />";
-return _4e;
-};
-var _1a=function(_4f){
-_4f=_4f.replace(/^(.+)[ \t]*\n=+[ \t]*\n+/gm,function(_50,m1){
-return _1c("<h1>"+_21(m1)+"</h1>");
-});
-_4f=_4f.replace(/^(.+)[ \t]*\n-+[ \t]*\n+/gm,function(_52,m1){
-return _1c("<h2>"+_21(m1)+"</h2>");
-});
-_4f=_4f.replace(/^(\#{1,6})[ \t]*(.+?)[ \t]*\#*\n+/gm,function(_54,m1,m2){
-var _57=m1.length;
-return _1c("<h"+_57+">"+_21(m2)+"</h"+_57+">");
-});
-return _4f;
-};
-var _58;
-var _1d=function(_59){
-_59+="~0";
-var _5a=/^(([ ]{0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(~0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/gm;
-if(_4){
-_59=_59.replace(_5a,function(_5b,m1,m2){
-var _5e=m1;
-var _5f=(m2.search(/[*+-]/g)>-1)?"ul":"ol";
-_5e=_5e.replace(/\n{2,}/g,"\n\n\n");
-var _60=_58(_5e);
-_60=_60.replace(/\s+$/,"");
-_60="<"+_5f+">"+_60+"</"+_5f+">\n";
-return _60;
-});
-}else{
-_5a=/(\n\n|^\n?)(([ ]{0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(~0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/g;
-_59=_59.replace(_5a,function(_61,m1,m2,m3){
-var _65=m1;
-var _66=m2;
-var _67=(m3.search(/[*+-]/g)>-1)?"ul":"ol";
-var _66=_66.replace(/\n{2,}/g,"\n\n\n");
-var _68=_58(_66);
-_68=_65+"<"+_67+">\n"+_68+"</"+_67+">\n";
-return _68;
-});
-}
-_59=_59.replace(/~0/,"");
-return _59;
-};
-_58=function(_69){
-_4++;
-_69=_69.replace(/\n{2,}$/,"\n");
-_69+="~0";
-_69=_69.replace(/(\n)?(^[ \t]*)([*+-]|\d+[.])[ \t]+([^\r]+?(\n{1,2}))(?=\n*(~0|\2([*+-]|\d+[.])[ \t]+))/gm,function(_6a,m1,m2,m3,m4){
-var _6f=m4;
-var _70=m1;
-var _71=m2;
-if(_70||(_6f.search(/\n{2,}/)>-1)){
-_6f=_9(_72(_6f));
-}else{
-_6f=_1d(_72(_6f));
-_6f=_6f.replace(/\n$/,"");
-_6f=_21(_6f);
-}
-return "<li>"+_6f+"</li>\n";
-});
-_69=_69.replace(/~0/g,"");
-_4--;
-return _69;
-};
-var _1e=function(_73){
-_73+="~0";
-_73=_73.replace(/(?:\n\n|^)((?:(?:[ ]{4}|\t).*\n+)+)(\n*[ ]{0,3}[^ \t\n]|(?=~0))/g,function(_74,m1,m2){
-var _77=m1;
-var _78=m2;
-_77=_79(_72(_77));
-_77=_6(_77);
-_77=_77.replace(/^\n+/g,"");
-_77=_77.replace(/\n+$/g,"");
-_77="<pre><code>"+_77+"\n</code></pre>";
-return _1c(_77)+_78;
-});
-_73=_73.replace(/~0/,"");
-return _73;
-};
-var _1c=function(_7a){
-_7a=_7a.replace(/(^\n+|\n+$)/g,"");
-return "\n\n~K"+(_3.push(_7a)-1)+"K\n\n";
-};
-var _23=function(_7b){
-_7b=_7b.replace(/(^|[^\\])(`+)([^\r]*?[^`])\2(?!`)/gm,function(_7c,m1,m2,m3,m4){
-var c=m3;
-c=c.replace(/^([ \t]*)/g,"");
-c=c.replace(/[ \t]*$/g,"");
-c=_79(c);
-return m1+"<code>"+c+"</code>";
-});
-return _7b;
-};
-var _79=function(_82){
-_82=_82.replace(/&/g,"&amp;");
-_82=_82.replace(/</g,"&lt;");
-_82=_82.replace(/>/g,"&gt;");
-_82=_2e(_82,"*_{}[]\\",false);
-return _82;
-};
-var _29=function(_83){
-_83=_83.replace(/(\*\*|__)(?=\S)([^\r]*?\S[*_]*)\1/g,"<strong>$2</strong>");
-_83=_83.replace(/(\*|_)(?=\S)([^\r]*?\S)\1/g,"<em>$2</em>");
-return _83;
-};
-var _1f=function(_84){
-_84=_84.replace(/((^[ \t]*>[ \t]?.+\n(.+\n)*\n*)+)/gm,function(_85,m1){
-var bq=m1;
-bq=bq.replace(/^[ \t]*>[ \t]?/gm,"~0");
-bq=bq.replace(/~0/g,"");
-bq=bq.replace(/^[ \t]+$/gm,"");
-bq=_9(bq);
-bq=bq.replace(/(^|\n)/g,"$1 ");
-bq=bq.replace(/(\s*<pre>[^\r]+?<\/pre>)/gm,function(_88,m1){
-var pre=m1;
-pre=pre.replace(/^ /mg,"~0");
-pre=pre.replace(/~0/g,"");
-return pre;
-});
-return _1c("<blockquote>\n"+bq+"\n</blockquote>");
-});
-return _84;
-};
-var _20=function(_8b){
-_8b=_8b.replace(/^\n+/g,"");
-_8b=_8b.replace(/\n+$/g,"");
-var _8c=_8b.split(/\n{2,}/g);
-var _8d=new Array();
-var end=_8c.length;
-for(var i=0;i<end;i++){
-var str=_8c[i];
-if(str.search(/~K(\d+)K/g)>=0){
-_8d.push(str);
-}else{
-if(str.search(/\S/)>=0){
-str=_21(str);
-str=str.replace(/^([ \t]*)/g,"<p>");
-str+="</p>";
-_8d.push(str);
-}
-}
-}
-end=_8d.length;
-for(var i=0;i<end;i++){
-while(_8d[i].search(/~K(\d+)K/)>=0){
-var _91=_3[RegExp.$1];
-_91=_91.replace(/\$/g,"$$$$");
-_8d[i]=_8d[i].replace(/~K\d+K/,_91);
-}
-}
-return _8d.join("\n\n");
-};
-var _11=function(_92){
-_92=_92.replace(/&(?!#?[xX]?(?:[0-9a-fA-F]+|\w+);)/g,"&amp;");
-_92=_92.replace(/<(?![a-z\/?\$!])/gi,"&lt;");
-return _92;
-};
-var _25=function(_93){
-_93=_93.replace(/\\(\\)/g,_94);
-_93=_93.replace(/\\([`*_{}\[\]()>#+-.!])/g,_94);
-return _93;
-};
-var _28=function(_95){
-_95=_95.replace(/<((https?|ftp|dict):[^'">\s]+)>/gi,"<a href=\"$1\">$1</a>");
-_95=_95.replace(/<(?:mailto:)?([-.\w]+\@[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+)>/gi,function(_96,m1){
-return _98(_a(m1));
-});
-return _95;
-};
-var _98=function(_99){
-function char2hex(ch){
-var _9b="0123456789ABCDEF";
-var dec=ch.charCodeAt(0);
-return (_9b.charAt(dec>>4)+_9b.charAt(dec&15));
-}
-var _9d=[function(ch){
-return "&#"+ch.charCodeAt(0)+";";
-},function(ch){
-return "&#x"+char2hex(ch)+";";
-},function(ch){
-return ch;
-}];
-_99="mailto:"+_99;
-_99=_99.replace(/./g,function(ch){
-if(ch=="@"){
-ch=_9d[Math.floor(Math.random()*2)](ch);
-}else{
-if(ch!=":"){
-var r=Math.random();
-ch=(r>0.9?_9d[2](ch):r>0.45?_9d[1](ch):_9d[0](ch));
-}
-}
-return ch;
-});
-_99="<a href=\""+_99+"\">"+_99+"</a>";
-_99=_99.replace(/">.+:/g,"\">");
-return _99;
-};
-var _a=function(_a3){
-_a3=_a3.replace(/~E(\d+)E/g,function(_a4,m1){
-var _a6=parseInt(m1);
-return String.fromCharCode(_a6);
-});
-return _a3;
-};
-var _72=function(_a7){
-_a7=_a7.replace(/^(\t|[ ]{1,4})/gm,"~0");
-_a7=_a7.replace(/~0/g,"");
-return _a7;
-};
-var _6=function(_a8){
-_a8=_a8.replace(/\t(?=\t)/g," ");
-_a8=_a8.replace(/\t/g,"~A~B");
-_a8=_a8.replace(/~B(.+?)~A/g,function(_a9,m1,m2){
-var _ac=m1;
-var _ad=4-_ac.length%4;
-for(var i=0;i<_ad;i++){
-_ac+=" ";
-}
-return _ac;
-});
-_a8=_a8.replace(/~A/g," ");
-_a8=_a8.replace(/~B/g,"");
-return _a8;
-};
-var _2e=function(_af,_b0,_b1){
-var _b2="(["+_b0.replace(/([\[\]\\])/g,"\\$1")+"])";
-if(_b1){
-_b2="\\\\"+_b2;
-}
-var _b3=new RegExp(_b2,"g");
-_af=_af.replace(_b3,_94);
-return _af;
-};
-var _94=function(_b4,m1){
-var _b6=m1.charCodeAt(0);
-return "~E"+_b6+"E";
-};
-};
-
View
83 examples/jquery-haml/pages/databind.js
@@ -1,83 +0,0 @@
-$(function(){
-
-
-var song = {
- title: "Name of the Song",
- description: "This is a \"description\".\n\nIt can be several lines long.",
- master_volume: 60,
- eq: [88, 77, 55, 33, 40, 45, 70]
-};
-
-function save()
-{
- // Simulate an ajax request.
- $("#saving").show();
- setTimeout(function() {
- $("#target").empty().haml(form(song));
- setTimeout(function() {
- $("#saving").hide();
- }, 200);
- }, 200);
-}
-var timer;
-
-function form(song, live)
-{
- var notify;
- if (live) {
- notify = function(field) {
- if (timer) {
- clearTimeout(timer);
- }
- $("#inspect").empty().haml(inspect(song));
- timer = setTimeout(save, 5000);
- };
- }
-
- return ["form", {onsubmit:"return false"},
- form_builder({
- title:{type:"text"},
- description:{type:"textarea"},
- master_volume:{type:"slider",label:"Master Volume"},
- eq:{type:"eq"}
- },song,notify)
- ];
-}
-
-// Render the page
-$("body").haml(
- [".ui-widget-overlay"],
- ["p",{_:{position:"absolute"}},
- ["strong", "databinding haml-js demos"],
- " Go back ",
- ["a", {href:"?page=index&skin="+getparam("skin", "ui-lightness")}, "home"],
- "."
- ],
- ["table",{_:{position:"absolute","margin-top":"2em"}},
- ["tr",
- ["td", {style:"vertical-align:top;padding: 0 10px"},
- small_header({icon:"volume-on"}, "Data Bind Form"),
- form(song, true)
- ],
- ["td", {style:"vertical-align:top;padding: 0 10px;width:400px"},
- small_header({icon:"calendar"}, "Data in memory(Inspect)"),
- ["#inspect.ui-widget-content ui-corner-all", {style:"padding:0 10px"},
- inspect(song)
- ],
- ["p",
- button({icon:'refresh',callback:function(){
- clearTimeout(timer);
- save();
- }}, "Save")
- ]
- ],
- ["td", {style:"vertical-align:top;width:430px;padding: 0 10px;"},
- small_header({icon:"calculator"}, "Data on Server(Graphical)"),
- ["#saving.ui-widget ui-widget-content ui-corner-all ui-state-highlight", {style:"position:absolute;padding:5px 10px;display:none"},"Saving"],
- ["#target", form(song)]
- ]
- ]
- ]
-);
-
-});
View
43 examples/jquery-haml/pages/index.js
@@ -1,43 +0,0 @@
-function getparam(key, d) {
- var value = window.location.href.match(new RegExp("[?&]"+key+"=([^&#]*)"));
- return value ? value[1] : d;
-}
-
-var pages = {
- "index": "Index Page",
- "ui-demo": "jQuery UI samples",
- "databind": "DataBinding example",
- "markdown": "Markdown and variable replacement example"
-};
-
-var page_keys = ["index", "databind", "ui-demo", 'markdown'];
-
-var styles = ["dark-hive","sunny","ui-darkness","ui-lightness"];
-
-// Render the page
-$("body").haml(
- ["h1", "Welcome to haml-js"],
- ["p", "Feel free to look around. Here is an index of all pages:"],
- ["table.ui-widget.ui-widget-content.ui-corner-all",
- ["thead.ui-widget-header",
- ["tr",
- ["th"],
- $.map(styles, function(style){
- return [["th", style]];
- })
- ]
- ],
- ["tbody.ui-widget-content",
- $.map(page_keys, function(key){
- var a = [["tr",
- ["th", pages[key]],
- $.map(styles, function(style){
- return [["td",["a",{href:"?page="+key+"&skin=" + style}, "Go Here!"]]];
- })
- ]];
- return a;
- })
- ]
- ]
-);
-
View
61 examples/jquery-haml/pages/markdown.js
@@ -1,61 +0,0 @@
-
-
-$(function(){
-
-var data = {
- vars: {
- name: "Interested Visitor",
- os: navigator.vendor + " " + navigator.vendorSub + " " + navigator.platform,
- browser: navigator.userAgent
- },
- line: "# Welcome back {name},\n\nI see you're using *{browser}* on **{os}**."
-};
-
-function update_preview() {
- $('#line_preview').text(data.line).markdown(data.vars);
-}
-
-$('body').haml([
- ["h1", data.vars.name],
- ["dl",
- ["dt", data.vars.os],
- ['dd', data.vars.browser]
- ],
- ["table.ui-widget.ui-widget-content", {_:{"border-collapse":"collapse"}},
- ["tr.ui-widget-header.ui-corner-top", {_:{"font-size":"20px","line-height":"1.5em"}},
- ["th", "Markdown"],
- ["th", "Variables"],
- ["th", "Preview"]
- ],
- ["tr.ui-widget-content",
- ["td", {_:{width:"50%","vertical-align":"top"}},
- ["textarea.ui-widget-content ui-corner-all",
- {_:{width:"100%",height:"400px",border:0},$:{bind:["keyup", function() {
- data.line = this.value;
- update_preview();
- }]}},
- data.line
- ]
- ],
- ["td", {_:{"vertical-align":"top",padding:"0 10px"}},
- ["form", form_builder({
- name: {type:"text"},
- os: {type:"text"},
- browser: {type:"text"}
- }, data.vars, update_preview)]
- ],
- ["td#line_preview", {
- _:{width:"50%","vertical-align":"top",padding:"0 10px"},
- $:{markdown:[data.vars]}
- }, data.line]
- ]
- ],
- ["#ajax_description", {$:{
- load: ['README.markdown', null, function (responseText, textStatus, xhr) {
- $(this).html($.markdown(responseText));
- }]
- }}
- ]
-]);
-
-});
View
125 examples/jquery-haml/pages/ui-demo.js
@@ -1,125 +0,0 @@
-function getparam(key, d) {
- var value = window.location.href.match(new RegExp("[?&]"+key+"=([^&#]*)"));
- return value ? value[1] : d;
-}
-
-$(function(){
-// Render the page
-$("body").haml(
- [".ui-widget-overlay"],
- ["p",{_:{position:"absolute"}},
- ["strong", "jQuery-UI haml-js demos"],
- " Go back ",
- ["a", {href:"?page=index&skin="+getparam("skin", "ui-lightness")}, "home"],
- "."
- ],
- ["table",{_:{position:"absolute","margin-top":"2em"}},
- ["tr",
- ["td", {style:"vertical-align:top;padding: 0 10px"},
- ["p.ui-state-default.ui-corner-all.ui-helper-clearfix", {style: "padding:4px;" },
- ["span.ui-icon.ui-icon-volume-on", {style: "float:left; margin:-2px 5px 0 0;" }],
- "Master volume"
- ],
- ["div", {style: "width:260px; margin:15px;", $:{
- slider: [{
- value: 60
- }]
- }}],
- ["p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;" },
- ["span.ui-icon.ui-icon-signal", {style: "float:left; margin:-2px 5px 0 0;" }],
- "Graphic EQ"
- ],
- ["div", $.map([88, 77, 55, 33, 40, 45, 70], function (v) {
- return [["span", {
- _: {height: "120px", "float": "left", margin: "15px"},
- $: {slider:[{value:v,range:"min",animate:true,orientation:"vertical"}]}
- }]];
- })],
- ["p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;clear:both;" },
- ["span.ui-icon.ui-icon-calendar", {style: "float:left; margin:-2px 5px 0 0;" }],
- "Date Picker"
- ],
- "Date:",
- ["div", {$:{datepicker:[]}}]
- ],
- ["td", {style:"vertical-align:top;padding: 0 10px;width:400px"},
- ["p.ui-state-default.ui-corner-all", {style:"padding:4px;" },
- ["span.ui-icon.ui-icon-calendar", {style: "float:left; margin:-2px 5px 0 0;" }],
- "Accordion"
- ],
- ["div", {$:{accordion:[]}},
- ["h3", ["a",{href:"#"}, "Section 1"]],
- ["div",
- ["p", "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."]
- ],
- ["h3", ["a",{href:"#"}, "Section 2"]],
- ["div",
- ["p", "Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna."]
- ],
- ["h3", ["a",{href:"#"}, "Section 3"]],
- ["div",
- ["p", "Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui."],
- ["ul",
- ["li", "List item one"],
- ["li", "List item two"],
- ["li", "List item three"]
- ]
- ],
- ["h3", ["a",{href:"#"}, "Section 4"]],
- ["div",
- ["p", "Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est."],
- ["p", "Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."]
- ]
- ]
- ],
- ["td", {style:"vertical-align:top;width:430px;padding: 0 10px;"},
- ["p.ui-state-default.ui-corner-all", {style:"padding:4px;" },
- ["span.ui-icon.ui-icon-calculator", {style: "float:left; margin:-2px 5px 0 0;" }],
- "Tabs"
- ],
- ["div", {$:{tabs:[]}},
- ["ul",
- ["li", ["a",{href:"#tabs-1"}, "Nunc tincidunt"]],
- ["li", ["a",{href:"#tabs-2"}, "Proin dolor"]],
- ["li", ["a",{href:"#tabs-3"}, "Aenean lacinia"]]
- ],
- ["#tabs-1",
- ["p", "Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus."]
- ],
- ["#tabs-2",
- ["p", "Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus."]
- ],
- ["#tabs-3",
- ["p", "Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus."],
- ["p", "Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit."]
- ]
- ],
- ["p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;" },
- ["span.ui-icon.ui-icon-lightbulb", {style: "float:left; margin:-2px 5px 0 0;" }],
- "Highlight / Error"
- ],
- [".ui-widget",
- [".ui-state-highlight.ui-corner-all", {style: "padding: 0pt 0.7em; margin-top: 20px;"},
- ["p",
- ["span.ui-icon.ui-icon-info", {style: "float: left; margin-right: 0.3em;"} ],
- ["strong", "Hey!"],
- "Sample ui-state-highlight style."
- ]
- ]
- ],
- ["br"],
- [".ui-widget",
- [".ui-state-error.ui-corner-all", {style: "padding: 0pt 0.7em; margin-top: 20px;"},
- ["p",
- ["span.ui-icon.ui-icon-alert", {style: "float: left; margin-right: 0.3em;"} ],
- ["strong", "Alert:"],
- "Sample ui-state-error style."
- ]
- ]
- ]
- ]
- ]
- ]
-);
-
-});
View
0 examples/jquery-haml/js/jquery-1.3.2.min.js → examples/js/jquery-1.3.2.min.js
File renamed without changes.
View
0 ...ery-haml/js/jquery-ui-1.7.2.custom.min.js → examples/js/jquery-ui-1.7.2.custom.min.js
File renamed without changes.
View
113 examples/js/ui-demo.js
@@ -0,0 +1,113 @@
+$(function(){
+// Render the page
+$("body").haml(
+ [".ui-widget-overlay"],
+ ["%table",{css:{position:"absolute","margin-top":"2em"}},
+ ["%tr",
+ ["%td", {style:"vertical-align:top;padding: 0 10px"},
+ ["%p.ui-state-default.ui-corner-all.ui-helper-clearfix", {style: "padding:4px;" },
+ ["%span.ui-icon.ui-icon-volume-on", {style: "float:left; margin:-2px 5px 0 0;" }],
+ "Master volume"
+ ],
+ ["%div", {style: "width:260px; margin:15px;", $:{
+ slider: [{
+ value: 60
+ }]
+ }}],
+ ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;" },
+ ["%span.ui-icon.ui-icon-signal", {style: "float:left; margin:-2px 5px 0 0;" }],
+ "Graphic EQ"
+ ],
+ ["%div", $.map([88, 77, 55, 33, 40, 45, 70], function (v) {
+ return [["%span", {
+ css: {height: "120px", "float": "left", margin: "15px"},
+ $: {slider:[{value:v,range:"min",animate:true,orientation:"vertical"}]}
+ }]];
+ })],
+ ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;clear:both;" },
+ ["%span.ui-icon.ui-icon-calendar", {style: "float:left; margin:-2px 5px 0 0;" }],
+ "Date Picker"
+ ],
+ ["%div", {$:{datepicker:[]}}]
+ ],
+ ["%td", {style:"vertical-align:top;padding: 0 10px;width:400px"},
+ ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;" },
+ ["%span.ui-icon.ui-icon-calendar", {style: "float:left; margin:-2px 5px 0 0;" }],
+ "Accordion"
+ ],
+ ["%div", {$:{accordion:[]}},
+ ["%h3", ["%a",{href:"#"}, "Section 1"]],
+ ["%div",
+ ["%p", "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."]
+ ],
+ ["%h3", ["%a",{href:"#"}, "Section 2"]],
+ ["%div",
+ ["%p", "Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna."]
+ ],
+ ["%h3", ["%a",{href:"#"}, "Section 3"]],
+ ["%div",
+ ["%p", "Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui."],
+ ["%ul",
+ ["%li", "List item one"],
+ ["%li", "List item two"],
+ ["%li", "List item three"]
+ ]
+ ],
+ ["%h3", ["%a",{href:"#"}, "Section 4"]],
+ ["%div",
+ ["%p", "Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est."],
+ ["%p", "Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."]
+ ]
+ ]
+ ],
+ ["%td", {style:"vertical-align:top;width:430px;padding: 0 10px;"},
+ ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;" },
+ ["%span.ui-icon.ui-icon-calculator", {style: "float:left; margin:-2px 5px 0 0;" }],
+ "Tabs"
+ ],
+ ["%div", {$:{tabs:[]}},
+ ["%ul",
+ ["%li", ["%a",{href:"#tabs-1"}, "Nunc tincidunt"]],
+ ["%li", ["%a",{href:"#tabs-2"}, "Proin dolor"]],
+ ["%li", ["%a",{href:"#tabs-3"}, "Aenean lacinia"]]
+ ],
+ ["#tabs-1",
+ ["%p", "Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus."]
+ ],
+ ["#tabs-2",
+ ["%p", "Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus."]
+ ],
+ ["#tabs-3",
+ ["%p", "Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus."],
+ ["%p", "Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit."]
+ ]
+ ],
+ ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;" },
+ ["%span.ui-icon.ui-icon-lightbulb", {style: "float:left; margin:-2px 5px 0 0;" }],
+ "Highlight / Error"
+ ],
+ [".ui-widget",
+ [".ui-state-highlight.ui-corner-all", {style: "padding: 0pt 0.7em; margin-top: 20px;"},
+ ["%p",
+ ["%span.ui-icon.ui-icon-info", {style: "float: left; margin-right: 0.3em;"} ],
+ ["%strong", "Hey!"],
+ "Sample ui-state-highlight style."
+ ]
+ ]
+ ],
+ ["%br"],
+ [".ui-widget",
+ [".ui-state-error.ui-corner-all", {style: "padding: 0pt 0.7em; margin-top: 20px;"},
+ ["%p",
+ ["%span.ui-icon.ui-icon-alert", {style: "float: left; margin-right: 0.3em;"} ],
+ ["%strong", "Alert:"],
+ "Sample ui-state-error style."
+ ]
+ ]
+ ]
+ ]
+ ]
+ ]
+);
+
+});
View
0 examples/node-haml/README.markdown
No changes.
View
23 examples/node-haml/convert.js
@@ -1,23 +0,0 @@
-var Haml = require("../../lib/haml.js");
-
-function haml_to_html(haml) {
-
-}
-
-function onLoad() {
-
- p(Haml.parse(":foobar{param: false} stuff\n that\n needs\n to\n go"));
- p(Haml.parse("#head{id:'one'} Content\n more\n content"));
- p(Haml.parse(".button Content"));
- p(Haml.parse(".button#id{other: true} Content"));
- p(Haml.parse(".button.more.stuff Content"));
- p(Haml.parse("%div Content"));
- p(Haml.parse("%div{id: 'foo', rel: 'sample'} More Content"));
-
- node.fs.cat("haml/ui.haml").addCallback(function (text) {
- var haml = Haml.parse(text);
- p(haml_to_html(haml));
-// print(haml_to_html(haml));
- });
-}
-
View
20 examples/node-haml/haml/sample.haml
@@ -1,20 +0,0 @@
-#header
- %h1 Haml for the Browser!
- %img{src: "/images/logo.png", alt:"haml-js logo"}
- %script{type: "text/javascript"}
- alert("Cool Stuff");
-#main
- %p
- Welcome to my simple site.
- This is a multiline paragraph.
- %p{$:{click:[function(){this.hide();}]}}
- Hide Me!
-#sidebar
- %h2 Cool Links
- %ul
- %li <http://haml.hamptoncatlin.com/>
- %li <http://github.com/creationix/haml-js>
- %li <http://github.com/creationix/rack-php>
-#footer
- © 2009 Tim Caswell
-
View
563 examples/node-haml/haml/ui.haml
@@ -1,563 +0,0 @@
-#components.clearfix
- #getBookmarklet
- %p
- %span.icon
- %strong{$:{click:[function(){alert("Hello {\"}");}]}}
- New!
- Bring ThemeRoller into any page:
- %a{ href: "/themeroller/developertool/" }
- Get the ThemeRoller Firefox Bookmarklet!
- #compGroupA.clearfix
- %h2.demoHeaders
- Accordion
- #accordion.ui-accordion.ui-widget.ui-helper-reset{ role: "tablist" }
- %h3.ui-accordion-header.ui-helper-reset.ui-state-active.ui-corner-top{ tabindex: "0", "aria-expanded": "true", role: "tab" }
- %span.ui-icon.ui-icon-triangle-1-s
- %a{ tabindex: "-1", href: "#" }
- Section 1
- .ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom.ui-accordion-content-active{ role: "tabpanel", style: "height: 148px;" }
- %p
- Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
- %h3.ui-accordion-header.ui-helper-reset.ui-state-default.ui-corner-all{ tabindex: "-1", "aria-expanded": "false", role: "tab" }
- %span.ui-icon.ui-icon-triangle-1-e
- %a{ tabindex: "-1", href: "#" }
- Section 2
- .ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom{ role: "tabpanel", style: "height: 148px; display: none;" }
- %p
- Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
- %h3.ui-accordion-header.ui-helper-reset.ui-state-default.ui-corner-all{ tabindex: "-1", "aria-expanded": "false", role: "tab" }
- %span.ui-icon.ui-icon-triangle-1-e
- %a{ tabindex: "-1", href: "#" }
- Section 3
- .ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom{ role: "tabpanel", style: "height: 148px; display: none;" }
- %p
- Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- %ul
- %li
- List item one
- %li
- List item two
- %li
- List item three
- %h2.demoHeaders
- Tabs
- #tabs.ui-tabs.ui-widget.ui-widget-content.ui-corner-all
- %ul.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all
- %li.ui-state-default.ui-corner-top.ui-tabs-selected.ui-state-active
- %a{ href: "#tabs-1" }
- First
- %li.ui-state-default.ui-corner-top
- %a{ href: "#tabs-2" }
- Second
- %li.ui-state-default.ui-corner-top
- %a{ href: "#tabs-3" }
- Third
- #tabs-1.ui-tabs-panel.ui-widget-content.ui-corner-bottom
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- #tabs-2.ui-tabs-panel.ui-widget-content.ui-corner-bottom.ui-tabs-hide
- Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
- #tabs-3.ui-tabs-panel.ui-widget-content.ui-corner-bottom.ui-tabs-hide
- Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
- %h2.demoHeaders
- Dialog
- %p
- %a#dialog_link.ui-state-default.ui-corner-all{ href: "#" }
- %span.ui-icon.ui-icon-newwin
- Open Dialog
- %h2.demoHeaders
- Overlay and Shadow Classes
- .fakewindowcontain{ style: "padding: 1% 4%; overflow: hidden; position: relative; width: 96%; height: 200px;" }
- %p
- Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat.
- %p
- Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.
- %p
- Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.
- %p
- Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam.
- %p
- Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.
- %p
- Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.
- .ui-overlay
- .ui-widget-overlay
- .ui-widget-shadow.ui-corner-all{ style: "width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;" }
- .ui-widget.ui-widget-content.ui-corner-all{ style: "padding: 10px; position: absolute; width: 280px; height: 130px; left: 50px; top: 30px;" }
- %p
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- %h2.demoHeaders
- Framework Icons (content color preview)
- %ul#icons.ui-widget.ui-helper-clearfix
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-n" }
- %span.ui-icon.ui-icon-carat-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-ne" }
- %span.ui-icon.ui-icon-carat-1-ne
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-e" }
- %span.ui-icon.ui-icon-carat-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-se" }
- %span.ui-icon.ui-icon-carat-1-se
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-s" }
- %span.ui-icon.ui-icon-carat-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-sw" }
- %span.ui-icon.ui-icon-carat-1-sw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-w" }
- %span.ui-icon.ui-icon-carat-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-nw" }
- %span.ui-icon.ui-icon-carat-1-nw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-2-n-s" }
- %span.ui-icon.ui-icon-carat-2-n-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-2-e-w" }
- %span.ui-icon.ui-icon-carat-2-e-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-n" }
- %span.ui-icon.ui-icon-triangle-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-ne" }
- %span.ui-icon.ui-icon-triangle-1-ne
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-e" }
- %span.ui-icon.ui-icon-triangle-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-se" }
- %span.ui-icon.ui-icon-triangle-1-se
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-s" }
- %span.ui-icon.ui-icon-triangle-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-sw" }
- %span.ui-icon.ui-icon-triangle-1-sw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-w" }
- %span.ui-icon.ui-icon-triangle-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-nw" }
- %span.ui-icon.ui-icon-triangle-1-nw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-2-n-s" }
- %span.ui-icon.ui-icon-triangle-2-n-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-2-e-w" }
- %span.ui-icon.ui-icon-triangle-2-e-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-n" }
- %span.ui-icon.ui-icon-arrow-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-ne" }
- %span.ui-icon.ui-icon-arrow-1-ne
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-e" }
- %span.ui-icon.ui-icon-arrow-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-se" }
- %span.ui-icon.ui-icon-arrow-1-se
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-s" }
- %span.ui-icon.ui-icon-arrow-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-sw" }
- %span.ui-icon.ui-icon-arrow-1-sw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-w" }
- %span.ui-icon.ui-icon-arrow-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-nw" }
- %span.ui-icon.ui-icon-arrow-1-nw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-2-n-s" }
- %span.ui-icon.ui-icon-arrow-2-n-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-2-ne-sw" }
- %span.ui-icon.ui-icon-arrow-2-ne-sw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-2-e-w" }
- %span.ui-icon.ui-icon-arrow-2-e-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-2-se-nw" }
- %span.ui-icon.ui-icon-arrow-2-se-nw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowstop-1-n" }
- %span.ui-icon.ui-icon-arrowstop-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowstop-1-e" }
- %span.ui-icon.ui-icon-arrowstop-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowstop-1-s" }
- %span.ui-icon.ui-icon-arrowstop-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowstop-1-w" }
- %span.ui-icon.ui-icon-arrowstop-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-n" }
- %span.ui-icon.ui-icon-arrowthick-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-ne" }
- %span.ui-icon.ui-icon-arrowthick-1-ne
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-e" }
- %span.ui-icon.ui-icon-arrowthick-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-se" }
- %span.ui-icon.ui-icon-arrowthick-1-se
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-s" }
- %span.ui-icon.ui-icon-arrowthick-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-sw" }
- %span.ui-icon.ui-icon-arrowthick-1-sw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-w" }
- %span.ui-icon.ui-icon-arrowthick-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-nw" }
- %span.ui-icon.ui-icon-arrowthick-1-nw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-2-n-s" }
- %span.ui-icon.ui-icon-arrowthick-2-n-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-2-ne-sw" }
- %span.ui-icon.ui-icon-arrowthick-2-ne-sw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-2-e-w" }
- %span.ui-icon.ui-icon-arrowthick-2-e-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-2-se-nw" }
- %span.ui-icon.ui-icon-arrowthick-2-se-nw
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthickstop-1-n" }
- %span.ui-icon.ui-icon-arrowthickstop-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthickstop-1-e" }
- %span.ui-icon.ui-icon-arrowthickstop-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthickstop-1-s" }
- %span.ui-icon.ui-icon-arrowthickstop-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthickstop-1-w" }
- %span.ui-icon.ui-icon-arrowthickstop-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturnthick-1-w" }
- %span.ui-icon.ui-icon-arrowreturnthick-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturnthick-1-n" }
- %span.ui-icon.ui-icon-arrowreturnthick-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturnthick-1-e" }
- %span.ui-icon.ui-icon-arrowreturnthick-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturnthick-1-s" }
- %span.ui-icon.ui-icon-arrowreturnthick-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturn-1-w" }
- %span.ui-icon.ui-icon-arrowreturn-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturn-1-n" }
- %span.ui-icon.ui-icon-arrowreturn-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturn-1-e" }
- %span.ui-icon.ui-icon-arrowreturn-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturn-1-s" }
- %span.ui-icon.ui-icon-arrowreturn-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowrefresh-1-w" }
- %span.ui-icon.ui-icon-arrowrefresh-1-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowrefresh-1-n" }
- %span.ui-icon.ui-icon-arrowrefresh-1-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowrefresh-1-e" }
- %span.ui-icon.ui-icon-arrowrefresh-1-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowrefresh-1-s" }
- %span.ui-icon.ui-icon-arrowrefresh-1-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-4" }
- %span.ui-icon.ui-icon-arrow-4
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-4-diag" }
- %span.ui-icon.ui-icon-arrow-4-diag
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-extlink" }
- %span.ui-icon.ui-icon-extlink
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-newwin" }
- %span.ui-icon.ui-icon-newwin
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-refresh" }
- %span.ui-icon.ui-icon-refresh
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-shuffle" }
- %span.ui-icon.ui-icon-shuffle
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-transfer-e-w" }
- %span.ui-icon.ui-icon-transfer-e-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-transferthick-e-w" }
- %span.ui-icon.ui-icon-transferthick-e-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-folder-collapsed" }
- %span.ui-icon.ui-icon-folder-collapsed
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-folder-open" }
- %span.ui-icon.ui-icon-folder-open
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-document" }
- %span.ui-icon.ui-icon-document
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-document-b" }
- %span.ui-icon.ui-icon-document-b
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-note" }
- %span.ui-icon.ui-icon-note
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-mail-closed" }
- %span.ui-icon.ui-icon-mail-closed
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-mail-open" }
- %span.ui-icon.ui-icon-mail-open
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-suitcase" }
- %span.ui-icon.ui-icon-suitcase
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-comment" }
- %span.ui-icon.ui-icon-comment
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-person" }
- %span.ui-icon.ui-icon-person
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-print" }
- %span.ui-icon.ui-icon-print
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-trash" }
- %span.ui-icon.ui-icon-trash
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-locked" }
- %span.ui-icon.ui-icon-locked
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-unlocked" }
- %span.ui-icon.ui-icon-unlocked
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-bookmark" }
- %span.ui-icon.ui-icon-bookmark
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-tag" }
- %span.ui-icon.ui-icon-tag
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-home" }
- %span.ui-icon.ui-icon-home
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-flag" }
- %span.ui-icon.ui-icon-flag
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-calculator" }
- %span.ui-icon.ui-icon-calculator
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-cart" }
- %span.ui-icon.ui-icon-cart
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-pencil" }
- %span.ui-icon.ui-icon-pencil
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-clock" }
- %span.ui-icon.ui-icon-clock
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-disk" }
- %span.ui-icon.ui-icon-disk
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-calendar" }
- %span.ui-icon.ui-icon-calendar
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-zoomin" }
- %span.ui-icon.ui-icon-zoomin
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-zoomout" }
- %span.ui-icon.ui-icon-zoomout
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-search" }
- %span.ui-icon.ui-icon-search
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-wrench" }
- %span.ui-icon.ui-icon-wrench
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-gear" }
- %span.ui-icon.ui-icon-gear
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-heart" }
- %span.ui-icon.ui-icon-heart
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-star" }
- %span.ui-icon.ui-icon-star
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-link" }
- %span.ui-icon.ui-icon-link
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-cancel" }
- %span.ui-icon.ui-icon-cancel
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-plus" }
- %span.ui-icon.ui-icon-plus
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-plusthick" }
- %span.ui-icon.ui-icon-plusthick
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-minus" }
- %span.ui-icon.ui-icon-minus
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-minusthick" }
- %span.ui-icon.ui-icon-minusthick
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-close" }
- %span.ui-icon.ui-icon-close
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-closethick" }
- %span.ui-icon.ui-icon-closethick
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-key" }
- %span.ui-icon.ui-icon-key
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-lightbulb" }
- %span.ui-icon.ui-icon-lightbulb
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-scissors" }
- %span.ui-icon.ui-icon-scissors
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-clipboard" }
- %span.ui-icon.ui-icon-clipboard
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-copy" }
- %span.ui-icon.ui-icon-copy
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-contact" }
- %span.ui-icon.ui-icon-contact
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-image" }
- %span.ui-icon.ui-icon-image
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-video" }
- %span.ui-icon.ui-icon-video
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-script" }
- %span.ui-icon.ui-icon-script
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-alert" }
- %span.ui-icon.ui-icon-alert
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-info" }
- %span.ui-icon.ui-icon-info
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-notice" }
- %span.ui-icon.ui-icon-notice
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-help" }
- %span.ui-icon.ui-icon-help
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-check" }
- %span.ui-icon.ui-icon-check
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-bullet" }
- %span.ui-icon.ui-icon-bullet
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-radio-off" }
- %span.ui-icon.ui-icon-radio-off
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-radio-on" }
- %span.ui-icon.ui-icon-radio-on
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-pin-w" }
- %span.ui-icon.ui-icon-pin-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-pin-s" }
- %span.ui-icon.ui-icon-pin-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-play" }
- %span.ui-icon.ui-icon-play
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-pause" }
- %span.ui-icon.ui-icon-pause
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-seek-next" }
- %span.ui-icon.ui-icon-seek-next
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-seek-prev" }
- %span.ui-icon.ui-icon-seek-prev
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-seek-end" }
- %span.ui-icon.ui-icon-seek-end
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-seek-first" }
- %span.ui-icon.ui-icon-seek-first
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-stop" }
- %span.ui-icon.ui-icon-stop
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-eject" }
- %span.ui-icon.ui-icon-eject
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-volume-off" }
- %span.ui-icon.ui-icon-volume-off
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-volume-on" }
- %span.ui-icon.ui-icon-volume-on
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-power" }
- %span.ui-icon.ui-icon-power
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-signal-diag" }
- %span.ui-icon.ui-icon-signal-diag
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-signal" }
- %span.ui-icon.ui-icon-signal
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-battery-0" }
- %span.ui-icon.ui-icon-battery-0
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-battery-1" }
- %span.ui-icon.ui-icon-battery-1
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-battery-2" }
- %span.ui-icon.ui-icon-battery-2
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-battery-3" }
- %span.ui-icon.ui-icon-battery-3
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-plus" }
- %span.ui-icon.ui-icon-circle-plus
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-minus" }
- %span.ui-icon.ui-icon-circle-minus
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-close" }
- %span.ui-icon.ui-icon-circle-close
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-triangle-e" }
- %span.ui-icon.ui-icon-circle-triangle-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-triangle-s" }
- %span.ui-icon.ui-icon-circle-triangle-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-triangle-w" }
- %span.ui-icon.ui-icon-circle-triangle-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-triangle-n" }
- %span.ui-icon.ui-icon-circle-triangle-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-arrow-e" }
- %span.ui-icon.ui-icon-circle-arrow-e
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-arrow-s" }
- %span.ui-icon.ui-icon-circle-arrow-s
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-arrow-w" }
- %span.ui-icon.ui-icon-circle-arrow-w
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-arrow-n" }
- %span.ui-icon.ui-icon-circle-arrow-n
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-zoomin" }
- %span.ui-icon.ui-icon-circle-zoomin
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-zoomout" }
- %span.ui-icon.ui-icon-circle-zoomout
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-check" }
- %span.ui-icon.ui-icon-circle-check
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circlesmall-plus" }
- %span.ui-icon.ui-icon-circlesmall-plus
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circlesmall-minus" }
- %span.ui-icon.ui-icon-circlesmall-minus
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circlesmall-close" }
- %span.ui-icon.ui-icon-circlesmall-close
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-squaresmall-plus" }
- %span.ui-icon.ui-icon-squaresmall-plus
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-squaresmall-minus" }
- %span.ui-icon.ui-icon-squaresmall-minus
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-squaresmall-close" }
- %span.ui-icon.ui-icon-squaresmall-close
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-dotted-vertical" }
- %span.ui-icon.ui-icon-grip-dotted-vertical
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-dotted-horizontal" }
- %span.ui-icon.ui-icon-grip-dotted-horizontal
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-solid-vertical" }
- %span.ui-icon.ui-icon-grip-solid-vertical
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-solid-horizontal" }
- %span.ui-icon.ui-icon-grip-solid-horizontal
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-gripsmall-diagonal-se" }
- %span.ui-icon.ui-icon-gripsmall-diagonal-se
- %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-diagonal-se" }
- %span.ui-icon.ui-icon-grip-diagonal-se
- #compGroupB.clearfix
- %h2.demoHeaders
- Slider
- #slider.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all
- .ui-slider-range.ui-widget-header{ style: "left: 17%; width: 50%;" }
- %a.ui-slider-handle.ui-state-default.ui-corner-all{ style: "left: 17%;", href: "#" }
- %a.ui-slider-handle.ui-state-default.ui-corner-all{ style: "left: 67%;", href: "#" }
- %h2.demoHeaders
- Datepicker
- #datepicker.hasDatepicker
- .ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all
- .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
- %a.ui-datepicker-prev.ui-corner-all{ onclick: "DP_jQuery.datepicker._adjustDate('#datepicker', -1, 'M');", title: "Prev" }
- %span.ui-icon.ui-icon-circle-triangle-w
- Prev
- %a.ui-datepicker-next.ui-corner-all{ onclick: "DP_jQuery.datepicker._adjustDate('#datepicker', +1, 'M');", title: "Next" }
- %span.ui-icon.ui-icon-circle-triangle-e
- Next
- .ui-datepicker-title
- %span.ui-datepicker-month
- July
- %span.ui-datepicker-year
- 2009
- %table.ui-datepicker-calendar
- %thead
- %tr
- %th.ui-datepicker-week-end
- %span{ title: "Sunday" }
- Su
- %th
- %span{ title: "Monday" }
- Mo
- %th
- %span{ title: "Tuesday" }
- Tu
- %th
- %span{ title: "Wednesday" }
- We
- %th
- %span{ title: "Thursday" }
- Th