Button调用的模式对话框:单击按钮时,将触发事件,结果事件引用e.relatedTarget未定义.那么,如何从处理程序中获取调用按钮？e似乎不包含对调用按钮的任何引用.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
jQuery的:
$('#myModal').on('show.bs.modal', function (e) {
console.log(e.relatedTarget) // do something...
})
我想添加使用http://exacttarget.github.com/fuelux/来构建数据网格.我想添加库来使用它.我做了以下事情:
<link href="<spring:url value='/assets/css/fuelux.min.css' htmlEscape='true' />" media="all" rel="stylesheet" type="text/css" />
<link href="<spring:url value='/assets/css/fuelux-responsive.min.css' htmlEscape='true' />" media="all" rel="stylesheet" type="text/css" />
<script src="<spring:url value='/assets/js/fuelux-datagrid.js' htmlEscape='true' />" type="text/javascript"></script>
我确信路径是正确的,因为它们在其他库中工作.但是,我收到以下错误:
ReferenceError: define is not defined
[Break On This Error]
define(['require','jquery'],function(require) {
define(['require','jquery'],function(require) {...代码在哪里fuelux-datagrid.js.
define是require.js的关键字.这是否意味着fuelux-datagrid依赖require.js？我在使用FuelUX的datagrid组件时遇到了麻烦.我实现datagrid组件的网站页面,bootstrap提供的下拉菜单停止工作.
我正在使用:jQuery 1.9.0,fuelUX 2.3.0,Bootstrap 2.3.1我不使用:requireJS.
我引入了FuelUX css文件和loader.js文件.引导菜单适用于除此之外的每个其他页面.datagrid组件似乎运行得很好,除了它自己的选择菜单也不工作.
有什么指针吗？
我没有看到任何相关的文档.
如何在向导组件中手动选择哪个面板处于活动状态？
我知道它在某处,因为您可以在其中一个标签通过后点击其中一个标签,然后导航回上一个标签页.
我正在使用fuelUX向导和Angularjs.我希望根据此控制器方法启用或禁用下一个按钮:
$scope.canMoveForward = function(){
switch($("#moduleWizard").wizard("selectedItem").step){
case 1:
//check if the module on the first step is valid*/
return $scope.validSelection && $scope.linkedPredicateForm.$valid;
case 2:
//check if the table is empty
return !linkingDataSource.isEmpty();
case 3:
var enab= ($scope.saveModeForm.$valid && $scope.newSourceForm.$valid) ||
($scope.saveModeForm.$valid && $scope.appendSourceForm.$valid)
}
};
确实这就是我如何删除按钮:
<div class="actions">
<button class="btn btn-mini btn-prev" ng-click="refresh()"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish" id="wizard-next" ng-disabled="!canMoveForward()"
ng-click="handleStepResult()">
Next<i class="icon-arrow-right"></i></button>
</div>
它工作正常,除非我从第二页返回到第一页:如果第二页中的下一个按钮被禁用,即使在第一页也是如此,除非我不在那里编辑表单.无论如何刷新ng-disabled绑定？
我正在尝试实现Fuelux的向导功能并且已经碰壁了.我只是尝试实现实例的工作副本,但在我的控制台中继续收到错误:
Uncaught TypeError: Object [object Object] has no method 'wizard'
我发现很多文档有点压倒性的,并且会对普通[或更简洁]英语中的主题有所了解.
我的标记是:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button> …根据文档,我应该能够挂钩Fuel UX向导组件的change事件.但对于我的生活,我无法弄清楚如何.我仍然是jquery和javascript的新手.
Javascript我尝试过以下内容
var wizard = $('#MyWizard');
wizard.on('change', '.wizard', function () {
alert('OH SNAP!');
});
wizard.wizard().on('change', function () {
alert('OH SNAP!');
});
......以及其他一些没有成功的变化.
我想我搞砸了某个地方的基础知识.我将如何向on change事件添加自定义事件.(因为id喜欢只有一个内容区域,但是在更改事件id上喜欢让服务器为我提供填充每个向导步骤所需的内容)
我已经将一个表单嵌套在fuelux向导中.如果用户单击下一个按钮,则不会显示bookstrap必填字段.是否有任何方法可以要求用户无法通过单击下一步进行直到输入所需的字段？
这是输入的一个例子
<tr>
<td>3</td>
<td><label class="control-label" for="inputCompanyCountry">Country <span style="color:red">*</span></label></td>
<td><div class="controls controls-extra"><input type="text" id="inputCompanyCountry" name="inputCompanyCountry" value=""required></div></td>
<td><div class="help-inline">Country of residence</div></td>
</tr>
用于下一个和上一个按钮的脚本
$(function() {
$('#MyWizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#MyWizard').on('changed', function(e, data) {
console.log('changed');
});
/*$('#MyWizard').on('finished', function(e, data) {
console.log('finished');
});*/
$('#btnWizardPrev').on('click', function() {
$('#MyWizard').wizard('previous');
});
$('#btnWizardNext').on('click', function() {
$('#MyWizard').wizard('next','foo');
});
$('#btnWizardStep').on('click', function() {
var item = $('#MyWizard').wizard('selectedItem');
console.log(item.step);
});
});
我正在尝试使用燃料ux向导组件,如示例所示:
http://exacttarget.github.io/fuelux/#wizard
但它无法正确显示.
我的代码是:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fuelux.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/fuelux/require.js"></script>
<script src="js/fuelux/all.js"></script>
</head>
<body>
<div class="container">
<div id="workflowWizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
<div class="step-content">
<div class="step-pane …我正在尝试使用fuelux datepicker,甚至无法正确初始化它!非常感激任何的帮助.我的基础是这里的例子:https://gist.github.com/vernak2539/9980566
页面标题:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.4.0/css/fuelux.min.css" rel="stylesheet">
HTML:
<div class="fuelux">
<div class="datepicker dropdown" id="myDatepicker">
<div class="input-append">
<div class="dropdown-menu"></div>
<input type="text" class="span2" value="" data-toggle="dropdown">
<button type="button" class="btn" data-toggle="dropdown">
<i class="icon-calendar"></i></button>
</div>
</div>
在我的JS之前:
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.4.0/js/fuelux.min.js"></script>
JS:
$(document).ready(function(){
$('#myDatepicker').datepicker();
});
也尝试了一个小提琴,并认为这是足够的但它不起作用:http: //jsfiddle.net/z2rpos9g/
fuelux ×10
jquery ×7
javascript ×5
wizard ×3
datagrid ×2
angularjs ×1
datepicker ×1
dialog ×1
events ×1
jquery-ui ×1
modal-dialog ×1
requirejs ×1