Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
License section added
  • Loading branch information
Eugene Simakin committed Jan 5, 2014
1 parent 511d8a6 commit 68f7345
Showing 1 changed file with 77 additions and 43 deletions.
120 changes: 77 additions & 43 deletions index.html
View file
Expand Up @@ -50,6 +50,7 @@ <h3>
Check out the demo.</p>

<p class="text-center">Click to download:</p>

<p class="text-center">
<a href="https://github.com/esimakin/twbs-pagination/zipball/master" class="button text-left">
<small>Download</small>
Expand All @@ -66,53 +67,66 @@ <h3>
class="octicon octicon-link"></span></a>Demo</h3>

<p>
<div id="page-content" class="well"></div>
<div class="text-center">
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>

<div id="page-content" class="well"></div>
<div class="text-center">
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
</p>

<p>Here is corresponding piece of code:</p>
<pre><code class="highlight">
$(<span class="s">'#pagination-demo'</span>).twbsPagination({
totalPages: <span class="il">35</span>,
visiblePages: <span class="il">8</span>,
onPageClick: <span class="k">function</span> (event, page) {
$(<span class="s">'#page-content'</span>).text(<span class="s">'Page '</span> + page);
}
});
$(<span class="s">'#pagination-demo'</span>).twbsPagination({
totalPages: <span class="il">35</span>,
visiblePages: <span class="il">8</span>,
onPageClick: <span class="k">function</span> (event, page) {
$(<span class="s">'#page-content'</span>).text(<span class="s">'Page '</span> + page);
}
});
</code></pre>

<p>And HTML code:</p>
<pre><code class="highlight"> &lt;<span class="nt">ul</span> <span class="na">id</span>=<span class="s">&quot;pagination-demo&quot;</span> <span class="na">class</span>=<span class="s">&quot;pagination-sm&quot;</span>&gt;&lt;/<span class="nt">ul</span>&gt;</code></pre>
<pre><code class="highlight"> &lt;<span class="nt">ul</span> <span class="na">id</span>=<span class="s">&quot;pagination-demo&quot;</span>
<span class="na">class</span>=<span class="s">&quot;pagination-sm&quot;</span>&gt;&lt;/<span class="nt">ul</span>&gt;
</code></pre>

<h3>
<a id="options-and-events" class="anchor" href="#options-and-events"><span
class="octicon octicon-link"></span></a>Options and events</h3>

<p>

<ul>Options explanation and default values:
<li><code>totalPages</code> the number of pages (required, checked)</li>
<li><code>startPage</code> the current page that show on start(default: 1)</li>
<li><code>visiblePages</code> maximum visible pages (default: 5)</li>
<li><code>href</code> template for pagination links (default <code>javascript:void(0);</code>)</li>
<li><code>hrefVariable</code> variable name in href template for page number (default <code>{{number}}</code>)</li>
<li><code>first</code> text label (default: <code class="highlight"><span class="s">'First'</span></code>)</li>
<li><code>prev</code> text label (default: <code class="highlight"><span class="s">'Previous'</span></code>)</li>
<li><code>next</code> text label (default: <code class="highlight"><span class="s">'Next'</span></code>)</li>
<li><code>last</code> text label (default: <code class="highlight"><span class="s">'Last'</span></code>)</li>
<li><code>paginationClass</code> the root style for pagination component (default: <code class="highlight"><span class="s">'pagination'</span></code>).
You can use this option to apply your own style</li>
</ul>
<ul>Available event:
<li><code>onPageClick</code> callback function
<ul>Function parameters
<li><code>event</code> object</li>
<li><code>page</code> the number of page</li>
</ul>
</li>
</ul>
<ul>Options explanation and default values:
<li><code>totalPages</code> the number of pages (required, checked)</li>
<li><code>startPage</code> the current page that show on start(default: 1)</li>
<li><code>visiblePages</code> maximum visible pages (default: 5)</li>
<li><code>href</code> template for pagination links (default <code>javascript:void(0);</code>)</li>
<li><code>hrefVariable</code> variable name in href template for page number (default
<code>{{number}}</code>)
</li>
<li><code>first</code> text label (default: <code class="highlight"><span
class="s">'First'</span></code>)
</li>
<li><code>prev</code> text label (default: <code class="highlight"><span
class="s">'Previous'</span></code>)
</li>
<li><code>next</code> text label (default: <code class="highlight"><span class="s">'Next'</span></code>)
</li>
<li><code>last</code> text label (default: <code class="highlight"><span class="s">'Last'</span></code>)
</li>
<li><code>paginationClass</code> the root style for pagination component (default: <code
class="highlight"><span class="s">'pagination'</span></code>).
You can use this option to apply your own style
</li>
</ul>
<ul>Available event:
<li><code>onPageClick</code> callback function
<ul>Function parameters
<li><code>event</code> object</li>
<li><code>page</code> the number of page</li>
</ul>
</li>
</ul>
</p>

<h3>
Expand All @@ -122,26 +136,45 @@ <h3>
<h4>URL page link</h4>

<p>You can specify url using <code>href</code> option:</p>
<pre><code class="highlight"> $(selector).twbsPagination({
totalPages: <span class="il">35</span>,
visiblePages: <span class="il">8</span>,
href: <span class="s">'?page={{number}}'</span>
});</code></pre>
<pre><code class="highlight"> $(selector).twbsPagination({
totalPages: <span class="il">35</span>,
visiblePages: <span class="il">8</span>,
href: <span class="s">'?page={{number}}'</span>
});</code></pre>

<h4>Visible pages option</h4>

<p>The max number of visible pages specifies via <code>visiblePages</code> option. The following example
shows the 10 visible pages:</p>
<pre><code class="highlight"> $(selector).twbsPagination({
totalPages: <span class="il">35</span>,
visiblePages: <span class="il">10</span>,
});</code></pre>
shows the 10 visible pages:</p>
<pre><code class="highlight"> $(selector).twbsPagination({
totalPages: <span class="il">35</span>,
visiblePages: <span class="il">10</span>,
});</code></pre>

<p>Note: this is normal size (without <code>pagination-sm</code>)</p>

<div class="text-center">
<ul id="visible-pages-example"></ul>
</div>

<h3>
<a id="license" class="anchor" href="#license"><span
class="octicon octicon-link"></span></a>License</h3>

<p>Copyright 2014 Eugene Simakin</p>
<p>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at</p>

<p><a href="http://www.apache.org/licenses/LICENSE-2.0.html">http://www.apache.org/licenses/LICENSE-2.0</a></p>
<p>
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.</p>

</section>

<aside id="sidebar">
Expand All @@ -151,6 +184,7 @@ <h4>Visible pages option</h4>
<li><a href="#demo">Demo</a>
<li><a href="#options-and-events">Options and events</a>
<li><a href="#examples">Examples</a>
<li><a href="#license">License</a>
</ul>
</div>
</aside>
Expand Down

0 comments on commit 68f7345

Please sign in to comment.