Jquery插件--实现面板模拟效果

原创 2012年03月28日 17:29:15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css">
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
  //当窗体加载完毕的时候 触发该匿名函数
  
  //$(document) //把dom对象转换成jquery对象
  
  //.ready(function (){});

$(function(){
	$("#tabs").tabs({//根据id选择器获取当前
	
	event:"mouseover",//event面板激活的事件效果处理 默认的是click
	//disabled:[1],//面板不可用,1代表的是第二个面板不可用 [1,2]
	fx:{
		opacity:'toggle',//透明度从无到有的一个动画的效果
		
		},
		selected:1,
	});
	
	$("#tabs").tabs("remove",2);
	$("#tabs").tabs("add","tab4.html","four");
	
	});
</script>




</head>

<body>
   <h1>模拟tabs效果</h1>
     <div id="tabs">
       <ul>
       <li><a href="#tab-1">面板1</a></li>
       <li><a href="#tab-2">面板2</a></li>
       <li><a href="#tab-3">面板3</a></li>
       <li><a href="tab4.html">面板4</a></li>
       
       </ul>
     <div id="tab-1">
     1111111111111111111
     </div>
     <div id="tab-2">
     2222222222222222
     </div>
     <div id="tab-3">
     33333333333333333333333
     </div>
     </div>
</body>
</html>

效果图


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery插件面板效果

面板效果 $(document).ready(function (){ $("#tabs").tabs({ event:"clic...

jQuery插件实现模拟dialogs效果实例(图片)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 模拟dia...

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

jquery插件实现幻灯效果

  • 2015-04-14 13:06
  • 814KB
  • 下载

用jquery插件-slider实现滑块的效果

滑块的效果 <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.

利用jquery插件中的拖拽与放置实现的相册效果,可以删除和恢复

该效果为官方提供,本人只是进行了一下翻译,加了些详细注释供大家参考,对大家有帮助就ok了,如有解释错误谢谢提出。 以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢: j...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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