how made a menu for jquerymobile

I made a menu and work in my web and work

<nav><ul class="sf-menu sf-js-enabled sf-shadow"><li class="first active"><a href="http://localhost/Modx4/" title="Home" >Home</a></li>
<li><a href="index.php?id=2" title="link1" >link1</a></li>
<li><a href="index.php?id=3" title="link2" >link2</a></li>
<li class="last"><a href="index.php?id=8" title="link3" >link3</a><ul><li class="first"><a href="index.php?id=9" title="Contact" >Contact</a></li>
</ul></li>
</ul>
</nav>

<nav> Wayfinder ? &startId=`0` &outerTpl=`first` &outerClass=`sf-menu sf-js-enabled sf-shadow` &level=`2`
</nav>

but i want to change to this model

< .p ><a. h re f =#about data-role="button >About this app</ a. ></ p. >

how add the data-role and delete de ul and li

You can create new chunks for outerTpl (remove the ul tags) and rowTpl, formatted exactly as you need.

See the Wayfinder docs for more details:
http://rtfm.modx.com/display/ADDON/Wayfinder#Wayfinder-TemplateParameters

Also, Wayfinder doesn't work for anchor links so you might need to find another way to do that...