以下是 jquery列表分割线插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery列表分割线插件</title>
<!-- Scripts -->
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easyListSplitter.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<style type="text/css">
html{font-size:62.5%}
body{font-size:1.2em;color:#294f88}
.sample{margin:30px;border:1px solid #92cdec;background:#d7e7ff;padding:30px 30px 0 30px}
h1{margin:0;padding:0 0 30px 0;font-size:2em}
h2{margin:0;padding:10px 0 5px 0;font-size:1.5em;clear:both}
p{font-size:1.2em;line-height:170%;margin-bottom:30px;clear:both}
ul,ol{padding:0;margin:0;font-size:1.2em}
.sample ul,.sample ol{list-style-type:none;background:url(images/dotted.gif) 0 0 repeat-x;width:180px;float:left;margin:0 10px 30px 0}
.sample li{background:url(images/dotted.gif) bottom left repeat-x;width:180px;float:left;padding:0}
.sample li a{padding:8px 20px 8px 0;width:160px;float:left;background:url(images/arrow-right.gif) right 12px no-repeat;text-decoration:none;color:#294f88}
.sample li a:hover{background-image:url(images/arrow-right-dark.gif)}
</style>
</head>
<body>
<div class="sample">
<h1>jQuery plugin: Easy List Splitter - Version 1.0.1</h1>
<h2>Create multiple lists from a single list ordering the items vertically</h2>
<p>You can choose the number of lists you want to create. The plugin will <strong>order the list items vertically by default</strong>. In this first sample we've splitted our list into 3 lists:</p>
<ul class="loremipsum">
<li><a href="#">Lorem ipsum 1</a></li>
<li><a href="#">Donec pede 2</a></li>
<li><a href="#">Fringilla vel 3</a></li>
<li><a href="#">Eget arcu 4</a></li>
<li><a href="#">In enim 5</a></li>
<li><a href="#">Lorem farem 6</a></li>
<li><a href="#">Pede justo 7</a></li>
<li><a href="#">Vel aliquet 8</a></li>
<li><a href="#">Arcu eget 9</a></li>
<li><a href="#">Justo rhoncus 10</a></li>
<li><a href="#">Ipsum dolor 11</a></li>
<li><a href="#">Justo pedec 12</a></li>
<li><a href="#">Romanorum 13</a></li>
</ul>
<p>In this second sample we've splitted the list in 4 lists:</p>
<ul id="mylist">
<li><a href="#">Lorem ipsum 1</a></li>
<li><a href="#">Donec pede 2</a></li>
<li><a href="#">Fringilla vel 3</a></li>
<li><a href="#">Eget arcu 4</a></li>
<li><a href="#">In enim 5</a></li>
<li><a href="#">Lorem farem 6</a></li>
<li><a href="#">Pede justo 7</a></li>
<li><a href="#">Vel aliquet 8</a></li>
<li><a href="#">Arcu eget 9</a></li>
<li><a href="#">Justo rhoncus 10</a></li>
<li><a href="#">Ipsum dolor 11</a></li>
<li><a href="#">Justo pedec 12</a></li>
<li><a href="#">Romanorum 13</a></li>
<li><a href="#">Bellum incipit 14</a></li>
<li><a href="#">Rosae rosarum 15</a></li>
</ul>
<h2>Create multiple lists from a single list ordering the list items horizontally</h2>
<p>To <strong>order your list items horizontally</strong> you just need to specify the parameter <strong>direction: 'horizontal'</strong> when you call the plugin. Here is the first sample that shows 5 lists: </p>
<ol>
<li><a href="#">Lorem ipsum 1</a></li>
<li><a href="#">Donec pede 2</a></li>
<li><a href="#">Fringilla vel 3</a></li>
<li><a href="#">Eget arcu 4</a></li>
<li><a href="#">In enim 5</a></li>
<li><a href="#">Lorem farem 6</a></li>
<li><a href="#">Pede justo 7</a></li>
<li><a href="#">Vel aliquet 8</a></li>
<li><a href="#">Arcu eget 9</a></li>
<li><a href="#">Justo rhoncus 10</a></li>
<li><a href="#">Ipsum dolor 11</a></li>
<li><a href="#">Justo pedec 12</a></li>
<li><a href="#">Romanorum 13</a></li>
<li><a href="#">Bellum incipit 14</a></li>
<li><a href="#">Rosae rosarum 15</a></li>
</ol>
<p>In this last sample we have 2 lists ordered horizontally:</p>
<ul class="dolorsit">
<li><a href="#">Lorem ipsum 1</a></li>
<li><a href="#">Donec pede 2</a></li>
<li><a href="#">Fringilla vel 3</a></li>
<li><a href="#">Eget arcu 4</a></li>
<li><a href="#">In enim 5</a></li>
<li><a href="#">Lorem farem 6</a></li>
<li><a href="#">Pede justo 7</a></li>
</ul>
<p>
</div>
</body>
</html>
JS代码(script.js):
/*easyListSplitter 1.0.1 - jQuery plugin sampleCreated by Andrea Cima Serniotti - http://www.madeincima.eu*/
$(document).ready(function (){
$('.loremipsum').easyListSplitter({
colNumber:3 // Insert here the number of columns you want. Consider that the plugin will create the number of cols requested only if there's enough items in the list.}
);
$('#mylist').easyListSplitter({
colNumber:4 // Insert here the number of columns you want. Consider that the plugin will create the number of cols requested only if there are enough items in the list.}
);
$('ol').easyListSplitter({
colNumber:5,// Insert here the number of columns you want. Consider that the plugin will create the number of cols requested only if there's enough items in the list.direction:'horizontal'}
);
$('.dolorsit').easyListSplitter({
colNumber:2,// Insert here the number of columns you want. Consider that the plugin will create the number of cols requested only if there's enough items in the list.direction:'horizontal'}
);
}
);
分享到QQ
分享到微博
微信扫一扫
