物化滑动选项卡无法在模式中使用 [英] Materialize swipe tabs not working in modal
问题描述
我遇到一个奇怪的问题. 我在物化选项卡上使用了滑动，当我在不使用模式的情况下进行滑动时，效果很好，但是当我将其包含在模式中时，滑动功能将不再起作用
I am encountering a strange problem. I am using swipe on materialize tabs and when i make swipe without the modal it works fine but when i include them in the modal the swipe feature does not work anymore
$(document).ready(function() {
$('.modal').modal();
$('.tabs').tabs({
swipeable: true
});
})
div.tabs-content.carousel.carousel-slider {
height: 200px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<li><a href='#profession-registration-modal' class='orange darken-1 modal-trigger'>Open</a></li>
<div id="profession-registration-modal" class="modal">
<div class="modal-content">
<h4>Register your profession</h4>
<div class="row">
<div class="col s12">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
<li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
</ul>
<div id="test-swipe-1" class="col s12 blue">Test 1</div>
<div id="test-swipe-2" class="col s12 red">Test 2</div>
<div id="test-swipe-3" class="col s12 green">Test 3</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
这是小提琴: jsfiddle
推荐答案
由于默认情况下模态是隐藏的，因此模态内选项卡的常规初始化将不起作用.您可以使用onOpenEnd之类的回调来重新初始化选项卡，以便在完全打开模式后它们可以正确呈现.
Because the modal is hidden by default, normal initialization of tabs within modals won't work. You can use callbacks like onOpenEnd to reinitialize your tabs so that they render correctly once the modal is fully opened.
$('.modal').modal({
onOpenEnd: function(el) {
$(el).find('.tabs').tabs({ swipeable: true });
}
});
以下是使用该回调的更新的小提琴: https://jsfiddle.net/y7rmbd6w/14/
Here is an updated fiddle that uses that callback: https://jsfiddle.net/y7rmbd6w/14/
这篇关于物化滑动选项卡无法在模式中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
