RoughDraft.js
Quickly create and prototype a full interactive HTML mock-up without duplicating markup, server-side loops/code, or having to source fake content (lorem ipsum text/images).
These few lines...
<section>
<div data-draft-repeat="30">
<img data-draft-image="300/300" />
<div>
<p data-draft-text="1/s"></p>
<span data-draft-user="first"></span><span data-draft-user="state"></span>
<i data-draft-date="F-r/j-r"></i>
<button class="btn btn-warning btn-mini btn-block" data-draft-number="$/2-3"></button>
</div>
</div>
</section>
...produce these distinct blocks.
Posted By: ()
Installation/Usage
Link to with...
<script type="text/javascript" src="js/jquery.roughdraft.0.1.3.js"></script>
Call with...
$(function(){
$(window).roughDraft();
});
And then the data-draft tags turn into content.
<div data-draft-repeat="3"></div> <!-- number of times to repeat element -->
<img data-draft-image="200/300" /> <!-- width/height of image to return -->
<div data-draft-text="5/w"></div> <!-- number of words/sentences/paragraphs (w/s/p) -->
<div data-draft-date="D/M/Y"></div> <!-- dates in PHP format -->
<div data-draft-number="$/2-3/2"></div> <!-- random number with options 'isCurrency'/digit range/decimals -->
<div data-draft-user="full"></div> <!-- random user information (first/last/full/email/etc...) -->