Question

I have a list like this:

<ul id="linkList">
  <li>
    <a href="/C2D">NotesA</a>
  </li
  <li>
    <a href="/C2E">NotesB</a>
  </li>
  <li>
    <a href="/C2F">NotesC</a>
  </li>
</ul>

What I would like to do is to transform this into three jQuery UI themed buttons but I would like the buttons to be links so hopefully not tall buttons. Also I would like not to show the list with the small circle next to each new li.

Something like you can see here in the example for menus:

Filament group menu example

How can I do this and still make the buttons act like links with jQuery UI?

Answer 1

What I would like to do is to transform this into three jQuery UI
themed buttons

$(".linkList").find("a").button();

The code above should be executed after page loaded, probably to the $(document).ready() callback:

$(document).ready(function() {
   $(".linkList").find("a").button();
});

but I would like the buttons to be links so hopefully not tall buttons

You don’t have to do anything additional, they are kept as regular links. Button height is defined by the jQueryUI style: open the stylesheet (usually it’s name is jquery-ui-1.8.17.custom.css) and find the following definition:

/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }

Reduce line-height and vertical padding (currently .4em) to make it not so tall. It is not recommended to change jQueryUI stylesheet, so place changed definitions to your custom stylesheet with !important declaration.

Also I would like not to show the list with the small circle next to
each new li.

Put to the CSS file:

.linkList { list-style-type: none; }