Javascript 如何在mootools上使用FX.手风琴
我正在创建一个带有手风琴的结账页面设计。我的雇主只允许mootools作为他们的js框架,不希望在他们的应用程序上使用jquery。我将BehaviorUI用于前端框架,因为它是bootstrap的复制品,但是基于mootools构建的。唯一的问题是我在为下一个手风琴创建下一个/继续按钮时遇到问题 以下是我到目前为止尝试过但没有成功的方法:Javascript 如何在mootools上使用FX.手风琴,javascript,mootools,accordion,behavior-ui,Javascript,Mootools,Accordion,Behavior Ui,我正在创建一个带有手风琴的结账页面设计。我的雇主只允许mootools作为他们的js框架,不希望在他们的应用程序上使用jquery。我将BehaviorUI用于前端框架,因为它是bootstrap的复制品,但是基于mootools构建的。唯一的问题是我在为下一个手风琴创建下一个/继续按钮时遇到问题 以下是我到目前为止尝试过但没有成功的方法: <div class="panel-group checkout-accordion" id="accordion" data-behavior="A
<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在做什么可能会有帮助() 它所做的只是为您创建一个
Fx.Accordion
实例。您使用的reveal
delegator有点超出了手风琴的范围,因为它独立地知道如何显示内容,但它不调用任何Fx.accordion
的方法(不会隐藏第一部分)
不过没问题。只要写一个新的委托人
Delegator.register('click'{
“showAccordionSection”:{
要求:{
//必须告诉它你想展示哪个部分
目标:字符串
},
默认值:{
//如何找到手风琴实例
//按照惯例,所有选择器都是相对于具有
//触发器。此默认值假定单击的元素位于内部
//手风琴。
accordionSelector:“![data behavior*=Accordion]”
},
处理程序:函数(事件、元素、api){
//找到要显示的目标部分
var target=api.getElement('target');
//我们要找到手风琴的例子,所以我们要找
var accordioelement=api.getElement('accordionSelector');
//从元素中获取由行为创建的accordion实例
var accordinstance=accordinelement.getBehaviorResult('accordin');
//找不到手风琴?安静地失败
如果(!accordionInstance)api.fail('无法从元素中检索Fx.Accordion实例',accordionElement);
//手风琴的一部分都没有?安静地失败
if(accordinstance.elements.indexOf(target)<0)api.fail('target元素不是accordin节,target');
//展示它!
手风琴姿态显示(目标);
}
}
});
只要把它放到站点的javascript中(当然是在
Delegator
之后),你就可以开始了。你能在这个JSFIDLE中解释一下哪里出了问题吗?-->请调整它以显示您的问题,以便我们可以帮助您。@Sergio我遇到的问题是anchortag/continue按钮根本不起作用。甚至不会抛出错误。。我已经更新了我的帖子,请尝试查看链接
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);
}
}
});