saurabh
/
orbit-basic
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove js from html

This commit is contained in:
chris2tof 2011-12-05 10:36:25 +08:00
parent 962bf03af2
commit 26b49dcf02
25 changed files with 101 additions and 1206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/page_edit.js Normal file
View File

@ -0,0 +1,4 @@
$("div.editable").live("mouseenter mouseleave",
function (event) {
$(this).children('.edit_link').toggle();
});

8
app/assets/javascripts/translation_page.js Normal file
View File

@ -0,0 +1,8 @@
$('div a.hide').live( "click", function(){
$(this).parent().next().hide();
$(this).replaceWith("<a href='#' class='show'><%= t(:show) %></a>");
});
$('div a.show').live( "click", function(){
$(this).parent().next().show();
$(this).replaceWith("<a href='#' class='hide'><%= t(:hide) %></a>");
});

10
app/assets/javascripts/user_attribute_form.js Normal file
View File

@ -0,0 +1,10 @@
var new_one = $('fieldset #new_one').clone();
$('fieldset #new_one').remove();
$('fieldset a.remove').live( "click", function(){
$(this).parent().remove();
});
$('fieldset a.add').click(function(){
new_one.clone().appendTo( $('fieldset') );
})

33
app/assets/javascripts/user_attribute_model_form.js Normal file
View File

@ -0,0 +1,33 @@
$('#attributes_block a.delete').live('click', function(){
$(this).parent().parent().parent().remove();
});
$('#attributes_block a.add').click(function(){
$('#attributes').append("<%= escape_javascript(render(:partial => 'admin/user_attribute_models/attribute_model', :object => @user_attribute_model.attribute_models.build)) %>");
});
$('#attributes_block a.remove_existing_record').click(function(){
$(this).next('.should_destroy').attr('value', 1);
$(this).parent().parent().hide();
});
$('#attributes_block a.change_built_in').click(function(){
$(this).parent().toggleClass('disable');
var $am = $(this).next('.built_in_state')
$am.attr('value', ($am.attr('value') == "false") ? "true" : "false");
});
$('.select_mulitlingual input').live('click', function(){
$(this).next().attr('value', this.checked);
});
$('.select_type select').live('change', function(){
if(this.value == 'select')
{
$(this).next().show();
}
else
{
$(this).next().hide();
}
});

6
app/assets/javascripts/user_form.js Normal file
View File

@ -0,0 +1,6 @@
$(document).ready(function(){
$('#user_active_role').change(function(){
$('#role_models .roles_block').hide();
$('#'+this.value+'_block').toggle();
});
});

12
app/helpers/admin/item_helper.rb
View File

@ -23,4 +23,16 @@ module Admin::ItemHelper
ret.html_safe ret.html_safe
end end
def render_children(parent)
if children = parent.children
ret = ''
ret << "<ul>"
children.each do |child|
ret << render_node_and_children(child)
end
ret << "</ul>"
ret
end
end
end end

12
app/helpers/application_helper.rb
View File

@ -49,16 +49,4 @@ module ApplicationHelper
end end
end end
def render_children(parent)
if children = parent.children
ret = ''
ret << "<ul>"
children.each do |child|
ret << render_node_and_children(child)
end
ret << "</ul>"
ret
end
end
end end

20
app/views/admin/items/index.html.erb
View File

@ -1,25 +1,5 @@
<% content_for :sidebar do %> <% content_for :sidebar do %>
<%= render 'admin/items/site_map_left_bar' %> <%= render 'admin/items/site_map_left_bar' %>
<% end -%> <% end -%>
<% content_for :page_specific_javascript do %>
<!-- <script type="text/javascript" charset="utf-8">
$('a.sidebar_link').live( "click", function(){
$(this).removeClass('sidebar_link');
$('.sidebar_no_link').addClass('sidebar_link');
$('.sidebar_no_link').removeClass('sidebar_no_link');
$(this).addClass('sidebar_no_link');
});
</script> -->
<% end -%>
<% content_for :page_specific_css do %>
<!-- <style type="text/css">
.sidebar_no_link {
pointer-events: none;
cursor: default;
}
</style> -->
<% end %>
<%= render "admin/#{@item._type.downcase.pluralize}/show" %> <%= render "admin/#{@item._type.downcase.pluralize}/show" %>

