snapshot
/
jsmotif


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="../build/jsMotif.js"></script>

        <title>jsMotif event example</title>
		<style>
			.replica{
				cursor: pointer;
			}
		</style>
    </head>
    <body>

        <div id="replica1" style="background-color: red" class="replica"></div>
        <div id="replica2" style="background-color: green" class="replica"></div>
        <div id="replica3" style="background-color: black; color: lawngreen" class="replica"></div>
        <div id="action"></div>

        <script id="template" type="text/template">
            <div rel="click-me">
                <div>
                    <label>Name:</label>
                    <span fill="{name}"></span><br>
                </div>
                <p>
                    <label>Address:</label><br>
                    <span fill="{location.address.houseNumber}"></span> 
                    <span fill="{location.address.street}"></span><br>
                    <span fill="{location.address.city}"></span>, 
                    <span fill="{location.address.countryName}"></span>
                </p>
            </div>
        </script>

        <script type="text/javascript">
            var place = 
                {
                name: 'Le Marfil',
                contacts: [
                    {
                        description: 'Info',
                        type: 'email',
                        value: 'info@lemarfil.fr'
                    }
                ],
                location: {
                    address: {
                        city: 'Paris',
                        street: 'Rue Auguste Vacquerie',
                        houseNumber: '4',
                        countryName: 'France'
                    }
                },
                media: [
                    {
                        sourceName: 'provider',
                        URL: 'http://image.com/image.jpg'
                    },
                    {
                        sourceName: 'orange',
                        URL: 'http://image.com/image.png'
                    },           
                    {
                        sourceName: 'orange',
                        URL: 'http://image.com/image.gif'
                    }           
                ]
            };
            
            var tpl = new jsMotif.Template({
                template: 'template',
                targetNode: 'replica1',
                events: [
                    {
                        rel: "click-me", // This has to match the value of the respective HTML element's rel attribute
                        name: "click", // This is the event type 
                        handler: function (jsonObject) {
                            var actionDiv = document.getElementById("action");
                            // HTML element on which the event was triggered can be accessed using "this"
                            actionDiv.innerHTML = "You clicked on " + this.parentNode.id + " (" + this.parentNode.style.backgroundColor + "): "
                            // JSON object is passed as a parameter to the event handler
                                + jsonObject.name + ", " + jsonObject.location.address.houseNumber + " " + jsonObject.location.address.street + ", "
                                + jsonObject.location.address.city;
                        }
                    }
                ]
            });
            // Render place object to a default node (replica1 specified in targetNode)
            tpl.render(place);
            // Render place object to other nodes (replica2, replica3)
            tpl.render(place, 'replica2');
            tpl.render(place, 'replica3');                   
        </script>

    </body>
</html>