0
jQueryステップウィザード内でMaterialize css select要素を機能させるのに問題があります。そして、私はこの男Jon VadilloがCodePen（https://codepen.io/jonvadillo/pen/xObWmw）の彼の例で同じ問題を抱えていることがわかりました。Materialize css selectがjqueryのステップで動作しない
select要素をクリックすると、決してアクティブになりません。私はjQuery Stepsウィザードの外でselect要素を移動しようとしましたが、すべてが意図どおりに機能します。 （https://codepen.io/allanlange/pen/EWQzBb）
$('.datepicker').pickadate({
min: new Date(),
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year
firstDay: 1
});
var picker = $('#beginDate').pickadate('picker');
picker.set('select', new Date());
var picker = $('#endDate').pickadate('picker');
picker.set('select', new Date());
$('select').material_select();
var form = $("#example-form");
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
/* Labels */
labels: {
cancel: "Cancel?",
current: "current step:",
pagination: "Pagination",
finish: "Finish!!",
next: "Next >",
previous: "< Previous",
loading: "Loading ..."
},
onStepChanging: function(event, currentIndex, newIndex) {
return true;
},
onFinishing: function(event, currentIndex) {
return true;
},
onFinished: function(event, currentIndex) {
alert("Submitted!");
}
});/*
Common
*/
.wizard,
.tabcontrol {
display: block;
width: 100%;
overflow: hidden;
}
.wizard a,
.tabcontrol a {
outline: 0;
}
.wizard ul,
.tabcontrol ul {
list-style: none !important;
padding: 0;
margin: 0;
}
.wizard ul>li,
.tabcontrol ul>li {
display: block;
padding: 0;
}
/* Accessibility */
.wizard>.steps .current-info,
.tabcontrol>.steps .current-info {
position: absolute;
left: -999em;
}
.wizard>.content>.title,
.tabcontrol>.content>.title {
position: absolute;
left: -999em;
}
/*
Wizard
*/
.wizard>.steps {
position: relative;
display: block;
width: 100%;
}
.wizard.vertical>.steps {
display: inline;
float: left;
width: 30%;
}
.wizard>.steps .number {
font-size: 1.429em;
}
.wizard>.steps>ul>li {
width: 25%;
}
.wizard>.steps>ul>li,
.wizard>.actions>ul>li {
float: left;
}
.wizard.vertical>.steps>ul>li {
float: none;
width: 100%;
}
.wizard>.steps a,
.wizard>.steps a:hover,
.wizard>.steps a:active {
display: block;
width: auto;
margin: 0 0.5em 0.5em;
padding: 1em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard>.steps .disabled a,
.wizard>.steps .disabled a:hover,
.wizard>.steps .disabled a:active {
background: #eee;
color: #aaa;
cursor: default;
}
.wizard>.steps .current a,
.wizard>.steps .current a:hover,
.wizard>.steps .current a:active {
background: #2184be;
color: #fff;
cursor: default;
}
.wizard>.steps .done a,
.wizard>.steps .done a:hover,
.wizard>.steps .done a:active {
background: #9dc8e2;
color: #fff;
}
.wizard>.steps .error a,
.wizard>.steps .error a:hover,
.wizard>.steps .error a:active {
background: #ff3111;
color: #fff;
}
.wizard>.actions {
position: relative;
display: block;
text-align: right;
width: 100%;
}
.wizard.vertical>.actions {
display: inline;
float: right;
margin: 0 2.5%;
width: 95%;
}
.wizard>.actions>ul {
display: inline-block;
text-align: right;
}
.wizard>.actions>ul>li {
margin: 0 0.5em;
}
.wizard.vertical>.actions>ul>li {
margin: 0 0 0 1em;
}
.wizard>.actions a,
.wizard>.actions a:hover,
.wizard>.actions a:active {
background: #2184be;
color: #fff;
display: block;
padding: 0.5em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard>.actions .disabled a,
.wizard>.actions .disabled a:hover,
.wizard>.actions .disabled a:active {
background: #eee;
color: #aaa;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/rstaib/jquery-steps/master/build/jquery.steps.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="row">
<div class="input-field col s6">
<select>
<option value="" disabled selected>Choose event type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Event type</label>
</div>
<div class="col s12">
<form id="example-form">
<div>
<h3>Account</h3>
<section>
<div class="row">
<div class="input-field col s12">
<input placeholder="Event title" id="title" type="text" class="validate">
<label for="title">Title</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<select multiple>
<option value="" disabled selected>Choose style(s)</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Styles</label>
</div>
</div>
</section>
<h3>Profile</h3>
<section>
<div class="row">
<div class="input-field col s6">
<label>Begin date</label>
<input id="beginDate" type="date" class="datepicker">
</div>
<div class="input-field col s6">
<label>End date</label>
<input id="endDate" type="date" class="datepicker">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="Who is organizing the event?" id="organizer" type="text" class="validate">
<label for="organizer">Organizer</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="http://www.mywebsite.com" id="website" type="text" class="validate">
<label for="website">Website</label>
</div>
<div class="input-field col s6">
<input placeholder="[email protected]" id="email" type="text" class="validate">
<label for="email">Contact email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="description" class="materialize-textarea" length="140"></textarea>
<label for="description">Describe the event in a tweet!</label>
</div>
</div>
</section>
</div>
</form>
</div>
</div>