7
app/views/admin/pages/_show.html.erb
View File

@ -3,10 +3,5 @@
<%= parse_page_edit(@item).html_safe %> <%= parse_page_edit(@item).html_safe %>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<script type="text/javascript" charset="utf-8"> <%= javascript_include_tag "page_edit" %>
$("div.editable").live("mouseenter mouseleave",
function (event) {
$(this).children('.edit_link').toggle();
});
</script>
<% end -%> <% end -%>

14
app/views/admin/translations/index.html.erb
View File

@ -62,18 +62,6 @@
</fieldset> </fieldset>
<% end %> <% end %>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<script type="text/javascript" charset="utf-8"> <%= javascript_include_tag "translation_page" %>
$('div a.hide').live( "click", function(){
$(this).parent().next().hide();
$(this).replaceWith("<a href='#' class='show'><%= t(:show) %></a>");
});
$('div a.show').live( "click", function(){
$(this).parent().next().show();
$(this).replaceWith("<a href='#' class='hide'><%= t(:hide) %></a>");
});
</script>
<% end -%> <% end -%>

38
app/views/admin/user_attribute_models/_form.html.erb
View File

@ -53,41 +53,5 @@
</div> </div>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<script type="text/javascript" charset="utf-8"> <%= javascript_include_tag "user_attribute_model_form" %>
$('#attributes_block a.delete').live('click', function(){
$(this).parent().parent().parent().remove();
});
$('#attributes_block a.add').click(function(){
$('#attributes').append("<%= escape_javascript(render(:partial => 'admin/user_attribute_models/attribute_model', :object => @user_attribute_model.attribute_models.build)) %>");
});
$('#attributes_block a.remove_existing_record').click(function(){
$(this).next('.should_destroy').attr('value', 1);
$(this).parent().parent().hide();
});
$('#attributes_block a.change_built_in').click(function(){
$(this).parent().toggleClass('disable');
var $am = $(this).next('.built_in_state')
$am.attr('value', ($am.attr('value') == "false") ? "true" : "false");
});
$('.select_mulitlingual input').live('click', function(){
$(this).next().attr('value', this.checked);
});
$('.select_type select').live('change', function(){
if(this.value == 'select')
{
$(this).next().show();
}
else
{
$(this).next().hide();
}
});
</script>
<% end -%> <% end -%>

53
app/views/admin/user_attributes/_form.html.erb
View File

@ -1,43 +1,32 @@
<p> <p>
<%= f.label :name %> <%= f.label :name %>
<%= f.text_field :name %> <%= f.text_field :name %>
</p> </p>
<fieldset> <fieldset>
<% @user_attribute.attrs.each_with_index do |attr, i| %> <% @user_attribute.attrs.each_with_index do |attr, i| %>
<p> <p>
<label><%= attr["key"] %></label> <label><%= attr["key"] %></label>
<%= hidden_field_tag "user_attribute[attrs][][key]", attr["key"] %> <%= hidden_field_tag "user_attribute[attrs][][key]", attr["key"] %>
<%= text_field_tag "user_attribute[attrs][][name]", attr["name"] %> <%= text_field_tag "user_attribute[attrs][][name]", attr["name"] %>
<%= select_tag "user_attribute[attrs][][type]", options_for_select(["text_field", "select"], attr["type"]) %> <%= select_tag "user_attribute[attrs][][type]", options_for_select(["text_field", "select"], attr["type"]) %>
<a href="#" class="remove">(remove)</a> <a href="#" class="remove">(remove)</a>
</p> </p>
<% end -%> <% end -%>
<p id="newone"> <p id="newone">
<label>Key</label> <label>Key</label>
<%= text_field_tag "user_attribute[attrs][][key]", "" %> <%= text_field_tag "user_attribute[attrs][][key]", "" %>
<label>Name</label> <label>Name</label>
<%= text_field_tag "user_attribute[attrs][][name]", "" %> <%= text_field_tag "user_attribute[attrs][][name]", "" %>
<%= select_tag "user_attribute[attrs][][type]", options_for_select(["text_field"], "") %> <%= select_tag "user_attribute[attrs][][type]", options_for_select(["text_field"], "") %>
<a href="#" class="remove">(remove)</a> <a href="#" class="remove">(remove)</a>
</p> </p>
<a href="#" class="add">(add)</a> <a href="#" class="add">(add)</a>
</fieldset> </fieldset>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<script type="text/javascript" charset="utf-8"> <%= javascript_include_tag "user_attribute_form" %>
var newone = $('fieldset #newone').clone();
$('fieldset #newone').remove();
$('fieldset a.remove').live( "click", function(){
$(this).parent().remove();
});
$('fieldset a.add').click(function(){
newone.clone().appendTo( $('fieldset') );
})
</script>
<% end -%> <% end -%>

