I am using Angular UI Bootstrap to create a popover but I am unable to find the option to add a close button inside the popover.
I customized the popover template to include the close button. But I am still unable to find a function/event to close the popover. Setting isOpen to false works for the first time as it just overwrites the function - but thereafter becomes unusable.
<button popover-placement="bottom" popover="test">POPOVER WITH CLOSE<button>
Here is the template script:
angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/popover/popover.html",
"<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\n" +
" <button ng-click=\"isOpen = !isOpen()\" class=\"btn-popover-close btn btn-primary\">Close</button>\n" +
" <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\" ng-bind=\"content\"></div>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
I thought of writing a directive for close button to trigger the 'click" event of "POPOVER WITH CLOSE" button. But I am not sure if that's the approach to follow.
What's the correct approach to follow?
The right solution now is to specify a popover template via the uib-popover-template attribute and bind your template's close button's ng-click handler to the popover's popover-is-open property. We added this property to allow the user to "ignore" the provided trigger options (by specifying popover-trigger="none" and give the user full control over when to show and hide the popover.
You may see the updated docs (and examples) here.
I changed the tooltip and popover code.
Here is how it looks like plunker
Here is the pull request for this.
Related
I am trying to create a simple confirmation ("Do you want to close this window?") when closing a modal dialog page with the (X)-button.
What would be the most efficient way to implement this in Apex 5.0?
I tried to implement a solution using the dialog closed event, this seemed to have had no effects on closing the dialog with the (X)-button, however.
Try to create a dynamic action, on page load, in your modal page with that code:
Your da should execute a javascript code:
var button = parent.$('.ui-dialog-titlebar-close'); //get the button
button.unbind(); //remove the behavior
//put another behavior to the button
button.on('click', function() {
apex.message.confirm( "Your message here", function( okPressed ) {
if( okPressed ) {
apex.navigation.dialog.cancel(true);
}
});
});
Try to confirm if the "X" button have the css class "ui-dialog-titlebar-close", they can change between versions of apex.
If necessary, update the first line of the code with the correct class.
Have you considered hiding the button (x) and canceling the modal dialog page by clicking on the "cancel" button?
If you want to rename the standard button names in the confirmation window, use:
apex.lang.addMessages({"APEX.DIALOG.OK": pOkLabel});
apex.lang.addMessages({"APEX.DIALOG.CANCEL": pCancelLabel});
I cannot disable a tabstrip button. Ive tried the following running within the Tabstrips Activate event
tabButton.data("kendoButton").enable(false)
-- fails because the button isnt a kendo button
tabButton.addClass("disabled")
-- fails, disabled is added, but button is still usable
where tabButton was derived along the following lines, I know I gottten it.
var tabButton = $(".k-button")
I resolved the issue by adding a css & class as in
.disable_a_href { pointer-events: none; }
tabButton.addClass("disable_a_href")
TabStrip has explicit enable and disable functions.
If you want them to start disabled, use the class k-state-disabled on the <li> element.
Here's a fiddle showing both of these methods. Tab 2 will start disabled, and tab 3 can be toggled.
To disable all tabstrip except the active you can use this code:
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.enable(tabStrip.tabGroup.children().not(".k-state-active"), false);
I use a very simple approach ...
var tabstrip = $("#yourtabstripID").data("kendoTabStrip");
var tabContentID = $("content_div_of_that_tab").parent().attr('id');
//Enable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], true);
//Disable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], false);
I feel the code above is pretty self explanatory ...
I would like to have a button and when the user clicks on it a filter form pops down just below the button. I would like to utilize Kendo UI controls to achieve the effect.
In fact, what I need is almost exactly the 'filtering' that can be found on this example:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
However, I'm not dealing with a grid of data so I can't use that example above.
There are different possible implementations. Here I will describe one based on kendoWindow since then you have a lot of possible customizations for that filtering form.
This is the HTML that includes the button:
<div>
This is the container that includes a
<button id="filter" class="k-button">Filter</button>
that is used to display a form
</div>
And then you define the HTML form. Example:
<div id="form">
<div>Filtering value:<input data-role="autocomplete"/></div>
<button class="k-button">Filter</button>
</div>
Doing the form initialization is:
var form = $("#form").kendoWindow({
title : "Filter",
visible : false,
modal : false,
draggable: false
}).data("kendoWindow");
Where initially we set the form as not visible.
You can define it as modal, draggable or even define the opening and closing effect.
Finally, for opening and placing the form just bellow the button you should:
$("#filter").on("click", function(e) {
// Find clicked button
var button = $(e.currentTarget);
// and get its position
var pos = button.offset();
// shift down the form to open by the height of the button + 5px (margin)
pos.top += button.outerHeight() + 5;
// Apply positioning to the form
form.wrapper.css(pos);
// display form
form.open();
});
You can see this here : http://jsfiddle.net/OnaBai/mpq6k/
I'm trying to toggle the visible property of a Kendo UI window through the data-bind method using an MVVM pattern but it is not responding as it should according to the Kendo documentation.
<div id="KendoWindow"
data-role="window"
data-bind="visible:WindowVisible"
data-title="Title does not show"
data-width="500"
data-height="300"
>
<div class="span4" >
<label for="Comment">Comments</label>
<textarea id ="Comment" data-bind="value: Comment"></textarea>
</div>
I am initializing it properly but if I set the WinowVisible property to false in the viewModel like so,
this.set("WindowVisible", false);
the window stays visible.
If I set it through jQuery like so :
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:false
});
it will then become invisible. Then I can't make it visible again if I run this code:
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:true
});
Maybe try adding data-visible="false" to the window, then when the ShowWindow becomes true, it should become visible. I have a checkbox bound to the boolean value, as well as a button click function setting the boolean and both seem to work fine.
See sample...
http://jsbin.com/jecih/1/edit
I have defined both the template and filetemplate options for the fineUploaderS3 object.
I have been able to change the look of the qq-upload-button element, by changing the div to a button, and setting it as a button after the uploader creations.
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
'<button class="qq-upload-button"><div>{uploadButtonText}</div></button>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
...
$('.qq-upload-button').button();
Though the button changes, and works when clicked on to add files, the files do not get shown in the list, it obviously is broken.
What is the correct way to make the Upload button use the current jQueryUI style button?
Update 1
After reading the following thread: How to assign custom css class to upload button in fineuploader?
It appeared as though the upload button would be very problematic to try to change into a normal jQueryUI button.
So I solved the problem by changing the upload button to 'display:none;', created my own generic jQueryUI button, on the clicking of my button, send a click to the hidden button.
Solution:
<button id="addFiles">Add Files</button>
...
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
'<div class="qq-upload-button" style="display:none;"><div>{uploadButtonText}</div></div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
...
$('#addFiles').click(function() {
$(".qq-uploader input").click();
});
Your solution will not work on IE9 and older since programmatically clicking an input element is not allowed in those browsers.
Using a button element as your upload button will not work on IE9 and below because those browsers intercept change events on button elements before Fine Uploader is able to. Also, the jQuery-UI button constructor must add some logic that intercepts events too because I needed to instantiate it before Fine Uploader. Possibly related to an earlier question regarding Bootstrap's button.
The cross-browser solution would be to first render your button as a div instead of a button, then instantiate jQuery-UI's button() on that element, then instantiate an instance of Fine Uploader with the button option set as that element. Also, with the changes I've proposed, you can do away with the template option. Fine Uploader has some logic in the default template which adds or removes its own button element based on the presence of the button option.
<h3>Fine Uploader</h3>
<div id="addFiles"">Add Files</div>
<div id="jquery-wrapped-fine-uploader"></div>
$(document).ready(function() {
// Construct jQuery-UI button
$("#addFiles").button();
// Instantiate Fine Uploader
$('#jquery-wrapped-fine-uploader').fineUploaderS3({
button: $("#addFiles")
});
});