مكتبة جافا سكريبت لإضافة بالون مع رسائل تشير إلى عناصر التحكم في الإدخال المطلوبة

Question

عند تحميل صفحة الويب الخاصة بي ، يجب مطالبة المستخدم بإجراء بعض التحديدات في تسلسل.

أريد البالونات رسالة ليطفو على السطح مع رسائل شيء من هذا القبيل - "مهلا ، منذ قمت بتحديد بلدك ، والآن حدد المحافظة".يجب أن تشير هذه البالونات أيضا إلى عنصر التحكم المحدد في الاختيار.

لاحظ أن هذه البالونات يجب أن تظهر على بعض استدعاء الطريقة التي من شأنها أن تجعلها حية وليس عندما تحوم مثل تلميحات الأدوات

أي اقتراحات هي موضع ترحيب

Answer 1

نلقي نظرة على هذا البرنامج المساعد: http://zurb.com/playground/jquery-joyride-feature-tour-plugin.

لست متأكدا من هيكل هتمل الخاص بك ، ولكن هنا هو ما تفعله.في هتمل الخاص بك ، كل مكان حيث تريد الخاص بك 'بالون' لتظهر تحتاج إلى تحديد معرف مرساة.

(أمثلة مأخوذة من الوثائق الرسمية)

على سبيل المثال إذا كنت تريد 'بالون' على href, ، ثم:

/* Joyride can be attached to any element with a unique ID or class, in any order */
<h3 id="yourHeaderID"></h3>
<p class="your-paragraph-class"></p>
<a id="yourAnchorID" href="#url"></a>

بعد إعداد المراسي الخاصة بك ، تحتاج إلى تحديد الشكل الذي يجب أن يبدو عليه البالون.لكل anchor id يجب أن تحدد data-attribute مع هذا المعرف ، إذا لم يتم تحديده ، فسيتم إرفاق البالون بـ body عنصر.مثال الدراسة أدناه:

/* Each tip is set within this <ol>. */
/* This creates the order the tips are displayed */
<ol id="chooseID">
  /* data-id needs to be the same as the parent it will attach to */
  <li data-id="newHeader">Tip content...</li>

  /* This tip will be display as a modal */
  <li>Tip content...</li>

  /* using 'data-button' lets you have custom button text */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

  /* you can put a class for custom styling */
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>

ثم تحتاج إلى إضافة بعض جافا سكريبت ماجيك ابدأ لجعل كل شيء يعمل:

/* Launching joyride when to page is loaded */

<script>
$(window).load(function() {
  $("#chooseID").joyride({
    /* Options will go here */
  });
});
</script>

هناك عدد قليل من الخيارات التي يمكنك تعيينها ، يرجى مراجعة الرابط أعلاه.