I am using Kendo panel bar to make a menu. Here I encountered a requirement: enable to open a new tab using panel bar. I found that the router link in the panel bar cannot support my requirement. Does anybody have good solution? Many thanks.
This is very crude as far as looking for something to key off for child elements only but it works. Might something like this work for you? Your question is a little vague, I am assuming you want the ability to open a page in a new tab.
This is for jQuery, just noticed you were looking for angular.
See in JS Fiddle
// event handler for select
var onSelect = function(e) {
// access the selected item via e.item (HTMLElement)
if (!$(e.item).attr("aria-expanded")) {
//Child elements only
window.open("http://www.google.com", "_blank");
}
};
// attach select event handler via bind()
$("#panelbar").data("kendoPanelBar").bind("select", onSelect);
Related
I currently focus on an iOS web app using Apache Cordova and JQuery Mobile.I want to implement a tableview-like style page (it is called listview in JQuery Mobile). I implement a initial list view in html and I'd like to: when I click the different rows, the html will send message to the iOS, and then I create a request with native code. After that, I return the successful result to js and js will update the list view which looks like you click a row in a tableview and a new page is pushed in.
The problem here is:
how to add the click event?
in the click event, how can I know which row is clicked?
how the tableview-like pushing animation is implemented when I use JQuery Mobile to update the list view?
I'm fresh to the web app and it costs several hours to implement dynamicly creating a list with the request result. And I totally do not know how to go further.
thanks for your help.
I. and II. Here's an example for your first and second question:
This is a code example:
$('ul.listview-example[data-role="listview"] li').bind('click',function(event, ui){
alert($(this).attr('id'))
});
First code line will bind a click event on every listview li element. $(this) is a selected li element.
If you are using never version of jQuery us .on( instead of .bind(, in older version you can also use .live( .
EDIT :
III. I think this should cover your third question: http://jsfiddle.net/Gajotres/YShLE/
I have a web part connected to another (provide a row to). It shows the radio button that when clicked correctly provides the data to the second web part.
Can I have this radio button selected by default so that it automatically provides the filter data as soon as the page is loaded?
if you find any jquery/javascript relevent to this please share it and will be more helpful to me.
When you click the radio button from jQuery, the event should be raised as well:
$(document).ready(function() {
$("input:radio[value='your-value-goes-here']").click();
});
Be cautious if you use the value more than once on the page! If possible address the radio button with an id:
$("#Your-Radio-Button-Id").click();
I am using jQuery UI buttonset for an on/off pair of buttons, mainly because of the nice styling you get with it. I want to handle clicks so that when you click one of the two buttons you get a dialog where you can make some more choices, and after that the page reloads with the buttons in their new state (if the state was changed, which may not be the case).
The problem is that the button that you click gets styled as selected before any click handlers are called, it seems. I don't want the selection to change, I want to do that manually.
It seems that the click event is bound to the label that jQuery UI creates, and I'm struggling a bit with unbinding it. I guess I'm also asking if there is some other way to get the style without the function... since buttonset doesn't offer any event handlers I need to catch the click events myself anyway.
The solution I'm thinking of right now is simply copying the html that buttonset generates into my code, keep the css and remove the buttonset call. I thought it might worth it to check on StackOverflow before giving up though. :)
Since jQuery UI doesn't trigger any events that run before for the actual selection is made the workarounds to accomplish this are going to be relatively hacky. The best idea I could come up with is to programmatically remember the previously selected option and then attach a click handler that determines whether you should revert jQuery UI's selection of the new button or not.
$('#parent_container').buttonset();
var selectedButton = $('#parent_container :checked');
$('.ui-button').on('click', function() {
setTimeout(function() {
//Insert your actual check here.
if (true) {
selectedButton.attr('checked', true);
$('#radio').buttonset('refresh');
} else {
selectedButton = $('#parent_container :checked');
}
}, 1);
});
The setTimeout is necessary to ensure that this runs after jQuery UI's click handler. Since you're showing a dialog you might need to alter this to instantly revert the selection, but remember what the user attempted to select for future use.
I have an example of always refusing the user's selection here - http://jsfiddle.net/tj_vantoll/s6XTu/14/
Obviously this is not an ideal approach but it does work. jQuery UI should really add support for selection events; I'll try to get around to filing a ticket for this. The button plugin is due for some updates in 1.11 - http://wiki.jqueryui.com/w/page/12138038/Roadmap.
There seem to be many questions/answers on how to change Twitter Bootstrap's dropdowns from appearing on a click to appearing on a hover. The builders of Bootstrap have a good reason for using click instead of hover -- hover doesn't work on most tablets & phones. However, one of the reasons why I am using Bootstrap is for its responsive features. I want one site that can be viewed on desktops, tablets and phones. Although clicking to get the dropdown is necessary for tablets and phones, it is not the expected behavior for desktops. I'd like my site to be responsive, but not at the expense of having to retrain the users!
Is there a way to serve up hover dropdowns for desktops and click dropdowns for tablets and phones?
I created a plugin (working on a couple refinements, but it definitely works as is) that allows dropdowns to work on hover, but it doesn't interfere with Twitter Bootstrap's click event, so you can safely bind both, which essentially means if there is a mouse, it will activate on hover, but if there's not a mouse (i.e. a touchscreen on a tablet), it will still activate when clicked.
I have the plugin hosted on GitHub: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown
It works by explicitly calling it, but I'm going to tweak the code to work with data-attributes in the near future.
You can with "Responsive utility classes"
http://twitter.github.com/bootstrap/scaffolding.html at the bottom of the page
I was searching exactly for this. And I've found better solution ( I think ).
We can easily do this using awesome Modernizr.js library.
We can detect the touch screen device by the below function.
function is_touch_device() {
return !!('ontouchstart' in window);
}
And then we can disable the URL in the hyperlinks dynamically via Javascript either by changing the location to "#" or by preventing the default action of the parent menu items.
Final code would be as below.
$(document).ready(function() {
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(is_touch_device()) {
$('#mainmenu li > ul').each(function (index, ev) {
/* Option 1: Use this to modify the href on the <a> to # */
$(ev).prev('a').attr('href' ,'#');
/* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
$(ev).prev('a').click(function(event) {
event.preventDefault();
});
});
}
});
For more details, you can see this link
I do believe someone will vote me UP :-)
Thanks
Is it possible through it's options set such behaviour to the accordion?
I mean like "Theme switcher" on their site. When it opens, examples menu doesn't move down and it's like imposed on this menu.
Thanks!
Check out the documentation for the accordion. On the first page, there's a line that states:
NOTE: If you want multiple sections open at once, don't use an
accordion
The documentation then proceeds to provide a simple way to achieve multiple panels open at once:
$(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
});
Combine that with some simple markup and styling, and you're in business.
Here's a working example.