jquery ui 插件实例 （2）

最新推荐文章于 2022-03-28 20:57:27 发布
最新推荐文章于 2022-03-28 20:57:27 发布
阅读量213 收藏
点赞数

2、模拟tabs效果

js效果

[javascript] view plain copy print ?
  1. <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />  
[javascript] view plain copy print ?
  1. <script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js">  
  2. </script>  
  3. <script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>  
  4. <script language="javascript" type="text/javascript">  
  5. //当窗体加载完毕时候 触发该匿名函数  
  6. //$(document) //dom对象转化为jquery对象  
  7. //.ready(function(){})  
  8. $(function(){  
  9.     $("#tabs").tabs({             //根据id选择器获取当前id选择器的jquery对象  
  10.         event:"click",        //  
  11.         //disabled:[1],             //面板不可用 1 代表的第二面板不可用  
  12.         fx:{  
  13.             opacity:'toggle'        //透明度从无到有的动画效果  
  14.             },  
  15.           
  16.         selected:1               //默认选择 1  
  17.           
  18.     });  
  19.     })  
  20.       
  21.       
  22. </script>  


html格式

[html] view plain copy print ?
  1. <body>  
  2. <h1>模拟tabs效果</h1>  
  3. <div id="tabs">  
  4. <ul>  
  5. <li><a href="#tab-1">1</a></li>  
  6. <li><a href="#tab-2">2</a></li>  
  7. <li><a href="#tab-3">3</a></li></ul>  
  8. <div id="tab-1">  
  9. 新闻：gvgi1  
  10.   
  11. </div>  
  12. <div id="tab-2">  
  13. 新闻：gvgi2  
  14.   
  15. </div>  
  16. <div id="tab-3">  
  17. 新闻：gvgi3  
  18.   
  19. </div>  
  20. </div>  
  21. </body>  



实际效果图例：


jjjy00
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery-ui 对话框_jQuery UI对话框插件
从零开始的教程世界
07-19 372
jquery-ui 对话框We will discuss about the jQuery UI Dialog plugin in this post. The jQuery UI Dialog plugin is used for displaying information, which contains a dialog title and a content area. We can mo...
jqueryui手风琴_jQueryUI手风琴插件
从零开始的教程世界
07-19 610
jqueryui手风琴In this post, we will discuss about one of the interesting features that are very useful for the web developers, the accordion. Accordion is an expandable and collapsible stacked list of co...
jQuery ui多功能插件实例
墨鱼部落格
03-14 76
jQuery ui多功能插件实例 这是一款jQuery ui组件库，可定制多种常用网页特效功能。主要有：走马灯图片轮播，复选框/单选框美化，折叠收缩面板，遮罩弹窗对话框，数字输入框，消息提示框，分页，下拉框美化，开关美化，表格排序，tab标签切换等功能实例。一个集合插件，就能完成网站开发大部分功能。你值得拥有！ 演示地址 下载地址 ...
jQuery UI插件基础笔记整理
runner_123的博客
04-28 567
一、jQuery UI插件1、简介：jQuery UI包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件使用相同的模式，只要学会使用其中一个，就知道如何使用其他的小部件（Widget）。2、组成：jQuery UI 主要分为3个部分：交互、微件和效果库。交互：交互部件是一些与鼠标交互相关的内容，包括缩放（Resiza...
jqueryui时间插件_jQueryUI Progressbar插件
从零开始的教程世界
07-13 134
jqueryui时间插件We have discussed about different jQuery UI plugins like datepicker, accordion and autocomplete in the previous posts. We will discuss about another interesting plugin in this post, the P...
jquery ui 插件实例 （1）
03-28 1321
1、模拟accordion效果  js效果 $(function(){ //var option={header:"h3"}; $("#accordion").accordion({ header:"h3", //头信息 h3 必须是h3 页面中是什么 这里必须是什么 event:"mouseover", //面板展开的事件
html animate颜色,jQuery UI 实例
weixin_36164538的博客
06-20 90
jQuery UI 实例 - 颜色动画(Color Animation)使用 .animate() 实现颜色动画效果。如需了解更多有关颜色动画(Color Animation)的细节，请查看 API 文档 颜色动画(Color Animation)。jQuery UI 捆绑了 jQuery Color 插件，jQuery Color 插件提供了颜色动画及其他许多与颜色相关的实用功能。动画(Anim...
jQuery插件，UI
qq_53587164的博客
03-28 283
插件 1.1.常用插件 插件:gruery不可能包含所有的功能，我们可以通过插件扩展jquery的功能，jQuery有看丰富的插件，使用这些插件能给jQuery提供些额外的功， 1.1.1.jquery.color.js animate不支持颜色的渐变，但是使用了jquerycolorjs后，就可以支持颜色的渐变了。 <style> div{ Width;400px; height;400px; Background-color:red; } </style&gt...
jquery ui 插件实例方法
fyname的专栏
06-26 118
引用：http://www.jqueryajax.com/jquery878 jquery ui插件教程及各种效果的jquery ui(接口)详细介绍 基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果： 手风琴式的折叠菜单(accordions)、日历(date pickers...
jQuery ui插件的使用方法代码实例
10-27
标题中提到的“jQuery ui插件的使用方法代码实例”涉及了JavaScript中jQuery UI库的使用，该库是jQuery的核心扩展之一，主要用来提供用户界面的小部件、特效和交互式元素。在描述中提及的内容需要朋友们参考的是一段...
jqueryUI resizeable插件与实例
06-25
在 `test_jqueryUI_resizeable` 文件夹中，可能包含了一个简单的HTML页面、CSS样式文件和JavaScript脚本，演示了如何在实际项目中使用 `resizeable` 插件。打开这些文件，你可以看到如何设置选项、绑定事件以及与...
Wijmo jQuery UI插件集实例 v1.5
05-12
摘要:脚本资源,jQuery,Wijmo　Wijmo是一个基于jQuery UI的组件集，有超过30多个jQuery UI 组件，是一个CSS3，SVG，HTML5的混合物，Wijmo开发了一系列包括图表、、Tab选项卡、滑动门、菜单、上传文件、柱型图、表单...
JQuery UI插件
09-12
**jQuery UI插件详解** jQuery UI 是一个基于jQuery JavaScript库的可扩展的用户界面组件集合。它提供了一系列丰富、交互式的界面元素，如对话框、拖放功能、日期选择器、进度条、 accordions（手风琴效果）和 tabs...
农牧集团企业数字化建设总体规划SAP解决方案参考.pdf
最新发布
08-17
农牧集团企业数字化建设总体规划SAP解决方案参考.pdf
java基于ssm+jsp软件工程项目管理系统源码 带毕业论文
08-17
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
stm32can通信示例
08-17
1、打开两路fifo接收中断 ok 2、打开过滤器配置掩码和列表过滤项 ok 3、测试双机通信 ok 存在问题：1、通信对接收数据时携带标准id打印 id号存在问题，扩展id号打印正常。
培训课件 -危险源辨识及管控安全培训.pptx
08-17
培训课件 -危险源辨识及管控安全培训.pptx
培训课件 -案例开发与教学.pptx
08-17
培训课件 -案例开发与教学.pptx
深入学习jQuery UI开发
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合，提供了各种丰富的交互式元素和视觉效果，如拖放功能、对话框、日期选择器、滑块、 accordions（手风琴效果） 和 tabs（选项卡）。这本书《jQuery UI ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值