9
app/views/admin/users/_form.html.erb
View File

@ -36,12 +36,5 @@
</div> </div>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<script type="text/javascript" charset="utf-8"> <%= javascript_include_tag "user_form" %>
$(document).ready(function(){
$('#user_active_role').change(function(){
$('#role_models .roles_block').hide();
$('#'+this.value+'_block').toggle();
});
});
</script>
<% end -%> <% end -%>

92
public/demo/comments_1.html
View File

@ -1,92 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{margin:0 0 1.5em 0;position:relative;}
.comments .meta{margin-bottom:.5em;}
.comments .meta li{
margin:0;
display:inline;
color:#777;
}
.comments .meta .author{
font-size:14px;
font-weight:bold;
}
.comments .meta img{
position:absolute;
left:0;
top:2.5em;
z-index:100;
border:1px solid #ccc;
}
.comments .body{
border-top:1px solid #ccc;
padding-top:1em;
padding-left:70px;
}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<ol class="comments">
<li>
<ul class="meta">
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
<li class="author"><a href="#">Author's name</a></li>
<li class="date">posted on September 23rd, 2009</li>
</ul>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
</li>
<li>
<ul class="meta">
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
<li class="author"><a href="#">Author's name</a></li>
<li class="date">posted on September 23rd, 2009</li>
</ul>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
</li>
<li>
<ul class="meta">
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
<li class="author"><a href="#">Author's name</a></li>
<li class="date">posted on September 23rd, 2009</li>
</ul>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
</li>
</ol>
<!-- COPY END HERE -->
</div>
</div>

417
public/demo/demo.html
View File

