Startseite Erkunden Hilfe
Registrieren Anmelden
robert
/
xjs
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Struktur: 73dd7ce6ec
Branches Tags
xjs
/
doc
/
list_callbacks.html

list_callbacks.html 3.7 KB
Verlauf Originalformat

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <title>Callbacks - List</title>
    7. 

  7.     <link rel="stylesheet" href="demo.css">
    8. 

  8.     <style>
    9. 

  9.         body { padding: 20px; display: block; }
    10. 

  10.         .search-header { margin-bottom: 30px; }
    11. 

  11.         .search-title { font-size: 14px; font-weight: 600; color: #888; margin-bottom: 15px; }
    12. 

  12.         .search-input-container { position: relative; width: 100%; }
    13. 

  13.         .search-input { width: 100%; background: #1a1a1a; border: 1px solid #333; color: #fff; padding: 12px 40px; border-radius: 6px; font-size: 14px; box-sizing: border-box; outline: none; }
    14. 

  14.         .search-input:focus { border-color: var(--orange); }
    15. 

  15.         .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 2px solid #666; border-radius: 50%; }
    16. 

  16.         .search-icon:after { content: ''; position: absolute; top: 10px; left: 10px; width: 4px; height: 2px; background: #666; transform: rotate(45deg); }
    17. 

  17.         .grid-section { margin-bottom: 30px; }
    18. 

  18.         .section-title { font-size: 14px; color: #888; margin-bottom: 15px; font-weight: 500; }
    19. 

  19.         .card-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
    20. 

  20.         .card { background: #1a1a1a; border-radius: 8px; padding: 15px; display: flex; align-items: center; cursor: pointer; transition: background 0.2s; border: 1px solid transparent; }
    21. 

  21.         .card:hover { background: #222; border-color: #333; }
    22. 

  22.         .card.active { border-color: var(--orange); background: #222; }
    23. 

  23.         .card-icon { width: 30px; height: 30px; background: #333; border-radius: 4px; margin-right: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #888; font-size: 12px; }
    24. 

  24.         .card-text { color: #ccc; font-size: 14px; font-weight: 500; }
    25. 

  25.         .card-tag { margin-left: auto; font-size: 10px; padding: 2px 6px; background: #333; border-radius: 4px; color: #aaa; }
    26. 

  26.     </style>
    27. 

  27. </head>
    28. 

  28. <body>
    29. 

  29.     <div class="search-header">
    30. 

  30.         <div class="search-title">Callbacks</div>
    31. 

  31.         <div class="search-input-container">
    32. 

  32.             <div class="search-icon"></div>
    33. 

  33.             <input type="text" class="search-input" placeholder="Filter callbacks...">
    34. 

  34.         </div>
    35. 

  35.     </div>
    36. 

  36. 

  37.     <div class="grid-section">
    38. 

  38.         <div class="section-title">Standard Callbacks</div>
    39. 

  39.         <div class="card-grid">
    40. 

  40.             <!-- onUpdate -->
    41. 

  41.             <div class="card" onclick="selectItem('test_on_update.html', this)">
    42. 

  42.                 <div class="card-icon">fn</div>
    43. 

  43.                 <div class="card-text">onUpdate</div>
    44. 

  44.                 <div class="card-tag">JS</div>
    45. 

  45.             </div>
    46. 

  46.             
    47. 

  47.             <!-- onBegin -->
    48. 

  48.             <div class="card">
    49. 

  49.                 <div class="card-icon">fn</div>
    50. 

  50.                 <div class="card-text">onBegin</div>
    51. 

  51.                 <div class="card-tag">JS</div>
    52. 

  52.             </div>
    53. 

  53. 

  54.             <!-- onComplete -->
    55. 

  55.             <div class="card">
    56. 

  56.                 <div class="card-icon">fn</div>
    57. 

  57.                 <div class="card-text">onComplete</div>
    58. 

  58.             </div>
    59. 

  59.             
    60. 

  60.             <!-- onLoop -->
    61. 

  61.             <div class="card">
    62. 

  62.                 <div class="card-icon">fn</div>
    63. 

  63.                 <div class="card-text">onLoop</div>
    64. 

  64.                 <div class="card-tag">JS</div>
    65. 

  65.             </div>
    66. 

  66.         </div>
    67. 

  67.     </div>
    68. 

  68. 

  69.     <script>
    70. 

  70.         function selectItem(url, el) {
    71. 

  71.             document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
    72. 

  72.             el.classList.add('active');
    73. 

  73.             
    74. 

  74.             if (window.parent && window.parent.loadContent) {
    75. 

  75.                 window.parent.loadContent(url);
    76. 

  76.             }
    77. 

  77.         }
    78. 

  78.     </script>
    79. 

  79. </body>
    80. 

  80. </html>
    81. 

  81.