jQuery Tabs - Adding reusable next/previous buttons - jquery-ui

Im looking to extend the jquery tabs to add next and previous buttons - which i have done using the show event. The problem is that its a big chunk of code added to that event for each page that needs tabs and these buttons. How i go about making it a reusable component?
David

Write a jquery plugin to wire your tabs up by convention. Here's a tutorial: http://docs.jquery.com/Plugins/Authoring
Decorate your tab list with something like , then have your plugin pick up on ul's with class "scrollable". Write all your logic in there. You shouldn't need to call any function explicitly for each page.

Related

jQuery Tabs : How can I add function to show a next/previous button on jQUery tabs?

Is there a way to mimic the function of Mozilla Firefox tab function to jQuery Tabs that, when there are multiple of tabs, it adds a next button to view next tab after the last displayed tab.
I want to add this next button(encircled), to the jQuery tabs UI functionality. Also, if possible, to add the animation on the menu tab to move tabs as next/previous button is clicked, like on the said browser.
Thanks!
This could help. You will need custom logic.
This CSS trick can also help out. You can tweak the logic for the placement of the next button and you are good to go.

jquerymobile button's css not applied

I'm trying to add a delete button to a custom div. However when the page is loaded, the jquery mobile button does not take the format of jquery and displays it like a hyperlink.
var currDelButton = $("<a>").attr("href","#").attr("data-role","button").attr("data-icon","delete").attr("data-iconpos","left").text("حذف");
anyone has an idea about this issue?
Best Regards
Ali
If you are adding the button after the page is loaded then you need to refresh the element for example $("#mybutton").button(); should work.
here is a working example with the code you provided: http://jsfiddle.net/ashanova/RQVd8/1/
call the .page for the main wrapper where new buttons are added.
$("#content").page();

Dynamic replacement of radio buttons in a controlgroup

I need to be able to dynamically replace the radio buttons in a controlgroup. I've come up with a solution, but I'm wanting to make sure I'm going about it the right way. Here's a jsFiddle.
Should I be manually modifying the classes after calling .checkboxradio() on each of the newly-created radio buttons, or is there a method in jQuery Mobile somewhere that will help me accomplish this?
Please note that the jsFiddle here works as I need it to. I'm asking if there's an easier (or more idiomatic) way to update the dynamically-created radio buttons' visual styles to conform to the controlgroup style.
Content should be added to the DOM before jquery mobile enhancement, for instance by binding to the page beforecreate event instead of the page pagebeforeshow. This way your content will be properly enhanced.
As for dynamic content, you can enhance it as soon as it has been inserted in the DOM. See this modified fiddle.
try this:
$('#creneauListPage #fieldcontain input').checkboxradio();
$('#creneauListPage #fieldcontain .ui-btn').removeClass('ui-btn-corner-all');
$('#creneauListPage #fieldcontain .ui-btn:first').addClass('ui-corner-top');
$('#creneauListPage #fieldcontain .ui-btn:last').addClass('ui-corner-bottom ui-controlgroup-last');

ASP.NET MVC Show a MessageBox

I have a ASP.net MVC application. On one page I have a button and when user clicks on it I need to display some information on a pop up window. How can I do that in ASP.NET MVC? What do I use and where do I write the code for pop window? In the controller? Some java script?
Thank you!!
You can display messages with javascript. The content of the message can be set in the markup or by your Controller as a Model property. You have a few display options:
Use the alert() function, which will display a native browser dialog
Display a styled modal dialog (E.g. jQuery UI dialog)
Display a styled div (E.g. jQuery UI Message - shameless plug, this one of my open source projects)
The alert function isn't very pretty, but it's the simplest. I typically go with a modal dialog or a styled div, depending on the UI requirements.
If the information you want to display in a pop up is dynamic (i.e you need some c# logic to run) then I'd suggest putting that logic in a controller and have the corresponding view be the pop up itself. You can stick some JavaScript at the top of the view to launch the popup on load.
The page with the button trigger can call that controller and pass any data needed. To make it smooth maybe make the trigger use Ajax.

jQuery UI, Asp.NET, IE, Disappearing Buttons

I have an Asp.NET website being written in C#. There is a DataGrid () that has three columns of buttons (). I an using jQuery UI to redesign site and I wanted to style the buttons in this grid. After finding no way to do it with HTML/ASP markup, I decided to use a jQuery selector to set the style. This works to style the buttons, but in IE 8, when I hover over a button, the rest of the buttons disappear and they don't come back until I refresh the page. My javascript looks like this:
$('input[type~="submit"]').button ();
$('input[type~="submit"]').css ('font-size', '10px');
Any help would be greatly appreciated.
The issue was my lack of a DOCTYPE declaration. Making it strict fixed the issue.

Resources