@ -1,417 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Easy front-end framework</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<link rel="stylesheet" href="../stylesheets/easyprint.css" media="print" />
<script type="text/javascript" src="../javascripts/jquery.js"></script>
<script type="text/javascript" src="../javascripts/easy.js"></script>
<script type="text/javascript" src="../javascripts/application.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Easy front-end framework</h1>
<ul id="nav">
<li><a href="http://easyframework.com">Home</a></li>
<li><a href="http://easyframework.com/overview.php">Overview</a>
<ul>
<li><a href="#">Sub-navigation item</a></li>
<li><a href="#">Sub-navigation item</a></li>
<li><a href="#">Sub-navigation item</a></li>
<li><a href="#">Sub-navigation item</a></li>
</ul>
</li>
<li><a href="http://easyframework.com/documentation.php">Documentation</a>
<ul>
<li><a href="#">Sub-navigation item</a></li>
<li><a href="#">Sub-navigation item</a></li>
<li><a href="#">Sub-navigation item</a></li>
<li><a href="#">Sub-navigation item</a></li>
</ul>
</li>
<li><a href="http://easyframework.com/demo.php">Demo</a></li>
<li><a href="http://easyframework.com/contact.php">Contact</a></li>
</ul>
</div>
<div class="content">
<div class="main">
<h1>H1 Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis dui nec eros varius
ac molestie ante malesuada. Duis sed justo et sem hendrerit suscipit et ac eros. </p>
<p><strong>Aliquam suscipit</strong> sodales sapien eu egestas. Nulla laoreet sem ac diam
suscipit condimentum. Vestibulum tempor odio iaculis enim cursus pharetra faucibus dui lobortis.
Pellentesque at nisl nibh. </p>
<blockquote> Aliquam hendrerit accumsan porta. Nam vehicula eleifend sem eu pellentesque. </blockquote>
<p class="left"><a href="../images/img_logo1.jpg" title="Click for larger image" class="tooltip popup"><img src="../images/img_logo2.jpg" alt="" /></a></p>
<p>Donec aliquam cursus tortor, faucibus lobortis convallis. Integer pharetra consequat felis, id malesuada metus vulputate a. Nunc ut magna massa. Donec commodo odio a ligula varius id vulputate nulla tristique. Suspendisse et egestas dolor. Aliquam hendrerit accumsan porta. Nam vehicula eleifend sem eu pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in lacus nec justo porta congue id vel magna. </p>
<pre>pre{
padding:1em 2em;
background:#f1f1f1;
}</pre>
<table cellpadding="0" cellspacing="0">
<caption>Table caption</caption>
<thead>
<tr>
<th>Table header</th>
<th>Table header</th>
<th>Table header</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table footer</td>
<td>Table footer</td>
<td>Table footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table data</td>
<td>Table data</td>
<td>Table data</td>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
<td>Table data</td>
</tr>
</tbody>
</table>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui.
Nulla viverra bibendum nisi, sit amet ullamcorper nibh euismod at. </p>
<h2>H2 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<ul>
<li>Lorem ipsum dolor sit amet
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Class aptent taciti sociosqu</li>
<li>Ad litora torquent per </li>
</ul>
</li>
<li>Consectetur adipiscing elit</li>
<li>Class aptent taciti sociosqu</li>
<li>Ad litora torquent per </li>
</ul>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Integer a orci orci. Morbi dignissim pharetra nulla, vitae sollicitudin sapien tristique in.
Donec quis nulla magna, ac mattis ligula. Ut rhoncus porttitor magna quis pulvinar. </p>
<p><a href="#">Read more...</a></p>
<ol>
<li>Lorem ipsum dolor sit amet
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Class aptent taciti sociosqu</li>
<li>Ad litora torquent per </li>
</ol>
</li>
<li>Consectetur adipiscing elit</li>
<li>Class aptent taciti sociosqu</li>
<li>Ad litora torquent per </li>
</ol>
<p>Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo, et commodo odio posuere sed. Morbi a erat est.</p>
<dl>
<dt>Consectetur adipiscing elit</dt>
<dd>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia</dd>
<dt>Ad litora torquent per</dt>
<dd>Ut rhoncus porttitor magna quis pulvinar. Nullam in dui ac tellus consequat iaculis.</dd>
</dl>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p class="pullquote">Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo.</p>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
<p class="boxout">Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
<div class="cols">
<div class="col first">
<h3>Column 1</h3>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
</div>
<div class="col">
<h3>Column 2</h3>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
</div>
</div>
<div class="cols cols3">
<div class="col first">
<h3>Column 1</h3>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
</div>
<div class="col">
<h3>Column 2</h3>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
</div>
<div class="col">
<h3>Column 3</h3>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
</div>
</div>
<div class="cols cols4">
<div class="col first">
<h2>Column 1</h2>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
</div>
<div class="col">
<h3>Column 2</h3>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
</div>
<div class="col">
<h3>Column 3</h3>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
</div>
<div class="col">
<h3>Column 4</h3>
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
sit amet ullamcorper nibh euismod at. </p>
<p>Integer vehicula tempor metus eu dignissim.
Curabitur lobortis quam vestibulum risus sodales mattis.
Nulla lacinia.</p>
</div>
</div>
<h4>H4 Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<h5>H5 Title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<h6>H6 Title</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<h2>Form</h2>
<p class="note">This is the style for notifications.</p>
<p class="success">This is the style for successful actions.</p>
<p class="error">This is the style for errors!</p>
<form id="contactForm" action="/" method="post">
<fieldset>
<legend>Basic options</legend>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" class="field required" />
</div>
<div>
<label for="url">URL</label>
<input type="text" name="url" id="url" size="30" class="field required url" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" class="field required email" />
</div>
<div>
<label for="phonenumber">Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber" size="30" class="field" />
</div>
<div>
<label for="city">City</label>
<select name="city" id="city" class="select">
<option>New York</option>
<option>London</option>
<option>Paris</option>
<option>Tokio</option>
<option>Sydney</option>
</select>
</div>
<div>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="area"></textarea>
</div>
</fieldset>
<fieldset>
<legend>More options...</legend>
<p>Following text field uses label as a default value.</p>
<div>
<label for="location">Where do you live?</label>
<input type="text" name="location" id="location" size="30" class="field label" />
</div>
</fieldset>
<fieldset>
<legend>... and more options</legend>
<div>
<label><input type="radio" name="radio" value="1" checked="checked" class="radio" /> Value 1</label>
<label><input type="radio" name="radio" value="2" class="radio" /> Value 2</label>
<label><input type="radio" name="radio" value="3" class="radio" /> Value 3</label>
</div>
<div>
<label><input type="checkbox" name="checkbox" value="1" checked="checked" class="required" /> Checkbox here</label>
</div>
</fieldset>
<div class="submit"><button type="submit">Submit</button></div>
</form>
</div>
<div class="secondary">
<h2>Interactive Elements</h2>
<p>This will display <a href="http://easyframework.com" class="tooltip" title="Regular Tooltip">regular tooltip.</a></p>
<p>This will display an <a href="http://easyframework.com/images/img_logo1.jpg" class="popup">image in a popup box</a>.</p>
<p>This will open a <a href="http://easyframework.com" class="popup">URL in a popup box</a> using <strong>default settings</strong>.</p>
<p>This will open a <a href="http://easyframework.com" class="popup" rel="width:800;height:300">URL in a popup box</a> using <strong>custom settings</strong> for width and height.</p>
<p>This will open a <a href="http://www.youtube.com/v/cnvkeJds7zc&amp;hl=en_US&amp;fs" class="popup flash" rel="width:560;height:340">Flash movie in a popup box</a>.</p>
<p>This will display <a href="#header" class="popup">any element from the page in a popup box</a>.</p>
<p class="toggle">Click on this to show/hide <strong>next sibling</strong>.</p>
<p><em>This is the NEXT sibling!</em></p>
<p><em>This is the PREVIOUS sibling!</em></p>
<p class="toggle prev">Click on this to show/hide <strong>previous sibling</strong>.</p>
<p>Click on this to show/hide <a href="#toggler" title="Show and hide element with id=toggler" class="toggle id tooltip">element based on ID</a>.
It can be placed anywhere on the page. (This works only on anchor elements)</p>
<p id="toggler"><em>This is the element with ID "toggler"!</em></p>
<p>Click on this link to <a href="#footer" class="jump">jump to the footer</a></p>
<ul class="rotate">
<li>Built-in rotation script...</li>
<li>...rotates child nodes of any element!</li>
</ul>
<h2>Styled Elements</h2>
<p>
This is <abbr title="title">abbreviation</abbr><br />
This is <strong>strong</strong><br />
This is <em>emphasis</em><br />
This is <b>bold text</b><br />
This is <i>italic text</i><br />
This is <cite>cite</cite><br />
This is <code>code sample</code><br />
This is <small>small text</small><br />
This is <big>small text</big><br />
This is <del>deleted text</del><br />
This is <ins>inserted text</ins><br />
This is <dfn>defining instance</dfn><br />
This is <kbd>user input</kbd><br />
This is <samp>sample output</samp><br />
This is <q>inline quote</q> <br />
These are <sup>superscript</sup> and <sub>subscript</sub><br />
This is <var>variable or program argument</var>
</p>
</div>
</div>
<div id="footer">
<p>&copy; Alen Grakalic Easy front-end framework (Read <a href="http://easyframework.com/license.php">license agreement</a>)<br/>
Made with <a href="http://easyframework.com">Easy</a></p>
</div>
</div>
</body>
</html>

