Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Skrypt listy alfabetycznej
Forum PHP.pl > Forum > Po stronie przeglądarki
benusso
18.11.2012, 17:29:07
Znalazłem coś takiego

http://www.ihwy.com/Labs/Demos/Current/jqu...nav-plugin.aspx
http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx

najbardziej podoba mi się demo4

Niestety nie mogę z tym dać sobie rady, może pomoże ktoś? Zrobiłem coś takiego ale nie działa:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
  4. <script src="jquery.listnav-2.1.js" type="text/javascript"></script>
  5. <style type="text/css">
  6. .listNav { margin:0 0 10px; }
  7.  
  8. .ln-letters { overflow:hidden; }
  9. .ln-letters a { font-size:0.9em; display:block; float:left; padding:2px 6px; border:1px solid silver; border-right:none; text-decoration:none; }
  10. .ln-letters a.ln-last { border-right:1px solid silver; }
  11. .ln-letters a:hover,
  12. .ln-letters a.ln-selected { background-color:#eaeaea; }
  13. .ln-letters a.ln-disabled { color:#ccc; }
  14. .ln-letter-count { text-align:center; font-size:0.8em; line-height:1; margin-bottom:3px; color:#336699; }
  15.  
  16.  
  17. /* demo-specific
  18. ----------------------------------------------------------------- */
  19.  
  20. #demoThree-nav .ln-letters a { border:none; border-top:2px solid pink; color:red; }
  21. #demoThree-nav .ln-letters a.ln-last { border-right:none; }
  22. #demoThree-nav .ln-letters a:hover,
  23. #demoThree-nav .ln-letters a.ln-selected { border-top:2px solid red; background-color:pink; color:White !important; }
  24. #demoThree-nav .ln-letters a.ln-disabled { color:pink; }
  25. #demoThree-nav .ln-letters a.ln-disabled:hover { color:white; }
  26. #demoThree-nav .ln-letter-count { color:red; }
  27.  
  28. #demoThree li { color:pink; }
  29. #demoThree li a { color:red; text-decoration:none; }
  30. #demoThree li a:hover { text-decoration:underline; }
  31.  
  32. #demo4 #listWrapper { width:650px }
  33. #demoFour li { float:left; }
  34. #demoFour a { display:block; text-align:center; width:85px; border:1px solid silver; padding:10px; margin:0 10px 10px 0; text-decoration:none }
  35. #demoFour a:hover { background-color:#eee }
  36. </style>
  37.  
  38. </head>
  39. <body>
  40.  
  41. <script charset="utf-8" type="text/javascript">
  42. $('#myList').listnav();
  43.  
  44. </script>
  45.  
  46. <div id="myList-nav"></div>
  47.     <ul id="myList">
  48.     <li class="ln-a" style="display: list-item;"><a href="#">Agizzy</a></li>
  49.     </ul>
  50.  
  51.  
  52.  
  53. </body>
  54. </html> 
[HTML] pobierz, plaintext


ale nie działa sad.gif
lukasz1985
21.11.2012, 16:56:37
Nie działa ponieważ skrypt uruchamiający listę musi znajdować się po elementach listy (lub przed samym końcem <body> )

Spróbuj tak:
[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. <head>
  4.  
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
  6.  
  7. <script src="jquery.listnav-2.1.js" type="text/javascript"></script>
  8.  
  9. <style type="text/css">
  10.  
  11. .listNav { margin:0 0 10px; }
  12.  
  13.  
  14.  
  15. .ln-letters { overflow:hidden; }
  16.  
  17. .ln-letters a { font-size:0.9em; display:block; float:left; padding:2px 6px; border:1px solid silver; border-right:none; text-decoration:none; }
  18.  
  19. .ln-letters a.ln-last { border-right:1px solid silver; }
  20.  
  21. .ln-letters a:hover,
  22.  
  23. .ln-letters a.ln-selected { background-color:#eaeaea; }
  24.  
  25. .ln-letters a.ln-disabled { color:#ccc; }
  26.  
  27. .ln-letter-count { text-align:center; font-size:0.8em; line-height:1; margin-bottom:3px; color:#336699; }
  28.  
  29.  
  30.  
  31.  
  32.  
  33. /* demo-specific
  34.  
  35. ----------------------------------------------------------------- */
  36.  
  37.  
  38.  
  39. #demoThree-nav .ln-letters a { border:none; border-top:2px solid pink; color:red; }
  40.  
  41. #demoThree-nav .ln-letters a.ln-last { border-right:none; }
  42.  
  43. #demoThree-nav .ln-letters a:hover,
  44.  
  45. #demoThree-nav .ln-letters a.ln-selected { border-top:2px solid red; background-color:pink; color:White !important; }
  46.  
  47. #demoThree-nav .ln-letters a.ln-disabled { color:pink; }
  48.  
  49. #demoThree-nav .ln-letters a.ln-disabled:hover { color:white; }
  50.  
  51. #demoThree-nav .ln-letter-count { color:red; }
  52.  
  53.  
  54.  
  55. #demoThree li { color:pink; }
  56.  
  57. #demoThree li a { color:red; text-decoration:none; }
  58.  
  59. #demoThree li a:hover { text-decoration:underline; }
  60.  
  61.  
  62.  
  63. #demo4 #listWrapper { width:650px }
  64.  
  65. #demoFour li { float:left; }
  66.  
  67. #demoFour a { display:block; text-align:center; width:85px; border:1px solid silver; padding:10px; margin:0 10px 10px 0; text-decoration:none }
  68.  
  69. #demoFour a:hover { background-color:#eee }
  70.  
  71. </style>
  72.  
  73.  
  74.  
  75. </head>
  76.  
  77. <body>
  78.  
  79.  
  80.  
  81.  
  82.  
  83. <div id="myList-nav"></div>
  84.  
  85.     <ul id="myList">
  86.  
  87.     <li class="ln-a" style="display: list-item;"><a href="#">Agizzy</a></li>
  88.  
  89.     </ul>
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96. <script charset="utf-8" type="text/javascript">
  97.  
  98. $('#myList').listnav();
  99.  
  100.  
  101.  
  102. </script>
  103.  
  104.  
  105. </body>
  106.  
  107. </html> 
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.