Nice ListView with images and new font

Free Templates, Designs, and Block Combinations
1

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.

listview2i.png700Ă—565 135 KB

listview1i.png1600Ă—687 319 KB

p169Ii_javascript_visordelista_font.aia (56.9 KB)

10 Likes
2

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

3

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

4

Hi Juan Antonio,

can I use your beautiful listview under thunkable X?

Cheers,
User81

5

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

You can also try this extension

http://community.thunkable.com/t/free-create-buttons-labels-textboxes-images-sliders-by-code-new-font-vertical-slider/13074/99

6

yes it works! just tried it:

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

7

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?

8

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(------);
}

9

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
10

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?

11

Hey Juan Antonio,

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

cheers,
User81