Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Remove out-of-date content in demo page.

Fix white space to use tabs throughout demo pages.
  • Loading branch information...
commit 7862f452b92f33f4529206b2407957f17d99ea7f 1 parent 678bd7a
Boris Moore authored
Showing with 141 additions and 149 deletions.
  1. +31 −31 demos/demo-contacts.css
  2. +40 −48 demos/demo-contacts.html
  3. +70 −70 demos/demo-contacts.js
62 demos/demo-contacts.css
View
@@ -2,30 +2,30 @@
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;
@@ -33,10 +33,10 @@ http://veerle.duoh.com/blog/comments/a_css_styled_table/
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 demos/demo-contacts.html
View
@@ -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" />
140 demos/demo-contacts.js
View
@@ -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" );
@@ -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
Please sign in to comment.
Something went wrong with that request. Please try again.