89
public/demo/form_1.html
View File

@ -1,89 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
.form fieldset{border:none;margin:0;padding:0;}
.form legend{display:none;}
.form div{clear:both;margin:.5em 0;}
.form label{
float:left;
width:150px;
}
.form .field, .form .area{
width:250px;
padding:3px;
}
.form select{padding:3px;width:256px;}
.form .submit{margin-left:150px;}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<form action="/" method="post" class="form">
<fieldset><legend>Contact form</legend>
<div>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" size="30" class="field required" />
</div>
<div>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" size="30" class="field" />
</div>
<div>
<label for="address">Address</label>
<input type="text" name="address" id="address" size="30" class="field" />
</div>
<div>
<label for="url">URL</label>
<input type="text" name="url" id="url" size="30" class="field required url" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" class="field required email" />
</div>
<div>
<label for="phonenumber">Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber" size="30" class="field" />
</div>
<div>
<label for="city">City</label>
<select name="city" id="city" class="select">
<option>New York</option>
<option>London</option>
<option>Paris</option>
<option>Tokio</option>
<option>Sydney</option>
</select>
</div>
<div>
<label for="country">Country</label>
<select name="country" class="select">
<option>USA</option>
<option>UK</option>
<option>France</option>
<option>Japan</option>
<option>Australia</option>
</select>
</div>
<div>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="area"></textarea>
</div>
<div class="submit"><button type="submit">Submit</button></div>
</fieldset>
</form>
<!-- COPY END HERE -->
</div>
</div>

