I was looking at putting something other than a tab in a JQueryUI tab bar - a button or an icon control, for instance.  If I add things after the <li> elements representing the tab, they follow immediately after the last tab, on the tab bar's background, on the same row.  But if I put them within or before tabs, the tab bar starts a new row for the first tab <li> after the non-tab elements.  For instance:

1. <div id="tabs-div">
2. <ul>
3. <button id="myButton1">Button 1</button>
4. <img src="someimage.jpg>
5. <li id="tab-one"><a href="#tabcontent-one"><span>One</span></a></li>
6. <li id="tab-one"><a href="#tabcontent-one"><span>Two</span></a></li>
7. 
   
8. <button id="myButton2">Button 2</button>
9. <img src="someimage.jpg>
11. </ul>

The button and image before the tabs cause the first tab to start a new row on the tab bar.  But the last button and image follow the last last tab without wrapping.

Does jQuery UI support non-tabs before the end like this without too much hackery?  I'm using 1.10.3 with jQuery 1.10.2.