Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: b65f68aae4
Fetching contributors…

Cannot retrieve contributors at this time

142 lines (127 sloc) 3.618 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Backbone.js Modal Dialog</title>
<link rel="stylesheet" type="text/css" media="screen" href="demo.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="lib/underscore-min.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<script src="lib/backbone.validation.js" type="text/javascript"></script>
<script src="Backbone.ModalDialog.js" type="text/javascript"></script>
<script src="demo.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Backbone.js Modal Dialog</h1>
</div>
<div id="content">
<p>
<a href="#" id="addPersonButton">Add another person to the list</a>
</p>
<ul id="people">
</ul>
</div>
<div id="sidebar">
<p>
<a href="#" id="test-no-config">No config</a>
</p>
<p>
<a href="#" id="test-permanent">Permanent modal</a>
</p>
<p>
<a href="#" id="test-anchor-header-left">Anchored to header (left)</a>
</p>
<p>
<a href="#" id="test-anchor-header-right">Anchored to header (right)</a>
</p>
</div>
</div>
<div id="footer">
<a href="https://github.com/GarethElms/BackboneJSModalView">Backbone.js Modal View</a> demo By <a href="http://www.garethelms.org">Gareth Elms</a> 2012
</div>
</body>
<script type="text/javascript">
$(document).ready(
function()
{
_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g};
$("#addPersonButton").click(
function( event)
{
event.preventDefault();
event.stopPropagation();
// Create the modal view
var model = new PersonModel();
var view = new AddPersonView( {model:model});
view.render().showModal({
x: event.pageX,
y: event.pageY
});
});
_people = new PeopleCollection();
_people.add( new PersonModel({name: "Person 1", email:"person1@email.com", phone:"011-11-111"}));
_people.add( new PersonModel({name: "Person 2", email:"person2@email.com", phone:"022-22-222"}));
_people.add( new PersonModel({name: "Person 3", email:"person3@email.com", phone:"03-333-333"}));
_peopleList = new PeopleListView(
{
collection: _people,
el: "#people"
});
_peopleList.render();
additionalTests();
});
function additionalTests()
{
$("#test-no-config").click(
function( event)
{
event.preventDefault();
event.stopPropagation();
var model = new PersonModel();
var view = new AddPersonView( {model:model});
view.render().showModal();
});
$("#test-anchor-header-left").click(
function( event)
{
event.preventDefault();
event.stopPropagation();
var model = new PersonModel();
var view = new AddPersonView( {model:model});
view.render().showModal(
{
"slideFromAbove": true,
"targetContainer": $("#header"),
css:{
"left": "0px",
"top": "0px"}
});
});
$("#test-anchor-header-right").click(
function( event)
{
event.preventDefault();
event.stopPropagation();
var model = new PersonModel();
var view = new AddPersonView( {model:model});
view.render().showModal(
{
"slideFromBelow": true,
"targetContainer": $("#header"),
css:{
"right": "0px",
"top": "0px"}
});
});
$("#test-permanent").click(
function( event)
{
event.preventDefault();
var view = new PermanentView();
view.render().showModal( {permanentlyVisible: true});
});
}
</script>
</html>
Jump to Line
Something went wrong with that request. Please try again.