Nice ListView with images and new font

Nice ListView with images and new font.

  • These are two examples of ListView build with JavaScript (jquery-3.1.1.min.js) and CSS.

  • Visor1 has font sevillana.ttf: http://www.1001fonts.com/sevillana-font.html#character-map

  • Visor2 has 2 fonts size.

  • In my simple example Clock is always ON, you can modify this feature.

  • You can read visor1.htm and visor2.htm in this Spanish web page:

http://kio4.com/appinventor/169I_javascript_visordelista.htm

Regards.

p169Ii_javascript_visordelista_font.aia (56.9 KB)

10 Likes

Thanks for it.

Can you make a leaderboard list view? User image/score/name option

I do it with canvas but its crash app when too many image avaible

Change and custom file visor1.htm http://kio4.com/appinventor/169I_javascript_visordelista.htm

Hi Juan Antonio,

can I use your beautiful listview under thunkable X?

Cheers,
User81

I have not tried it on Thunkable X, but I think it should work.

You can also try this extension

yes it works! just tried it:

https://x.thunkable.com/copy/1b284853363d48cc694f979d518164e6

how can we get the number of the item, which was clicked in the list?

And how can we customize the list “on the fly” in thunkable?

What example?
http://kio4.com/appinventor/169I_javascript_visordelista.htm

If this example:
p169I_javascripit_visorlistahtm.aia

you must add
function liClick(--------) {
window.AppInventor.setWebViewString(------);
}

like this?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="adelePage"> 
    <h2>Adele Pitt</h2>
    <p>Phone number: 773-528-7483</p>
    <p>Address: 121 N. LaSalle Street
    <br>Chicago, Illinois 60602 USA</p>
    <p>Email: thebestadelepitt@gmail.com</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Close</a>
  </div> 
  <div data-role="panel" id="billyPage"> 
    <h2>Billy Smith</h2>
    <p>Phone number: 212-330-5200</p>
    <p>Address: 350 Fifth Avenue
    <br>New York, NY 10118-3299 USA</p>
    <p>Email: theoneandonlybilly@gmail.com</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Close</a>
  </div> 
 
  <div data-role="header">
    <h1>Page Header</h1>
  </div>

  <div data-role="main" class="ui-content">
    <h2>My Phonebook</h2>
    <ul data-role="listview" data-autodividers="true" data-inset="true">
      <li><a href="#coffeePage">Coffee</a></li>
      <li><a href="#espressoPage">Espresso</a></li>
      <li><a href="#hotchocolatePage">Hot Chocolate</a></li>
      <li><a href="#icePage">Ice</a></li>
      <li><a href="#cappuccinoPage">Cappuccino</a></li>
    </ul>
  </div>

  <div data-role="footer">
    <h1>Page Footer</h1>
  </div>

</div> 

</body>
</html>

function liClick(--------) {
window.AppInventor.setWebViewString(------);
}
1 Like

https://x.thunkable.com/copy/93954ba18370becb27924606058eb5ce

here is my recent status of the extended listview.

Who will make reach a milestone in this project by making

1.) thunkable X understand, which list item was clicked?

2.) and how can the list be customized “on the fly” in thunkable?

Hey Juan Antonio,

I have tried it on Thunkable X and I think it does not work. Can you confirm this?

cheers,
User81