Skip to content

Commit

Permalink
Remove out-of-date content in demo page.
Browse files Browse the repository at this point in the history 
Fix white space to use tabs throughout demo pages.
  • Loading branch information
@BorisMoore
BorisMoore committed Dec 16, 2010
1 parent 678bd7a commit 7862f45
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 149 deletions.
62 changes: 31 additions & 31 deletions demos/demo-contacts.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,41 @@
css adapted from:
http://veerle.duoh.com/blog/comments/a_css_styled_table/
*/
a {
color: #6D929B;
}
.contacts {
border: 1px solid #C1DAD7;
margin:20px;
}
.contacts td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
padding: 6px 6px 6px 12px;
color: #6D929B;
vertical-align: middle;
}
.contacts th {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
.agebar {
a {
color: #6D929B;
}
.contacts {
border: 1px solid #C1DAD7;
margin:20px;
}
.contacts td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
padding: 6px 6px 6px 12px;
color: #6D929B;
vertical-align: middle;
}
.contacts th {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
.agebar {
color: #000000;
background-color: #8888FF;
text-align: center;
font-weight: bold;
border: solid 1px blue;
width: 2em;
height: 25px;
}
.phones td, .phones th {
border: none;
padding: 2px 2px 2px 4px;
vertical-align: top;
}
}
.phones td, .phones th {
border: none;
padding: 2px 2px 2px 4px;
vertical-align: top;
}
88 changes: 40 additions & 48 deletions demos/demo-contacts.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,57 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Contacts - Linking Demo</title>
<link type="text/css" rel="Stylesheet" href="demo-contacts.css" />
<title>My Contacts - Linking Demo</title>
<link type="text/css" rel="Stylesheet" href="demo-contacts.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="../jquery.datalink.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="text/javascript" src="demo-contacts.js"></script>
<script id="contacttmpl" type="text/x-jquery-tmpl">
<tr>
<th>&nbsp;</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Numbers</th>
<th>Age</th>
</tr>
{{each contacts}}
<tr class="contact">
<td>
<a href="#" class="contact-remove">remove</a><br/>
<a href="#" class="contact-reset">reset</a><br/>
</td>
<td>
<input name="firstName" class="contact" type="text" value="${firstName}" />
</td>
<td><input name="lastName" class="contact" type="text" value="${lastName}" /></td>
<td>
<table class="phones">
<tr>
<th>&nbsp;</th>
<th>Type</th>
<th>Number</th>
</tr>
{{each phones}}
<tr class="phone">
<td><a href="#" class="phone-remove">remove</td>
<td><input class="phone phone-type" name="type" type="text" value="${type}" /></td>
<td><input class="phone phone-number" name="number" type="text" value="${number}" /></td>
</tr>
{{/each}}
</table>
<a href="#" class="newphone">add new phone</a>
</td>
<td>
<tr>
<th>&nbsp;</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Numbers</th>
<th>Age</th>
</tr>
{{each contacts}}
<tr class="contact">
<td>
<a href="#" class="contact-remove">remove</a><br/>
<a href="#" class="contact-reset">reset</a><br/>
</td>
<td>
<input name="firstName" class="contact" type="text" value="${firstName}" />
</td>
<td><input name="lastName" class="contact" type="text" value="${lastName}" /></td>
<td>
<table class="phones">
<tr>
<th>&nbsp;</th>
<th>Type</th>
<th>Number</th>
</tr>
{{each phones}}
<tr class="phone">
<td><a href="#" class="phone-remove">remove</td>
<td><input class="phone phone-type" name="type" type="text" value="${type}" /></td>
<td><input class="phone phone-number" name="number" type="text" value="${number}" /></td>
</tr>
{{/each}}
</table>
<a href="#" class="newphone">add new phone</a>
</td>
<td>
<input type="text" class="agebar" name="age" value="${age}" />
</td>
</tr>
{{/each}}
</td>
</tr>
{{/each}}
</script>
</head>

<body>
<div>
This is a demo of the Data Linking feature being proposed by Microsoft. You can follow the discussion and provide feedback on the jQuery developer forum, here:
<br/><a href="http://forum.jquery.com/topic/proposal-for-adding-data-linking-to-jquery">jQuery Discussion</a>
<br/>
And you can view the source from here or keep up to date with it on github, here:
<br/><a href="https://github.com/jquery/jquery-datalink/">DataLink on GitHub</a>
</div>

<table class="contacts">
</table>
<input type="button" id="insert" value="Insert new contact" />
Expand Down
140 changes: 70 additions & 70 deletions demos/demo-contacts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,59 @@ jQuery( function( $ ){

// define some basic default data to start with
var contacts = [
{ firstName: "Dave", lastName: "Reed", age: 32, phones: [
{ type: "Mobile", number: "(555) 121-2121" },
{ type: "Home", number: "(555) 123-4567" } ] },
{ firstName: "John", lastName: "Doe", age: 87, phones: [
{ type: "Mobile", number: "(555) 444-2222" },
{ type: "Home", number: "(555) 999-1212" } ] }
{ firstName: "Dave", lastName: "Reed", age: 32, phones: [
{ type: "Mobile", number: "(555) 121-2121" },
{ type: "Home", number: "(555) 123-4567" } ] },
{ firstName: "John", lastName: "Doe", age: 87, phones: [
{ type: "Mobile", number: "(555) 444-2222" },
{ type: "Home", number: "(555) 999-1212" } ] }
];

$.extend( $.convertFn, {
// linking converter that normalizes phone numbers
phone: function( value ) {// turn a string phone number into a normalized one with dashes
// and parens
value = (parseInt( value.replace( /[\(\)\- ]/g, "" ), 10 ) || 0 ).toString();
value = "0000000000" + value;
value = value.substr( value.length - 10 );
value = "(" + value.substr( 0, 3 ) + ") " + value.substr( 3, 3 ) + "-" + value.substr( 6 );
return value;
},
fullname: function( value, source, target ) {
return source.firstName + " " + source.lastName;
}
// linking converter that normalizes phone numbers
phone: function( value ) {// turn a string phone number into a normalized one with dashes
// and parens
value = (parseInt( value.replace( /[\(\)\- ]/g, "" ), 10 ) || 0 ).toString();
value = "0000000000" + value;
value = value.substr( value.length - 10 );
value = "(" + value.substr( 0, 3 ) + ") " + value.substr( 3, 3 ) + "-" + value.substr( 6 );
return value;
},
fullname: function( value, source, target ) {
return source.firstName + " " + source.lastName;
}
});

// show the results of the linking -- object graph is already full of the data
$( "#save" ).click( function() {
$( "#results" ).html( JSON.stringify( contacts, null, 4 ));
$( "#results" ).html( JSON.stringify( contacts, null, 4 ));
});

// add a new contact when clicking the insert button.
// notice that no code here exists that explicitly redraws
// the template.
$( "#insert" ).click( function() {
contacts.push({ firstName: "first", lastName: "last", phones: [], age:20 });
refresh();
contacts.push({ firstName: "first", lastName: "last", phones: [], age:20 });
refresh();
});

$( "#sort" ).click( function() {
contacts.sort( function( a, b ) {
return a.lastName < b.lastName ? -1 : 1;
});
refresh();
contacts.sort( function( a, b ) {
return a.lastName < b.lastName ? -1 : 1;
});
refresh();
});

// function that clears the current template and renders it with the
// current state of the global contacts variable.
function refresh() {
$( ".contacts" ).empty();
$( ".contacts" ).empty();
$( "#contacttmpl" ).tmpl( {contacts:contacts} ).appendTo( ".contacts" );
// bind inputs to the data items
$( "tr.contact" ).each( function(i) {
var contact = contacts[i];
$( "input.contact", this ).link( contact );
$( '.agebar', this ).link( contact, {
// bind inputs to the data items
$( "tr.contact" ).each( function(i) {
var contact = contacts[i];
$( "input.contact", this ).link( contact );
$( '.agebar', this ).link( contact, {
age: {
convertBack: function( value, source, target ) {
$( target ).width( value + "px" );
Expand All @@ -63,45 +63,45 @@ function refresh() {
});
$( contact ).trigger( "changeData", ["age", contact.age] );

// todo: "update" feature
$( ".contact-remove", this ).click( function() {
contacts.splice( i, 1 );
refresh();
});
var original_firstName = contact.firstName,
original_lastName = contact.lastName;
$( ".contact-reset", this ).click( function() {
$( contact )
.data( "firstName", original_firstName )
.data( "lastName", original_lastName );
});
$( "tr.phone", this ).each( function(i) {
var phone = contact.phones[i];
$( this ).link( phone, {
type: "type",
number: {
name: "number",
convert: "phone"
}
});
$( ".phone-remove", this ).click( function() {
// note: I'd like to only redraw the phones portion of the
// template, but jquery.tmpl.js does not support nested templates
// very easily. So here I am triggering an arrayChange event on
// the main contacts array to force the entire thing to refresh.
// Note that user input is not lost since the live linking has
// already stored the values in the object graph.
contact.phones.splice( i, 1 );
refresh();
});
});
$( ".newphone", this ).click( function() {
contact.phones.push({ type: "", number: "" });
refresh();
});
});
// todo: "update" feature
$( ".contact-remove", this ).click( function() {
contacts.splice( i, 1 );
refresh();
});
var original_firstName = contact.firstName,
original_lastName = contact.lastName;
$( ".contact-reset", this ).click( function() {
$( contact )
.data( "firstName", original_firstName )
.data( "lastName", original_lastName );
});
$( "tr.phone", this ).each( function(i) {
var phone = contact.phones[i];
$( this ).link( phone, {
type: "type",
number: {
name: "number",
convert: "phone"
}
});
$( ".phone-remove", this ).click( function() {
// note: I'd like to only redraw the phones portion of the
// template, but jquery.tmpl.js does not support nested templates
// very easily. So here I am triggering an arrayChange event on
// the main contacts array to force the entire thing to refresh.
// Note that user input is not lost since the live linking has
// already stored the values in the object graph.
contact.phones.splice( i, 1 );
refresh();
});
});
$( ".newphone", this ).click( function() {
contact.phones.push({ type: "", number: "" });
refresh();
});
});
}

// initial view on load
Expand Down

0 comments on commit 7862f45

Please sign in to comment.