83
public/demo/form_2.html
View File

@ -1,83 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
.form fieldset{border:none;margin:0;padding:0;background:#ccc;}
.form legend{display:none;}
.form div{clear:both;margin:.25em 0;}
.form label{display:block;}
.form .field{padding:3px;width:250px;}
.form .area{padding:3px;width:580px;}
.form select{padding:3px;width:256px;}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<form action="/" method="post" class="form">
<fieldset class="cols"><legend>Contact form</legend>
<div class="col first">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" size="30" class="field required" />
</div>
<div class="col">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" size="30" class="field" />
</div>
<div class="col first">
<label for="address">Address</label>
<input type="text" name="address" id="address" size="30" class="field" />
</div>
<div class="col">
<label for="url">URL</label>
<input type="text" name="url" id="url" size="30" class="field required url" />
</div>
<div class="col first">
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" class="field required email" />
</div>
<div class="col">
<label for="phonenumber">Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber" size="30" class="field" />
</div>
<div class="col first">
<label for="city">City</label>
<select name="city" id="city" class="select">
<option>New York</option>
<option>London</option>
<option>Paris</option>
<option>Tokio</option>
<option>Sydney</option>
</select>
</div>
<div class="col">
<label for="country">Country</label>
<select name="country" class="select">
<option>USA</option>
<option>UK</option>
<option>France</option>
<option>Japan</option>
<option>Australia</option>
</select>
</div>
<div>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="area"></textarea>
</div>
<div class="submit"><button type="submit">Submit</button></div>
</fieldset>
</form>
<!-- COPY END HERE -->
</div>
</div>

54
public/demo/form_search.html
View File

@ -1,54 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<script type="text/javascript" src="../javascripts/jquery.js"></script>
<script type="text/javascript" src="../javascripts/easy.js"></script>
<script type="text/javascript" src="../javascripts/application.js"></script>
<style>
/* COPY START HERE */
form#searchForm{
margin:0;
padding:1em 10px;
background:#f1f1f1;
float:left;
position:absolute;
top:2em;
right:0;
}
#searchForm .field{
border:1px solid #999;
padding:5px;
width:150px;
float:left;
}
#searchForm button{
display:inline;
float:left;
background:#ccc; /* place search icon here */
height:26px;
width:26px;
margin-left:5px;
}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<form id="searchForm" action="/" method="post">
<label for="keyword">Search</label>
<input type="text" name="keyword" id="keyword" size="30" class="field label" />
<button type="submit" class="graphic">Go</button>
</form>
<!-- COPY END HERE -->
</div>
</div>

51
public/demo/index.html
View File

