Summary

jquery.paged-card is jQuery plugin that converts target text into paged-media card.

It is usefull to display long long text in fixed size layout.

Supports not only horizontal layout, but also asian vertical layout(tb-rl, tb-lr).

Demo

Install

<!-- stylesheets -->
<link href="/path/to/nehan.css" type="text/css" rel="stylesheet">
<link href="/path/to/jquery.paged-card.css" type="text/css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<!-- javascripts -->
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/underscore.js" type="text/javascript"></script>
<script src="/path/to/backbone.js" type="text/javascript"></script>
<script src="/path/to/nehan.js" type="text/javascript"></script>
<script src="/path/to/jquery.paged-card.js" type="text/javascript"></script>

Usage

<!-- horizontal card -->
<div class="foo" data-title="card1" data-font-size="16" data-width="640" data-height="480" data-direction="hori">
  some horizontal text here
</div>

<!-- vertical card -->
<div class="foo" data-title="card2" data-font-size="16" data-width="640" data-height="480" data-direction="vert">
  some vertical text here
</div>

<!-- javascript -->
<script type="text/javascript">
$(function(){
  $(".foo").pagedCard();
});
</script>

Using options

You can add any option by 'data-' attribute like this.

<div class="foo" data-title="sample1" data-font-size="16" data-width="640" data-height="480" data-direction="hori">
  some text here
</div>

<script type="text/javascript">
$(function(){
  $(".foo").pagedCard();
});
</script>

You can also set same option by jquery arguments like this.

<div class="foo2">
  some text here
</div>

<script type="text/javascript">
$(function(){
  $(".foo2").pagedCard({
    title:"sample2",
    direction:"hori",
    fontSize:16,
    width:640,
    height:480
  });
});
</script>

Options

License

licensed under MIT.