I want to create radio buttons or other type of controls that will act like this:
[_value1_] [value2] [value3]
Value1 is selected, so it looks like pressed button or selected link (bold, no underline) and other elements are active buttons/links. When user select another value - state is changed. I can handle this event manually, question is - what plugin or existing css/js combination should I use to achieve this?
I am pretty sure that this type of controls have a name, but can't think out what is this. I have tried to search for custom style radio buttons, as functionality is the same, but failed. Also I have tried some other names such as switch buttons, but it's not what I want. It's also very similar to tabs, but tabs usually styled as something that require underline div attached. So I am looking for "radio button meet tabs" css/js solution.
Can you help me to name this control, if you know it's name, or find plugin/existing code that can help me to achieve my goal?
The question is not how to create this type of functionality myself, I can do it, but it's rather strange that there are no existing solutions and I want to help people in same situation, also may be existing solutions design can be better than I can invent myself, because I am not a designer.
Answer
This type of controls can be found as "Simplified CSS Tabs" or "CSS Mini Tabs", but they require some additional code to work as expected.
Also, this type of functionality can be found in Google as jQuery UI radio buttons transformed into a button set and Yahoo UI Button Control: Radio Buttons
http://jqueryui.com/demos/button/#radio
works done for ya bud :)
Related
I apologize if the title was not clear enough. I am working on a project where a user can design a page (something like Wix). I am continuing on a project left in-complete by some developer. The sequence of action is.
The user clicks on a link which adds an element on the page (e.g. textElement, picture, slider...)
There is an edit button for each element. Clicking which opens a dialog box.
On the dialog box there are sliders and color picker drawn using Kendo-UI. Using them the user can change the style settings for the element (e.g Font-Color, BG-Color, Font Size...)
What I want now is to apply/show the changes live on that element. I have the id available for each element. I can bind each of the style selectors and apply the changes live to the text element. But that does not seem the right choice as in future we might add another style selector in the dialog box, and that would mean adding the code for binding this new selector.
What I wanted to know was that is there an alternate or preferably easy way to do this?
Regards
Share some code with the basic idea that you follow, cause it's not getting clear what you did. It sounds like you can use the MVVM framework feature to help you for that.
I thought this would be easy to do but I can't find a way.
I have a ListBox with selection mode set to multiple but I the user wants to be able to select multiple items without having to press CTRL.
Does anyone know an easy way to do this?
Googled it and find the following: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
Here is some pointers:
Download and reference: https://raw.github.com/ehynds/jquery-ui-multiselect-widget/1.12/src/jquery.multiselect.js
The just type:
$(function(){
$("select").multiselect();
});
Of course you need to reference jQuery as well, and the css to make it look good.
What the widget does is that it takes an select list and turn it create a list of checkboxes around it and styles them properly.
A simple jsfiddle example I put together: http://jsfiddle.net/AFVfQ/1/
It is not perfect, but it should show you how it works. Note the resources on the left hand side, the I'm referencing jquery ui css and a theme.
My webform is generating radio buttons instead of select fields. Does anyone have any idea what might be causing this?
When you are editing that field, look down at the very bottom under display and make sure "Listbox" is checked. It is the one that says:
Check this option if you want the
select component to be of listbox type
instead of radio buttons or
checkboxes.
You didn't say what version of the module you are using, but this should be accurate for all current versions. In the future it would be a good idea to include what version you are having the issue with when asking for help.
How can I make an entire jqGrid disabled/readonly?
I have a page with a logical "edit section" which I show when the user selects something to edit, and hide when the user is done editing (save or cancel). While the edit section is shown, I disable several other elements on the page. I would like to disable their ability to click in the jqGrid, so they can't change selected rows, re-sort, etc. But I cannot find a way to disable/enable the grid as a whole.
Apologies if this has been answered already - other questions seemed to focus on disabling only certain behaviors within the jqGrid.
Edit: Preferably, I'd like an approach that isn't dependent on yet another 3rd-party addon. Nothing wrong with them, of course! But my client has a degree of reluctance with them, so my life would be a little easier with a purely jQuery/jQueryUI/jqGrid solution. :)
You could use blockUI to block the grid.
Try using $("#lui_" + myGridId).show().
The grid has created this overlay internally an uses it as one part of the loader message.
You can just show it or hide it and it will disable/enable the grid for you.
I want to disable and NOT hide a ribbon button (specifically Ribbon.ListItem.New.NewListItem) on a particular List type. On web I could find a lot many posts showing me ways to remove/hide buttons but none really worthwhile which could tell me how can I just disable an alrteady existing sharepoint button in my custom List type.
e.g. Following code does remove the button instead of hiding.
Id="RemoveRibbonButton"
RegistrationType="List"
RegistrationId="213908"
Location="CommandUI.Ribbon">
This can be done through Javascript on the client side. Check out this article for an example.
http://makarandrkulkarni.blogspot.com/2010/01/sharepoint-2010-ribbon-customization_23.html