@ -1,51 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Easy front-end framework</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta name="keywords" content=""></meta>
<meta name="description" content=""></meta>
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<link rel="stylesheet" href="../stylesheets/easyprint.css" media="print" />
<script type="text/javascript" src="../javascripts/jquery.js"></script>
<script type="text/javascript" src="../javascripts/easy.js"></script>
<script type="text/javascript" src="../javascripts/application.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://easyframework.com" title="click here to return to the homepage">Easy front-end framework</a></h1>
<ul id="nav">
<li><a href="http://easyframework.com">Home</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Demo</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">
<div class="main"></div>
<div class="secondary"></div>
<div class="tertiary"></div>
</div>
<div id="footer">
<p>Made with <a href="http://easyframework.com">Easy</a></p>
</div>
</div>
</body>
</html>

42
public/demo/list_1.html
View File

@ -1,42 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
ul.list{
margin:1em 0;
padding:0;
border-top:1px solid #ccc;
width:200px;
}
ul.list li{
margin:0;
padding:.5em 0;
list-style:none;
border-bottom:1px solid #ccc;
}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<ul class="list">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
<!-- COPY END HERE -->
</div>
</div>

50
public/demo/list_2.html
View File

@ -1,50 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
div.list{
margin-bottom:1.5em;
width:255px;
overflow:hidden;
}
div.list ul{
margin:-5px 0 0 -5px;
padding:0;
overflow:hidden;
}
div.list ul li{
margin:5px 0 0 5px;
padding:0;
list-style:none;
float:left;
width:125px;
height:125px;
background:#ccc;
}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<div class="list">
<ul class="fixed">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
</div>
<!-- COPY END HERE -->
</div>
</div>

54
public/demo/list_3.html
View File

@ -1,54 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
div.list{
width:600px;
border-top:1px solid #999;
margin-bottom:1.5em;
}
div.list ul{
margin:0 0 0 -15px;
padding:0;
}
div.list ul li{
margin:0 0 0 15px;
padding:.5em 0;
list-style:none;
border-bottom:1px solid #ccc;
float:left;
width:190px;
}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<div class="list">
<ul class="fixed">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
</div>
<!-- COPY END HERE -->
</div>
</div>

49
public/demo/navigation_absolute.html
View File

@ -1,49 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
ul.nav{
margin:0;
padding:0;
position:absolute;
top:2em;
right:0;
}
ul.nav li{
margin:0;
padding:0 .5em;
line-height:1em;
float:left;
list-style:none;
border-left:1px solid #555;
}
ul.nav li.first{
padding-left:0;
border-left:none;
}
ul.nav li a{float:left;}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<ul class="nav fixed">
<li class="first"><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
</ul>
<!-- COPY END HERE -->
</div>
</div>

46
public/demo/navigation_inline.html
View File

@ -1,46 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
ul.nav{
margin:0 0 1.5em 0;
padding:0;
}
ul.nav li{
margin:0;
padding:0 .5em;
line-height:1em;
float:left;
list-style:none;
border-left:1px solid #555;
}
ul.nav li.first{
padding-left:0;
border-left:none;
}
ul.nav li a{float:left;}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<ul class="nav fixed">
<li class="first"><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
</ul>
<!-- COPY END HERE -->
</div>
</div>

48
public/demo/pagination.html
View File

@ -1,48 +0,0 @@
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
<style>
/* COPY START HERE */
ol.pagination{
margin:1em 0;
padding:0;
}
ol.pagination li{
margin:0 .5em 0 0;
padding:0;
float:left;
list-style:none;
}
ol.pagination li a, ol.pagination li span{
float:left;
border:1px solid #ccc;
line-height:1.5em;
padding:0 .5em;
background:#fff;
}
ol.pagination li a:hover{background:#f1f1f1;}
ol.pagination li span{background:#ccc;color:#fff;}
/* COPY END HERE */
</style>
<div id="container">
<div class="main">
<!-- COPY START HERE -->
<ol class="pagination fixed">
<li><a href="#">1</a></li>
<li><span>2</span></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ol>
<!-- COPY END HERE -->
</div>
</div>