Introduction to the booklet jquery plugin series

Booklet jquery plug-in series introduction one, install 1, add CSS and JavaScript

Add booklet CSS files to your page.

<rel= "stylesheet"  href= "plugin/booklet/ Jquery.booklet.latest.css "  media=" Screen,projection,tv ">

Then add the jquery library in turn, jquery UI (optional) jquery easing plugin and booklet JS file to your page.

<!--JQuery--
<Scripttype= "Text/javascript"src= "Plugin/booklet/jquery-2.1.0.min.js"></Script>    <!--jQuery UI (optional) -    <Scripttype= "Text/javascript"src= "Plugin/booklet/jquery-ui-1.10.4.min.js"></Script>    <!--Booklet -    <Scripttype= "Text/javascript"src= "Plugin/booklet/jquery.easing.1.3.js"></Script>    <Scripttype= "Text/javascript"src= "Plugin/booklet/jquery.booklet.latest.min.js"></Script>

2,Create content

First create an area block in the content area

1 . Create a container outside <div> and define an ID or class.

2 . Inside the container, add the page. Each page added here will be recognized as each slide, which can contain content or individual items.

A simple example is shown below:

    <DivID= "MyBook">        <Div>            <H3>Yay, Page 1!</H3>        </Div>        <Div>            <H3>Yay, Page 2!</H3>        </Div>        <Div>            <H3>Yay, Page 3!</H3>        </Div>        <Div>            <H3>Yay, Page 4!</H3>        </Div>        <Div>            <H3>Yay, Page 5!</H3>        </Div>        <Div>            <H3>Yay, Page 6!</H3>        </Div>    </Div>

3. Initialize Booklet

Use jquery to select Initialize booklet. You can set multiple books to the same class or the same selector as long as their options are the same.

Learn more about customizing settings to access the document (http://builtbywill.com/code/booklet/documentation) page

    <Scripttype= "Text/javascript">        $(function(){            // Single Book            $('#mybook'). booklet (); //multiple books with ID ' s            $('#mybook1, #mybook2'). booklet (); //multiple books with a class            $('. Mycustombooks'). booklet ();        }); </Script>

Run

Introduction to the booklet jquery plugin series