网站常见组件合集

 查看演示  website  立即下载

这只是我自己在工作之余写的一个一些网站上常见的插件，然后我就厚颜无耻的以自己的名字命名了，求轻喷！！！

放在博客上也不是想炫耀什么的，毕竟我还是一个技术渣，只是希望能给部分人一些借鉴和参考。

下面我就简单的介绍一下这个插件吧！

一、文件引入

插件是基于jq来写的（毕竟我是一个jq狗），所以在引项目文件之前需引入jq文件，如下

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/simba.webSite.js"></script>

二、插件介绍

1、轮播

首先html结构如下

<div class="slider" e-fun="slider">
    <a href="javascript:"><img src="./images/1.jpg" alt="" /></a>
    <a href="javascript:"><img src="./images/2.jpg" alt="" /></a>
    <a href="javascript:"><img src="./images/3.jpg" alt="" /></a>
    <a href="javascript:"><img src="./images/4.jpg" alt="" /></a>
    <a href="javascript:"><img src="./images/5.jpg" alt="" /></a>
</div>

如你所看你只要设置e-fun="slider" ps：所有的组件效果都是e-开头的指令

当然你如果不想用指令，也可以直接用js初始化,效果是一样的

$(".slider").slider();

下面是一些基本参数

imgW : 0, //轮播图片的宽度
imgH : 0, //轮播图片的高度
timeout : "3000", //轮播间隔时间
moveTime : 500, //动画时间
autoSlider : true, //是否自动轮播
moveStyle : "slide", //动画效果  slide ：滑动， fade ：渐隐渐现
addTag : true,//是否创建圆点标记
tagSize : 12, //圆点标记的大小
tagDefaultBg : "#fff", //圆点标记的默认背景
tagActiveBg : "#5638d8", // 圆点标记选中背景
btnShow : true, //是否显示左右按钮
btnW : 30, //按钮的宽度
btnH : 60, //按钮的高度
btnBg : "rgba(255,255,255,.6)" //左右按钮的背景

2、截取字符串

html

e-num 是一个参数 表示限定字符的个数，这里我只是简单的计算了字符的长度，没有计算字节（懒的无可救药）

<p id="lim" e-fun="limit" e-num="10">这里只能显示10个字符，嗯呢呢呢</p>

js

$("#lim").limit(num);  //num是唯一参数  显示字符个数

3、Tab切换

html

<div class="">
  <h1 class="title">Tab菜单切换</h1>
  <div class="content"> 
    <!--js-->
    <div e-fun="tab" e-event="click" e-index="0" class="tab">
      <div class="clear"> <a e-tab-for="nav0">a</a> <a e-tab-for="nav1">b</a> <a e-tab-for="nav2">c</a> </div>
      <div>
        <p e-tab-nav="nav0">a</p>
        <p e-tab-nav="nav1">b</p>
        <p e-tab-nav="nav2">c</p>
      </div>
    </div>
  </div>
</div

PREVIOUS:
NEXT:
bootstrap响应式导航
jQuery模拟IOS开关按钮代码