mirror of
https://github.com/jashkenas/backbone.git
synced 2026-04-30 03:00:06 -04:00
First semi-working version of the jQuer-ified example.
This commit is contained in:
Jeremy Ashkenas
BIN
examples/todos/destroy.png
Normal file
BIN
examples/todos/destroy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
56
examples/todos/index.html
Normal file
56
examples/todos/index.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Backbone Demo: Todos</title>
|
||||
<link href="screen.css" media="all" rel="stylesheet" type="text/css"/>
|
||||
<script src="../../test/vendor/jquery-1.4.2.js"></script>
|
||||
<script src="../../test/vendor/underscore-1.1.0.js"></script>
|
||||
<script src="../../backbone.js"></script>
|
||||
<script src="javascripts/backbone.localStorage.js"></script>
|
||||
<script src="javascripts/todos.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='todoapp'>
|
||||
|
||||
<div class='title'>
|
||||
<h1>Todos</h1>
|
||||
</div>
|
||||
|
||||
<div class='content'>
|
||||
|
||||
<div id='create-todo'>
|
||||
<input id='new-todo' placeholder='What needs to be done?' type='text' />
|
||||
<span class='ui-tooltip-top'>Press Enter to create this task</span>
|
||||
</div>
|
||||
|
||||
<div id='todos'>
|
||||
<ul id='todo-list'></ul>
|
||||
</div>
|
||||
|
||||
<div id='todo-stats'>
|
||||
<span class='todo-count'>
|
||||
<span class='number'>0</span>
|
||||
<span class='word'>todos</span>.
|
||||
</span>
|
||||
<span class='todo-clear'>
|
||||
<a href='#'>Clear completed</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ul id='instructions'>
|
||||
<li>Double-click to edit a todo.</li>
|
||||
</ul>
|
||||
|
||||
<div id='credits'>
|
||||
Created by
|
||||
<br />
|
||||
<a href='http://jgn.me/'>Jérôme Gravel-Niquet</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
153
examples/todos/javascripts/backbone.localStorage.js
Normal file
153
examples/todos/javascripts/backbone.localStorage.js
Normal file
@@ -0,0 +1,153 @@
|
||||
// UUID
|
||||
function S4() {
|
||||
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
|
||||
};
|
||||
|
||||
function guid() {
|
||||
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
|
||||
};
|
||||
|
||||
Storage.prototype.setObject = function(key, value) {
|
||||
this.setItem(key, JSON.stringify(value));
|
||||
}
|
||||
|
||||
Storage.prototype.getObject = function(key) {
|
||||
return this.getItem(key) && JSON.parse(this.getItem(key));
|
||||
}
|
||||
|
||||
var Store = function(name) {
|
||||
this.name = name;
|
||||
};
|
||||
|
||||
_.extend(Store.prototype, {
|
||||
|
||||
create: function(model) {
|
||||
this.data = localStorage.getObject(this.name);
|
||||
|
||||
if (!this.data) {
|
||||
this.data = [];
|
||||
}
|
||||
|
||||
if (!model.id) model.attributes.id = guid();
|
||||
|
||||
this.data.push(model);
|
||||
|
||||
localStorage.setObject(this.name, this.data);
|
||||
|
||||
return {model: model, status: "success"};
|
||||
},
|
||||
|
||||
update: function(model) {
|
||||
var newData = [];
|
||||
var succeeded = false;
|
||||
|
||||
this.data = localStorage.getObject(this.name);
|
||||
|
||||
if (!this.data) {
|
||||
this.data = [];
|
||||
}
|
||||
|
||||
newData = _.map(this.data, function(i) {
|
||||
if (i.id == model.id) {
|
||||
succeeded = true;
|
||||
return model
|
||||
} else {
|
||||
return i
|
||||
}
|
||||
});
|
||||
|
||||
if (!succeeded) {
|
||||
this.create(model)
|
||||
} else {
|
||||
localStorage.setObject(this.name, newData);
|
||||
}
|
||||
|
||||
return {model: model, status: "success"};
|
||||
},
|
||||
|
||||
find: function(model) {
|
||||
var record;
|
||||
|
||||
this.data = localStorage.getObject(this.name);
|
||||
|
||||
if (!this.data) {
|
||||
this.data = [];
|
||||
}
|
||||
|
||||
_.each(this.data, function(item) {
|
||||
if (item.id == model.id) {
|
||||
record = item;
|
||||
_.breakLoop();
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof(record) == 'object') {
|
||||
return {model: record, status: "success"};
|
||||
} else {
|
||||
return {error: "Record Not Found.", status: "error"};
|
||||
}
|
||||
},
|
||||
|
||||
findAll: function() {
|
||||
this.data = localStorage.getObject(this.name);
|
||||
|
||||
if (!this.data) {
|
||||
this.data = [];
|
||||
}
|
||||
|
||||
return {models: this.data, status: "success"};
|
||||
},
|
||||
|
||||
destroy: function(model) {
|
||||
var newData = [];
|
||||
var recordKey;
|
||||
var succeeded = false;
|
||||
|
||||
this.data = localStorage.getObject(this.name);
|
||||
|
||||
if (!this.data) {
|
||||
this.data = [];
|
||||
}
|
||||
|
||||
_.each(this.data, function(item, key) {
|
||||
if (item.id == model.id) {
|
||||
succeeded = true;
|
||||
recordKey = key;
|
||||
_.breakLoop();
|
||||
}
|
||||
});
|
||||
|
||||
if (succeeded) this.data.splice(recordKey, 1);
|
||||
|
||||
localStorage.setObject(this.name, this.data);
|
||||
|
||||
if (succeeded) {
|
||||
return {model: model, status: "success"};
|
||||
} else {
|
||||
return {error: "Record Not Found.", status: "error"}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Backbone.sync = function(method, model, success, error) {
|
||||
|
||||
var resp;
|
||||
var store = model.localStore ? model.localStore : model.collection.localStore;
|
||||
|
||||
if (method === "read") {
|
||||
resp = model.id ? store.find(model) : store.findAll();
|
||||
} else if (method === "create") {
|
||||
resp = store.create(model);
|
||||
} else if (method === "update") {
|
||||
resp = store.update(model);
|
||||
} else if (method === "delete") {
|
||||
resp = store.destroy(model);
|
||||
}
|
||||
|
||||
if (resp.status == "success") {
|
||||
success(resp);
|
||||
} else if (resp.status == "error" && error) {
|
||||
error(resp);
|
||||
}
|
||||
};
|
||||
198
examples/todos/javascripts/todos.js
Normal file
198
examples/todos/javascripts/todos.js
Normal file
@@ -0,0 +1,198 @@
|
||||
$(function(){
|
||||
|
||||
// Todo
|
||||
window.Todo = Backbone.Model.extend({
|
||||
|
||||
parse: function(resp) {
|
||||
return resp.model;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Todo List
|
||||
window.TodoList = Backbone.Collection.extend({
|
||||
|
||||
model: Todo,
|
||||
localStore: new Store("tasks"),
|
||||
|
||||
// Returns all done todos.
|
||||
done: function() {
|
||||
return this.select(function(todo){
|
||||
return todo.get('done');
|
||||
});
|
||||
},
|
||||
|
||||
comparator: function(todo) {
|
||||
return todo.id;
|
||||
},
|
||||
|
||||
parse: function(resp) {
|
||||
return resp.models;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.Todos = new TodoList;
|
||||
|
||||
window.TodoView = Backbone.View.extend({
|
||||
|
||||
tagName: "li",
|
||||
className: "todo",
|
||||
|
||||
template: _.template("<input type='checkbox' /><div class='todo-content'><%= content %></div><span class='todo-destroy'></span>"),
|
||||
editTemplate: _.template("<input type='text' value='<%= content %>' />"),
|
||||
|
||||
events: {
|
||||
"click input[type=checkbox]": "markAsDone",
|
||||
"dblclick div.todo-content" : "edit",
|
||||
"click span.todo-destroy" : "destroy",
|
||||
"keypress input[type=text]" : "changed"
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'toggleDone');
|
||||
this.model.bind('change:done', this.toggleDone);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
$(this.el).html(this.template(this.model.toJSON()));
|
||||
$(this.el).attr({id : "todo-"+this.model.get("id")});
|
||||
this.checkbox = this.$("input[type=checkbox]");
|
||||
this.toggleDone();
|
||||
return this;
|
||||
},
|
||||
|
||||
toggleDone: function() {
|
||||
if (this.model.get('done')) {
|
||||
$(this.el).addClass("done");
|
||||
this.checkbox.attr({checked: "checked"});
|
||||
} else {
|
||||
$(this.el).removeClass("done");
|
||||
this.checkbox.attr({checked: null});
|
||||
}
|
||||
},
|
||||
|
||||
markAsDone: function() {
|
||||
this.model.save({ done: !this.model.get("done") });
|
||||
},
|
||||
|
||||
edit: function() {
|
||||
$(this.el).html(this.editTemplate(this.model.toJSON()));
|
||||
$(this.el).addClass("editing");
|
||||
this.updateInput = this.$("input[type=text]");
|
||||
},
|
||||
|
||||
changed: function(e) {
|
||||
if (e.code == 13) {
|
||||
var thisView = this;
|
||||
this.model.save(
|
||||
{
|
||||
content: this.updateInput.val()
|
||||
},
|
||||
{
|
||||
success: function(todo) {
|
||||
thisView.render();
|
||||
$(thisView.el).removeClass("editing");
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
var thisView = this;
|
||||
this.model.destroy({
|
||||
success: function(){
|
||||
$(thisView.el).remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.AppView = Backbone.View.extend({
|
||||
|
||||
el: $("#todoapp"),
|
||||
|
||||
events: {
|
||||
"keypress input#new-todo": "createIfEnter",
|
||||
"keyup input#new-todo": "showTooltip",
|
||||
"click span.todo-clear": "clearCompleted"
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'addTodo', 'clearCompleted', 'showTooltip', 'createIfEnter', 'analyzeTodos');
|
||||
|
||||
Todos.bind('add', this.addTodo);
|
||||
|
||||
this.list = $("#todo-list");
|
||||
this.newInput = $("#new-todo");
|
||||
this.tooltip = this.$(".ui-tooltip-top");
|
||||
|
||||
Todos.fetch({
|
||||
success: _.bind(function(coll) {
|
||||
_.each(coll.models, this.addTodo);
|
||||
}, this)
|
||||
});
|
||||
|
||||
this.analyzeTodos();
|
||||
|
||||
Todos.bind("add", this.analyzeTodos);
|
||||
Todos.bind("remove", this.analyzeTodos);
|
||||
Todos.bind("change", this.analyzeTodos);
|
||||
},
|
||||
|
||||
analyzeTodos: function() {
|
||||
var doneCount = Todos.done().length;
|
||||
var todoCount = Todos.length;
|
||||
var totalCount = todoCount - doneCount;
|
||||
|
||||
this.$(".number").text(totalCount);
|
||||
this.$(".word").text(totalCount == 1 ? 'todo' : 'todos');
|
||||
this.$("span.todo-count").css({display: todoCount > 0 ? "inline" : "none"});
|
||||
this.$("span.todo-clear").css({display: doneCount > 0 ? "inline" : "none"});
|
||||
},
|
||||
|
||||
addTodo: function(todo) {
|
||||
var view = new TodoView({model: todo});
|
||||
this.list.append(view.render().el);
|
||||
},
|
||||
|
||||
createIfEnter: function(e) {
|
||||
if (e.keyCode == 13) {
|
||||
Todos.create({
|
||||
content: this.newInput.val(),
|
||||
done: false
|
||||
});
|
||||
this.newInput.setProperty("value", "");
|
||||
}
|
||||
},
|
||||
|
||||
showTooltip: function(e) {
|
||||
this.tooltip.fadeOut();
|
||||
|
||||
if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
|
||||
|
||||
var tt = this.tooltip;
|
||||
|
||||
if (this.newInput.val() !== "" && this.newInput.val() !== this.newInput.attr('placeholder')) {
|
||||
this.tooltipTimeout = setTimeout(function(){
|
||||
tt.fadeIn();
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
|
||||
clearCompleted: function() {
|
||||
thisView = this;
|
||||
_.each(Todos.done(), function(todo){
|
||||
todo.destroy({success: function(todo){
|
||||
thisView.$("#todo-"+todo.id).remove();
|
||||
}});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.App = new AppView;
|
||||
|
||||
});
|
||||
259
examples/todos/screen.css
Normal file
259
examples/todos/screen.css
Normal file
@@ -0,0 +1,259 @@
|
||||
@import url(tooltip.css);
|
||||
/* line 14, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* line 17, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body {
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* line 19, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* line 21, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* line 23, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* line 25, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: "" "";
|
||||
}
|
||||
/* line 96, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* line 27, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* line 6 */
|
||||
html {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
/* line 9 */
|
||||
body {
|
||||
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
background: #eeeeee;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* line 17 */
|
||||
#todoapp {
|
||||
width: 480px;
|
||||
margin: 40px auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px 0;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px 0;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px 0;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px 0;
|
||||
}
|
||||
/* line 24 */
|
||||
#todoapp .title h1 {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 20px 0 30px 0;
|
||||
line-height: 1;
|
||||
}
|
||||
/* line 31 */
|
||||
#todoapp .content #create-todo {
|
||||
position: relative;
|
||||
}
|
||||
/* line 33 */
|
||||
#todoapp .content #create-todo input {
|
||||
width: 466px;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding: 6px;
|
||||
border: 1px solid #999999;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
|
||||
}
|
||||
/* line 44 */
|
||||
#todoapp .content #create-todo input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
/* line 46 */
|
||||
#todoapp .content #create-todo span {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
width: 170px;
|
||||
left: 50%;
|
||||
margin-left: -85px;
|
||||
opacity: 0;
|
||||
}
|
||||
/* line 54 */
|
||||
#todoapp .content ul#todo-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* line 56 */
|
||||
#todoapp .content ul#todo-list li {
|
||||
padding: 15px 20px 15px 0;
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
*zoom: 1;
|
||||
}
|
||||
/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
||||
#todoapp .content ul#todo-list li:after {
|
||||
content: "\0020";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
/* line 62 */
|
||||
#todoapp .content ul#todo-list li.editing {
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
/* line 65 */
|
||||
#todoapp .content ul#todo-list li.editing input {
|
||||
width: 466px;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding: 6px;
|
||||
border: 1px solid #999999;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
|
||||
}
|
||||
/* line 76 */
|
||||
#todoapp .content ul#todo-list li input[type=checkbox] {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
margin: 0 10px 0 7px;
|
||||
float: left;
|
||||
}
|
||||
/* line 82 */
|
||||
#todoapp .content ul#todo-list li.done .todo-content {
|
||||
text-decoration: line-through;
|
||||
color: #777777;
|
||||
}
|
||||
/* line 85 */
|
||||
#todoapp .content ul#todo-list li .todo-destroy {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 16px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(destroy.png) no-repeat center center;
|
||||
}
|
||||
/* line 95 */
|
||||
#todoapp .content ul#todo-list li:hover .todo-destroy {
|
||||
display: block;
|
||||
}
|
||||
/* line 98 */
|
||||
#todoapp .content #todo-stats {
|
||||
*zoom: 1;
|
||||
margin-top: 10px;
|
||||
color: #777777;
|
||||
}
|
||||
/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
||||
#todoapp .content #todo-stats:after {
|
||||
content: "\0020";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
/* line 102 */
|
||||
#todoapp .content #todo-stats .todo-count {
|
||||
display: none;
|
||||
float: left;
|
||||
}
|
||||
/* line 105 */
|
||||
#todoapp .content #todo-stats .todo-count .number {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
/* line 108 */
|
||||
#todoapp .content #todo-stats .todo-clear {
|
||||
float: right;
|
||||
display: none;
|
||||
}
|
||||
/* line 111 */
|
||||
#todoapp .content #todo-stats .todo-clear a {
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
}
|
||||
/* line 114 */
|
||||
#todoapp .content #todo-stats .todo-clear a:visited {
|
||||
color: #777777;
|
||||
}
|
||||
/* line 116 */
|
||||
#todoapp .content #todo-stats .todo-clear a:hover {
|
||||
color: #336699;
|
||||
}
|
||||
|
||||
/* line 120 */
|
||||
#instructions {
|
||||
width: 520px;
|
||||
margin: 10px auto;
|
||||
color: #777777;
|
||||
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* line 127 */
|
||||
#credits {
|
||||
width: 520px;
|
||||
margin: 30px auto;
|
||||
color: #777777;
|
||||
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
|
||||
text-align: center;
|
||||
}
|
||||
/* line 133 */
|
||||
#credits a {
|
||||
color: #336699;
|
||||
}
|
||||
100
examples/todos/tooltip.css
Normal file
100
examples/todos/tooltip.css
Normal file
@@ -0,0 +1,100 @@
|
||||
/*
|
||||
* François 'cahnory' Germain
|
||||
*/
|
||||
.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
|
||||
color:#ffffff;
|
||||
cursor:normal;
|
||||
display:-moz-inline-stack;
|
||||
display:inline-block;
|
||||
font-size:12px;
|
||||
font-family:arial;
|
||||
padding:.5em 1em;
|
||||
position:relative;
|
||||
text-align:center;
|
||||
text-shadow:0 -1px 1px #111111;
|
||||
-webkit-border-top-left-radius:4px ;
|
||||
-webkit-border-top-right-radius:4px ;
|
||||
-webkit-border-bottom-right-radius:4px ;
|
||||
-webkit-border-bottom-left-radius:4px ;
|
||||
-khtml-border-top-left-radius:4px ;
|
||||
-khtml-border-top-right-radius:4px ;
|
||||
-khtml-border-bottom-right-radius:4px ;
|
||||
-khtml-border-bottom-left-radius:4px ;
|
||||
-moz-border-radius-topleft:4px ;
|
||||
-moz-border-radius-topright:4px ;
|
||||
-moz-border-radius-bottomright:4px ;
|
||||
-moz-border-radius-bottomleft:4px ;
|
||||
border-top-left-radius:4px ;
|
||||
border-top-right-radius:4px ;
|
||||
border-bottom-right-radius:4px ;
|
||||
border-bottom-left-radius:4px ;
|
||||
-o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
|
||||
-moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
|
||||
-khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
|
||||
-webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
|
||||
box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
|
||||
background-color:#3b3b3b;
|
||||
background-image:-moz-linear-gradient(top,#555555,#222222);
|
||||
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
|
||||
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
|
||||
}
|
||||
.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
|
||||
content:"\25B8";
|
||||
display:block;
|
||||
font-size:2em;
|
||||
height:0;
|
||||
line-height:0;
|
||||
position:absolute;
|
||||
}
|
||||
.ui-tooltip:after, .ui-tooltip-bottom:after {
|
||||
color:#2a2a2a;
|
||||
bottom:0;
|
||||
left:1px;
|
||||
text-align:center;
|
||||
text-shadow:1px 0 2px #000000;
|
||||
-o-transform:rotate(90deg);
|
||||
-moz-transform:rotate(90deg);
|
||||
-khtml-transform:rotate(90deg);
|
||||
-webkit-transform:rotate(90deg);
|
||||
width:100%;
|
||||
}
|
||||
.ui-tooltip-top:after {
|
||||
bottom:auto;
|
||||
color:#4f4f4f;
|
||||
left:-2px;
|
||||
top:0;
|
||||
text-align:center;
|
||||
text-shadow:none;
|
||||
-o-transform:rotate(-90deg);
|
||||
-moz-transform:rotate(-90deg);
|
||||
-khtml-transform:rotate(-90deg);
|
||||
-webkit-transform:rotate(-90deg);
|
||||
width:100%;
|
||||
}
|
||||
.ui-tooltip-right:after {
|
||||
color:#222222;
|
||||
right:-0.375em;
|
||||
top:50%;
|
||||
margin-top:-.05em;
|
||||
text-shadow:0 1px 2px #000000;
|
||||
-o-transform:rotate(0);
|
||||
-moz-transform:rotate(0);
|
||||
-khtml-transform:rotate(0);
|
||||
-webkit-transform:rotate(0);
|
||||
}
|
||||
.ui-tooltip-left:after {
|
||||
color:#222222;
|
||||
left:-0.375em;
|
||||
top:50%;
|
||||
margin-top:.1em;
|
||||
text-shadow:0 -1px 2px #000000;
|
||||
-o-transform:rotate(180deg);
|
||||
-moz-transform:rotate(180deg);
|
||||
-khtml-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
}
|
||||
|
||||
/* demo css */
|
||||
h2 { margin: 2em 0 1em; }
|
||||
p { margin: 0 0 1em; }
|
||||
Reference in New Issue
Block a user