jquery 在覆盖层上处理tabview

【在覆盖层上处理tabview】


在各式各样的业务中、覆盖层的使用给我们带来了很多的方便;tabview也不例外,在比较特殊的业务中需要处理覆盖层上显示tabview;我选择两个JQUERY的插件。
[list]
【1】thickbox 覆盖层 [url]http://jquery.com/demo/thickbox/[/url]
【2】jquery.tabs tabview[url]http://stilbuero.de/jquery/tabs_3/[/url]
[/list]
在适当的位置上下载插件的例子。
需要导入的js \ css文件

<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="thickbox-compressed.js" type="text/javascript"></script>
<script src="jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="jquery.tabs.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.tabs.css" type="text/css" media="print, projection, screen">
<link rel="stylesheet" href="thickbox.css" type="text/css" media="print, projection, screen">

js代码 十分的简单

<script type="text/javascript">
$(function() {
$('#container-1').tabs();
});
</script>


覆盖层的超链接

<a href="#TB_inline?height=455&width=600&inlineId=dispalyDIV&modal=true" class="thickbox">弹出层</a>

弹出层里的HTML代码

<div id="displayDIV" style="display:none">
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span>默认文件夹</span></a></li>
<li><a href="#fragment-2"><span>Java文件夹</span></a></li>
<li><a href="#fragment-3"><span>.net文件夹</span></a></li>
</ul>
<div id="fragment-1">
<p>默认文件夹</p>
<pre><code>$('#container').tabs();</code></pre>
</div>
<div id="fragment-2">
<P>java文件夹</P>
</div>
<div id="fragment-3">
<P>.net文件夹</P>
</div>
</div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!对于在QML中使用TabView进行动画效果的问题,可以尝试使用动画属性来实现。以下是一个简单的示例: ``` import QtQuick 2.15 import QtQuick.Controls 2.15 TabView { width: 400 height: 300 Tab { title: "Tab 1" Rectangle { color: "red" } } Tab { title: "Tab 2" Rectangle { color: "blue" } } Tab { title: "Tab 3" Rectangle { color: "green" } } // 添加一个动画属性 property real animationValue: 0 // 当动画值发生变化时,更新TabView的contentX属性,实现平滑滑动效果 onAnimationValueChanged: { tabView.contentX = animationValue * -tabView.width } // 在TabView上添加鼠标区域,当鼠标在区域内滑动时,触发动画效果 MouseArea { anchors.fill: parent onPositionChanged: { // 根据鼠标移动的距离计算动画值 var distance = (mouseX - startX) / parent.width animationValue = distance } onPressed: startX = mouseX onReleased: { // 根据动画值确定最终显示的Tab页 var newIndex = Math.round(animationValue) tabView.currentIndex = Math.max(0, Math.min(tabView.count - 1, newIndex)) animationValue = tabView.currentIndex } onExited: { // 处理鼠标移出区域时的情况 animationValue = tabView.currentIndex } } } ``` 在这个示例中,我们通过添加一个动画属性`animationValue`来控制TabView的内容位置。当鼠标在区域内滑动时,我们根据鼠标移动的距离计算动画值,并将其应用于`contentX`属性以实现平滑滑动效果。当鼠标释放时,我们根据动画值确定最终显示的Tab页,并将当前索引设置为该值。 请注意,这只是一个简单的示例,您可以根据自己的需求进行修改和扩展。希望对您有帮助!如有更多问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值