jquery template test

jquery template + dialog

by Reiot

HTML

<script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/blitzer/jquery-ui.css">
<script id="mission-dialog" type="text/x-jquery-tmpl">    
    <div>​
        <h3>${name}</h3>
        <p>${description}</p>
        <ul>
            {{each conditions.data }}
            <li>
                <h4>${name}</h4>
                <p>${status.value}/${status.max}</p>
            </li>
            {{/each}}
        </ul>
        
        <p>${hint}</p>
    </div>​
</script>
<button>Open Dialog</button>​

CSS

h3{
    font-size: 16px; 
    color:red;
}​

h4{
    color:yellow;
}​

JavaScript

$(function() {
    var mission = {
        id: '1',
        name: 'Search & Destroy!!',
        description: 'This is a report that 4-5 enemy infantry companies near by this woods. Search & Destroy!!',
        hint: 'Find the large arrow and click. Note that 1 supply will be consumed for single combat',
        conditions: {
            data: [
                {
                name: 'Defeat Infantry Squad',
                image: "/images/achievement/test1.png",
                status: {
                    value: 0,
                    max: 4
                }},
            {
                name: 'Defeat Elite Infantry Squad',
                image: "/images/achievement/test2.png",
                status: {
                    value: 0,
                    max: 1
                }}
            ]
        }
    };

    $('button').button().click(function() {
        $('#mission-dialog').tmpl(mission).dialog({
            autoOpen: true,
            modal: true,
            buttons: {
                'close': function() {
                    $(this).dialog('destroy').remove();
                }
            }
        });
    });
});