0
jQuery Steps 마법사 내에서 Materialize css select 요소가 작동하는 데 문제가 있습니다. 그리고이 사람 Jon Vadillo가 CodePen (https://codepen.io/jonvadillo/pen/xObWmw)에서 자신의 예와 동일한 문제를 겪고있는 것으로 나타났습니다.Materialize CSS select가 jquery 단계와 함께 작동하지 않습니다.
select 요소를 클릭하면 절대로 활성화되지 않습니다. select 요소를 jQuery Steps 마법사 외부로 이동하려고 시도했으며 모든 것이 의도 한대로 작동합니다. $(document).ready에서 $('select').material_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>