I'm using dojo toolkit dijit.layout.TabContainer to switch 3 tabbed pages.
Right now I click on tabs to switch them, but I want to switch them by mouse over instead.
Can a TabContainer be configured to switch by mouse over, or should I write a code to handle mouse over events to explicitly switch tabs?
I'd appreciate any suggestions!
-Sari
Yes. For this functionality, we need to add the onmouseover event to the tabs label fields. Add this code inside the dojo/ready (or addOnLoad) function.
require(["dojo/ready","dojo/query"], function(ready,query){
ready(function(){
var tabs = dijit.byId("TabContainerID");
query("#TabContainerID.dijitTabInner").onmouseover(function(evt){
var tablabelid = dijit.getEnclosingWidget(evt.target).id;
var currentId = dijit.byId("TabContainerID").selectedChildWidget;
var tabwidid = tablabelid.split("_").pop();
if(tabwidid && currentId!=tabwidid) {
tabs.selectChild(tabwidid);
}
});
});
});
Related
How do I listen for right mouse button(Context menu activation) in Ckeditor 5 when the user click on an element in the editor.
For left mouse button I use ClickObserver which works perfectly, but ClickObserver don't seem to work for the right mouse button
As per CKEditor migration document, context menu options are removed in CKEditor 5 and official standard is to use contextualToolbar.
CKEditor 5 does not come with a context menu, contextual inline
toolbar is preferred instead to offer contextual actions.
Update:
I found a hack which you could use, but I wouldn't recomment it so USE IT AT YOUR OWN RISK!
function onEditorMouseDown(evt) {
if (evt.which == 3) {
alert('You right clicked the editor!');
}
}
var elem = document.querySelector('#editor1');
var cEditor = ClassicEditor
.create(elem)
.then(function(editor) {
let container = editor.ui.view.editable.element;
if (container) {
container.addEventListener('mousedown', onEditorMouseDown);
}
})
.catch(function(err) {
console.error(err.stack);
});
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
<h1>CKEditor 5 Example</h1>
<textarea id="editor1"></textarea>
Explanation:
What I'm doing here is finding out editable area within the editor and adding a event listener for mousedown event on the element.
I hope this helps!
I can markup a Heading or ListItem to have a moveTo attribute and that transition works perfectly.
Is there a way perform a transition to a named view programmatically say, on a button click?
Somewhere on the net I found below code, but its not working. I need something similar to this -
function moveTo(){
var w = dijit.byId('currentView');
w.performTransition('#newView',1,"fade",null);
}
This code sample registers an onclick event handler on a button with the id "ButtonID". After pressing the button, a lookup in the dijit registry will be performed to find the displayed view.
You can call the function performTransition(...) on any dojox.mobile.View.
require(["dijit/registry"], function(registry) {
dojo.ready(function() {
// Button Listener
registry.byId("ButtonID").on("click", function(){
var oldView = dijit.registry.byId("ID_View1");
oldView.performTransition("ID_View2", 1, "slide", null);
});
});
But:
Changing "moveTo" parameters programmatically is much more difficult than performing transitions between views. You have to do some nasty things to override the moveTo Attribute of a widget like for example a Backbutton in a dojox.mobile.Heading
var heading1 = dijit.registry.byId("ID_Heading");
heading1.destroyDescendants();
heading1.moveTo = viewId;
heading1.backButton = false;
heading1._setBackAttr("Zurück");
My application has a WinJS AppBar control at the bottom of the screen. I use .showOnlyCommands(buttonsToShowArray) to show and hide buttons on ListView itemSelectionChanged event.
The problem I have right now is that when every I call .showOnlyCommands, the buttons to be hidden (or you may say "replaced") are going to flash on the top of the screen.
I tried to use the Microsoft sample app, this doesn't happen. I tried to use .showCommands + .hideCommands method, it is the same behavior. Note that this didn't happen before the Release Preview version of Win8.
I have no idea what is going on. Any idea?
EDIT:
I did further investigation, the problem happens on hideCommands. Say I have 3 buttons displayed on the appbar. I call hideCommands to hide all 3 buttons. The icon of the 3 buttons would disappear on the appbar, then pile up at the top-left corner of the screen and then disappear. (i.e. there would be a flash of 3 piled up buttons at the corner of the screen).
You may be invoking showOnlyCommands when the AppBar is in the process of 'showing'. I've found that when calling these methods in the beforeshow or aftershow handler that this happens. This quote from Animating your UI sheds light on why:
Use fade in and fade out animations to show or hide transient UI or controls. One example is in an app bar in which new controls can appear due to user interaction.
The sample app shows/hides the buttons before the appbar is shown. You may be calling show on the app bar before calling showOnlyCommands.
A temporary hack for this problem is:
Set the button be invisible before calling showOnlyCommands or HideCommands.
Here is the code that I use for now:
/*
* #param {WinJS.UI.AppBar} appbar winControl
* #param {Array} array of appbar buttons to be shown
*/
function showOnlyCommands(appbarControl, buttonsToShow) {
var toShow = {};
for (var i = 0; i < buttonsToShow.length; i++) {
toShow[buttonsToShow[i].id] = true;
}
for (var i = 0; i < visibleButtonsList.length; i++) {
var id = visibleButtonsList[i].id;
if (!toShow[id]) {
// set the display property of the buttons to be hidden to "none"
var button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
}
}
// update the visible buttons list
visibleButtonsList = buttonsToShow;
// Note that we don't need to set the "display" property back for the buttons,
// because WinJS.UI.AppBar.showOnlyCommands would set it back internally
appbarControl.showOnlyCommands(buttonsToShow);
}
Can anyone help me with a link where I find Dojo sliding panel ? I have been searching for it but still didn't got it. I have sliding panel for jQuery, I got it from this link : http://web-kreation.com/all/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/
You could make use of the dojo.fx.wipeIn functionality.
http://dojotoolkit.org/reference-guide/1.7/dojo/fx/wipeIn.html
So if you create two divs, one above the other, have the top one with display: none, and the other as the bit that you click to slide the panel down. Then use dojo.connect to link the clicking of the bottom panel to a wipe in of your top panel.
e.g.
// Have your main body content
var mainBody;
// Create top panel
var myPanel = document.createElement("div");
// Set visibility to none
dojo.style(myPanel, "display", "none");
// Create tab to expand your panel (or slide it down)
var expand = document.createElement("div");
expand.innerHTML = "click here to slide down";
mainBody.appendChild(myPanel);
mainBody.appendChild(expand);
var self = this;
dojo.connect(expand, "onclick", this, slidePanel);
Then you'd have your slidePanel function do something like:
// Get reference to your panel
var myPanel;
var wipeArgs = {
node: myPanel
};
// Then just wipe the panel in or out respectively
if (myPanel.style.display == "none") {
dojo.fx.wipeIn(wipeArgs).play();
} else {
dojo.fx.wipeOut(wipeArgs).play();
}
I'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.