[英]How to FX.Accordion on mootools
我正在創建一個具有手風琴的結帳頁面設計。 我的雇主只允許將mootools作為其js框架,並且不希望在其應用程序上使用jquery。 我將BehaviorUI用於前端框架,因為它是bootstrap的副本,但基於mootools構建。 唯一的問題是我在為下一個手風琴創建下一個/繼續按鈕時遇到麻煩。
到目前為止,這是我嘗試過的,但是沒有運氣:
<div class="panel-group checkout-accordion" id="accordion" data-behavior="Accordion" data-accordion-options="'headers': 'a.accordion-toggle', 'sections': '.panel-collapse'">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle"><span class="badge pull-left custom-badge">1</span>
<h3 class="panel-title"> Checkout Method </h3>
</a>
</div>
<div id="step1" class="panel-collapse">
<div class="panel-body">
<h3>You're Logged in as Erica!</h3>
<a href="#" class="btn btn-primary btn-sm pull-right" data-trigger="reveal" data-reveal-target="!.panel-group .panel #step2">Continue <i class="glyphicon glyphicon-arrow-right"></i></a>
</div>
</div>
</div>
<div class="panel panel-default" id="test">
<div class="panel-heading">
<a class="accordion-toggle"><span class="badge pull-left custom-badge">2</span>
<h3 class="panel-title">Shipping Method</h3>
</a>
</div>
<div id="step2" class="panel-collapse">
<div class="panel-body">
<h3>Destination State And Zip Code</h3>
<div class="form-group">
<label for="state" class="control-label">State</label>
<select id="state" class="no-flat-select form-control">
<option value="0" selected="selected">Select State</option>
<option value="1">Florida</option>
<option value="2">Arkansas</option>
<option value="3">Alaska</option>
</select>
</div>
<div class="form-group">
<label for="zip" class="control-label">Zip Code</label>
<input type="text" class="form-control" id="zip" placeholder="Zip Code">
</div>
<a href="#" class="btn btn-primary btn-sm pull-right">Continue <i class="glyphicon glyphicon-arrow-right"></i></a>
</div>
</div>
</div>
</div>
作為我的目標的進一步解釋。 這是一張可能有幫助的圖片- 鏈接到該圖片
僅查看Behavior.Accordion.js在做什么(可能來自github上的內容 )可能會有所幫助。
它所做的Fx.Accordion
為您創建一個Fx.Accordion
實例。 您對reveal
委托人的使用超出了手風琴的范圍,因為它獨立地知道如何顯示事物,但是它不會調用Fx.Accordion
的任何方法(不會隱藏第一部分) )。
沒問題。 只需編寫一個新的委托人!
Delegator.register('click', {
'showAccordionSection': {
requireAs: {
// gotta tell it which section you want to show
target: String
},
defaults: {
// how to find the accordion instance
// by convention, all selectors are relative to the element with
// the trigger. this default assumes the clicked element is inside
// the accordion.
accordionSelector: '![data-behavior*=Accordion]'
},
handler: function(event, element, api){
// find the target section to show
var target = api.getElement('target');
// we gotta find the accordion instance, so we look for
var accordionElement = api.getElement('accordionSelector');
// get the accordion instance from the element, created by Behavior
var accordionInstance = accordionElement.getBehaviorResult('Accordion');
// no accordion found? fail quietly
if (!accordionInstance) api.fail('Could not retrieve Fx.Accordion instance from element', accordionElement);
// not a section of the accordion? fail quietly
if (accordionInstance.elements.indexOf(target) < 0) api.fail('Target element is not an accordion section', target);
// show it!
accordionInstance.display(target);
}
}
});
只要將其放到您網站的javascript中(當然是在Delegator
之后),就可以了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.