HTMX

<!-- تحميل ملف HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>

<!-- مثال 1: زر يجلب محتوى من الخادم -->
<button hx-get="/api/message" hx-target="#result" hx-swap="innerHTML">
  جلب رسالة
</button>
<div id="result"></div>

<!-- مثال 2: نموذج يرسل بيانات ويحدث الجدول -->
<form hx-post="/users"
      hx-target="#user-list"
      hx-swap="beforeend"
      hx-indicator=".spinner">
  <input name="name" placeholder="الاسم" required>
  <input name="email" type="email" placeholder="البريد" required>
  <button type="submit">إضافة</button>
</form>
<div id="user-list"></div>
<div class="spinner" style="display:none">جاري التحميل...</div>

<!-- مثال 3: بحث مع تأخير (Debounce) -->
<input hx-get="/search"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#search-results"
       placeholder="ابحث...">
<div id="search-results"></div>

<!-- مثال 4: تحميل لا نهائي (Infinite Scroll) -->
<div hx-get="/items?page=2"
     hx-trigger="revealed"
     hx-swap="afterend">
  <!-- عناصر -->
</div>

<!-- مثال 5: تأكيد قبل الحذف -->
<button hx-delete="/user/123"
        hx-confirm="هل أنت متأكد؟"
        hx-target="#user-123"
        hx-swap="outerHTML">
  حذف المستخدم
</button>

<!-- مثال 6: WebSocket -->
<div hx-connect="ws://localhost:8080/ws/chat"
     hx-send="message"
     hx-target="#chat-log">
  <input name="message" hx-trigger="keyup[key=='Enter']">
</div>
<div id="chat-log"></div>

<!-- مثال 7: CSS Transitions -->
<div hx-get="/notification"
     hx-swap="innerHTML transition:true"
     hx-trigger="load delay:3s">
  <!-- سيظهر مع تأثير الانتقال -->
</div>

<!-- Attributes المفيدة: -->
<!-- hx-get/post/put/patch/delete ← طلب HTTP -->
<!-- hx-target ← عنصر الهدف -->
<!-- hx-swap ← طريقة الاستبدال (innerHTML, outerHTML, beforeend, etc.) -->
<!-- hx-trigger ← متى يتم الطلب (click, keyup, load, etc.) -->
<!-- hx-push-url ← تحديث URL في History -->
<!-- hx-indicator ← عنصر مؤشر التحميل -->
<!-- hx-confirm ← رسالة تأكيد -->