Live pryoCMS codes

Write pyrocms codes live.

by James Doyle

HTML

<label>Type</label>
<select class="type">
    <option value="">button</option>
    <option value="">tab</option>
</select>
<br />

<label>Button Text</label>
<input type="text" class="text" value="" name="" /><br />

<label>Button Link</label>
<input type="text" class="link" value="" name="" /><br />

<label>Button Size</label>
<select class="size">
    <option value="normal">normal</option>
    <option value="big">big</option>
</select>
<br />
<br />
<p>Copy the text below and paste into the body of a page.</p>
<br />
<div id="code">{{ rspec:button name="<span class="text"></span>" link="<span class="link"></span>" size="<span class="size">normal</span>" }}</div>

CSS

#code {
    padding: 10px;
    background: #eee;
}

JavaScript

$(document).ready(function() {
    $('input').bind('keyup', function() {
        var match = 'span.' + $(this).attr('class');
        $(match).html($(this).attr('value'));
    });
    $('select').bind('change', function() {
        var match = 'span.' + $(this).attr('class');
        $(match).html($(this).attr('value'));
    });
});