The jQuery sample jQuery UI Tab manipulation show's an example of how to make all tabs of a control closeable. But is there any way to make only some tabs closeable and let some stay uncloseable?
Yes, from the code sample you found, you just have to adapt it to use a different tabTemplate for uncloseable tabs (simply remove the close icon)
Related
I'm develping a website and I made all the design and the styling upon bootstrap and it is working fine. Then I wanted to add a panel for the mobile menu.
the panel is the one on the right of this example:jQuery Mobile panels, click on the plus sign
I took the panel that comes out clicking on the plus, and I worked to add it to my website (with my menu instead of the form inside the panel).
It works fine, but adding the jQuery Mobile JS completely destroyed my layout, adding lot of ui-* classes around my code and the styles attached to them.
I've tried those things:
disabling the css whole (but the panel does not work anymore)
renaming selectively only the classes that makes more mess, but it is
way too much work, just to fix a checkbox I had to rename several ui
classes.
fiddling with the js (the panel stopped working)
I just need the panel. I don't need all the creepy styling on the forms or other unwanted stuff.
Now I don't know what to do. There is another way to get this panel working withour all the mess? Why they did this js so intrusive?
You can use :
data-role="none"
If you also want to disable mobile use in mobileinit event:
$.mobile.autoInitializePage = false;
If you have several elements use a function on start load page:
$(document).on('pagebeforecreate', function( event ) {
// add the data-role="none" to desired elements...
$( "input, select", event.target ).attr( "data-role", "none" );
});
I have a easyui Tab with 4 tabs.
Depending on response from server I may have to hide/show some tabs.
I tried the approach of removing the tabs at first and adding them later.But the problem is as the tabs are removed so as the DOM objects.So am not able to add the $("#") object later.
So better options is to hide/show the tabs .Is that possible in easyui tabs?
just close the tabs that you don't want to show
$('#mytabs').tabs('close','titletab');
I want to re-create the view given in the site under the Base Score Metrics, when I click on it would expand and another click would collapse the details included in it.
I don't think this is native html functionality perhaps I have to use some third party plugin for it. Please tell me know how can I achieve the effect coded in the website given in the example.
Collapsed view
Expanded view
Thanks.
JQuery's UI framework, specifically jqueryui.com/accordion, allows you to do just that.
You can put any elements inside those tabs, and it will work as if it were a static page.
I have a tab panel.
It can add tabs dynamically by clicking the add tab button.
A typical use case scenario will be this:
I have multiple tabs open Tab-1, Tab2, Tab-3, and Tab-4 in the panel
and remove some of them Tab-2 and Tab-3 from the panel by closing the tabs.
This will leave Tab-1 and Tab-4 in the panel.
Now, if i try to add new tabs, order in which the tabs are is Tab-1, Tab-4, Tab-2, Tab-3.
I want to sort the panel in jquery and make it Tab-1, Tab-2, Tab-3, and Tab-4
Please Help!!
AFAIK jQuery UI doesn't provide this natively.
The order of the tabs is defined by their order in the DOM.
Get a plugin that can sort any dom element and use it to sort the tab divs (or LI, or whatever type of element is necessary).
Some quick examples I found are
http://tinysort.sjeiti.com/
http://james.padolsey.com/javascript/sorting-elements-with-jquery/
and of course: https://www.google.com/search?q=jquery+sort+elements
How can I sequentially show multiple dialogs in jQuery Mobile (jQM)?
Opening two dialogs directly in sequence
$.mobile.changePage("#dialog1", "pop");
$.mobile.changePage("#dialog2", "pop");
results in a chained redirection to
index&ui-state=dialog&ui-state=dialog
isOpen from jquery UI doesn't work.
You could tie the change event to the first dialog (so when the user selects something) to maybe kick off the second dialog. Example: (Not working but maybe to get you thinking in the right direction) http://jsfiddle.net/LHG4L/18/