模態對話框中的JQuery UI Slider
[英]JQuery UI Slider inside Modal Dialog
問題描述
我的JQuery UI Slider小部件未顯示在Modal中，但確實以正常內容顯示。
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<span>SLIDER?</span>
<div class="slider"></div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<div>
<span>SLIDER OK</span>
<div class="slider"></div>
</div>
</div>
</body>
</html>
JavasCript
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {
$scope.animationsEnabled = true;
$scope.open = function(size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
$(function() {
$(".slider").slider();
});
2 個解決方案
解決方案1
1 2016-06-02 17:07:29
此答案沒有將AngularJS指令與引導模態和JQUERYUI混合使用，因此我保留了JQuery UI模態和滑塊：
<!DOCTYPE html>
<html lang="en">
<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<meta charset="utf-8" />
<title>dialog demo</title>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog
<div id="slider"></div>
</div>
</body>
</html>
JS
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog").dialog("open");
$("#slider").slider();
});
});
解決方案2
1 已采納 2016-06-02 17:33:48
問題在於，滑塊是在頁面加載而不是模式打開時創建的。 然后，在開始時創建滑塊，而在模式中時則失敗。
可能的解決方案是在模式打開時創建滑塊（並在選擇器中指定它將是模式內部的滑塊，否則jQuery似乎也會為模板中的代碼創建滑塊）。
這是一個演示，它盡可能少地修改了原始代碼（我將滑塊的創建移到了打開並渲染模式的函數中）：
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) { $scope.items = ['item1', 'item2', 'item3']; $scope.animationsEnabled = true; $scope.open = function(size) { var modalInstance = $uibModal.open({ animation: $scope.animationsEnabled, templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function() { return $scope.items; } } }); modalInstance.rendered.then( function() { $(".modal-body .slider").slider() }); modalInstance.result.then(function(selectedItem) { $scope.selected = selectedItem; }, function() { $log.info('Modal dismissed at: ' + new Date()); }); }; }); // Please note that $uibModalInstance represents a modal window (instance) dependency. // It is not the same as the $uibModal service used above. angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) { $scope.cancel = function() { $uibModalInstance.dismiss('cancel'); }; });
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div ng-app="ui.bootstrap.demo"> <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <div class="modal-body"> <span>SLIDER?</span> <div class="slider"></div> </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> </div> </script> <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> <div> <span>Slider OK</span> <div class="slider"></div> </div> </div> </div>
如何使用JQuery UI在模式對話框內顯示javascript圖形？
[英]How to display a javascript graph inside a modal dialog using JQuery UI?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.