Skip to content

Jquery-ui helper

February 26, 2009

Lately I have been trying to get the jquery-ui theme to work nicely with an mvc site. The hard part was to figure out how to get the paths correctly in the ui.theme.css and ui.all.css files. I ended up just adding the full path in there, only need to search and replace them once I deploy them to the web server. Not a pretty solution, but it works for now.

A nice feature of the jquery-ui theme is that you can use nice little icons, as you can see on the theme gallery page. The trick is to insert a small span that looks like this :

<p class="ui-state-error">
     <span class="ui-icon ui-icon-alert" style="float:left;margin-right:2em;">  </span>Error message here !
<p class="ui-state-highlight">Info box ...</p>

As you might understand these span tags start to clutter up the view code quickly ! So right a little helper you can put in a static class.

public static string InsertIcon(string iconName)
        return string.Format("<span class=\"ui-icon ui-{0}\" style=\"float: left; margin-right: .2em;\"></span>",iconName);

I am also using it in some controllers that return some simple html snippets for jQuery $.ajax methods :

private string createErrorString(string errMsg)
      string output = "<p class="ui-state-error">";
      output += jQueryUiHelper.InsertIcon("icon-alert");
      output += errMsg;
      output += "</p>";
      return output;

You can use that in a controller when an error has occured:

return Content(createErrorString ("User " + userName + " does not exist !"));

As you can see, plenty of fun things you can do using the jQuery-ui !

  1. Parv permalink
    April 9, 2009 5:05 am

    Nice post.. quick question – did you have to import the entire theme into your app? I was trying to trim down those css files so that i was just using the icons but something broke along the way. Any idea as to the bare minimum scripts/css required for the icons to work?

  2. April 9, 2009 2:09 pm

    Yes I did, with 1.7 jQuery ui files have become a lot slimmer, and I don’t think it’s worth the trouble to extract just the icon stuff.

    If you really want to, I imagine you would have to do a search through the css file and copy past all stuff that have to do with the icons :).

  3. July 12, 2011 6:55 am

    What it is helper in jQuery UI, and way is named “helper”?

Comments are closed.

%d bloggers like this: