理解插件,Tab切换插件形式。

原创 2016年05月31日 11:17:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插件的理解</title>
<style type="text/css" media="screen">
*{margin: 0; padding: 0;background: #655c89;}
.box{ width: 500px;  margin: 50px auto; }
.box ul{list-style: none;}  
.box ul.tab{ width: 100%; height: 45px;}
.box ul.tab li{  margin-right: 1px; height: 100%; float: left; background: #54506b; line-height: 45px; text-align: center; color: #fff; font-size: 20px; }
.box ul li.active{background: #fff; display: block !important; color: #b6c4d5; }
.box ul li.active2{background: red; display: block !important; color: #b6c4d5; }
.box ul.content li{ width: 100%; height: 100%; display: none; padding: 10px; }
</style>
</head>
<body>
<!-- 应用层
分为,1.view 视图层
 2.model
 3.service 服务层  数据接口 暴露接口 -->
<div class="box">
<ul class="tab">
<li>省(直辖市)</li>
<li>市</li>
<li>区</li>
</ul>
<ul class="content">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>


<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">


(function($){
$.fn.userTab = function(options){
var cs = {
fontsize : '20px',
widthli : '140px',
activeClass:'active'
};
var ops = $.extend(cs,options);
var $content = $('.box ul.content li');
$(this).eq(0).addClass(ops.activeClass);
$content.eq(0).addClass(ops.activeClass);
$(this).css({'width':ops.widthli,'font-size':ops.fontsize});
$(this).click(clicktab);
function clicktab(){
var index = $(this).index();
$(this).addClass(ops.activeClass).siblings().removeClass(ops.activeClass);
$content.eq(index).addClass(ops.activeClass).siblings().removeClass(ops.activeClass);
}
  }
 
})(jQuery)
</script>
<script type="text/javascript">
$(function(){
$('ul.tab li').userTab({
fontsize: '16px',
widthli : '120px',
activeClass:'active2'
});
})
</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

我对插件儿实现的理解-献给初学

首先声明:我自己没有写过支持插件儿的程序.插件儿通常情况下会以动态连接库的形式出现,不过它的后缀,其实不一定是DLL.如果大家对动态连接库有一些了解的话,就会想到,动态连接库的分静态调用和动态调用.静...
  • vrix
  • vrix
  • 2005年12月04日 15:41
  • 1855

jquery封装简单的tab切换

tab body{ margin:0; padding:0;} ul,li{ margin:0; padding:0; list-style:none;} .box{ width:400...
  • paddy52
  • paddy52
  • 2016年12月12日 16:25
  • 1507

从零开始写一款javascript插件(一)——tab选项卡

上一次写了《从零开始学习制作H5场景应用》系列,反响还算好,所以趁最近不是太忙,继续新的系列,从零开始写javascript插件。今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成java...
  • hjb2722404
  • hjb2722404
  • 2016年02月19日 14:44
  • 3636

插件化理解

1.插件化的形式其实有挺多种,之前xian
  • crissJs
  • crissJs
  • 2014年07月22日 14:11
  • 819

【slighttpd】基于lighttpd架构的Server项目实战(10)—插件&动态库

上一节我们介绍了状态机,本节我们将添加插件模块,之后就可以根据公共接口来开发插件,而我们的server则只需要通过状态机调用相应阶段的公共函数,无需关心插件的实现细节。我们的插件将以动态库so的形式来...
  • jiange_zh
  • jiange_zh
  • 2016年02月12日 13:45
  • 1461

Eclipse装插件的几种方式

为eclipse装插件是每个使用eclipse的开发人员的基本功。废话不多少,let's go! 方式一:依次点击Help-->Eclipse Marketplace,在弹出的对话框里(如果你网速不好...
  • cktmyh
  • cktmyh
  • 2015年09月18日 09:50
  • 568

深入理解插件系统

> 要开发一个成功的系统,插件是必经之路。 - 对于小朋友来说,积木是木头塑料,用这些小积木可以拼成房子、动物。 - 对于建筑工人来说,积木是零砖碎瓦,用这些小积木可以构建高楼大厦。 - 对于程序员...
  • u011012932
  • u011012932
  • 2017年09月29日 15:25
  • 2671

移动端插件-快速生成tab插件(纯手写+亲测)

最近工作中用到较多的tab栏切换,心头一热写了一个 快速生成tab切换栏的插件: 插件名字: quick.tab.js js文件名字:quick.tab.js js文件的代码:  (...
  • ITzhongzi
  • ITzhongzi
  • 2017年08月17日 20:52
  • 361

怎么将 Android 程序做成插件化的形式?

Android 插件化 动态升级 不少朋友私信问到这个问题,这里简单介绍下我的了解 1、作用 大多数朋友开始接触这个问题是因为 App 爆棚了,方法数超过了一个 Dex 最大方法...
  • u011028777
  • u011028777
  • 2016年11月22日 17:17
  • 504

三个超实用的移动端触摸滑动js插件

目前移动端的触摸滑动js插件非常的多,25学堂的小编帮大家整理了三个非常好用的移动端触摸滑动js插件。以免大家搞错这些移动端触摸滑动js插件。找到不合适的移动端触摸滑动js插件,反而浪费H5前端工程师...
  • u011482763
  • u011482763
  • 2017年03月10日 16:00
  • 3085
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:理解插件,Tab切换插件形式。
举报原因:
原因补充:

(最多只允许输入30个字)