สร้างคำแนะนำการใช้เว็บไซต์เราโดยอัตโนมัติ


วันนี้เราจะมาแนะนำการสร้างสคริปต์เล็กน้อยที่ช่วยคุณให้การสร้างบนเว็บไซต์กับ jQuery

นี้จะมีประโยชน์มากหากคุณต้องการที่จะอธิบายรายละเอียดให้กับผู้ใช้ของคุณการทำงาน

ของโปรแกรมประยุกต์บนเว็บของคุณในลักษณะการโต้ตอบคุณอาจจะพบว่าการใช้สัญลักษณ์

บางอย่างเช่นนี้ที่จะอธิบายลักษณะใหม่ของโปรไฟล์แนววคิดคือการเพิ่มระดับบางองค์ประกอบ

ที่คุณต้องการคู่มือการใช้งานและอธิบายรายละเอียดของเว็บไซต์ เราจะใช้เพียงเครื่องมือที่จะ

แสดงสิ่งที่ที่เกี่ยวกับและจะช่วยให้ผู้ใช้เริ่มต้นสามารถเข้าใหม่ได้อย่างง่ายดายตัวเลือกที่คุณ

สามารถใช้เป็นแบบอัตโนมัติซึ่งจะช่วยให้ผู้ใช้เพียงแค่นั่งอยู่และดูทุกขั้นตอน เมื่อต้องการใช้นี้

คุณต้องเพิ่มระดับไปสู่วัตถุบางอย่างที่คุณต้องการที่จะอธิบาย เราจะใช้”tour_1″,”tour_2″และอื่น ๆ

<div>

<h2 class=”tour_1″>Create a tour</h2>

<p>Far far away, behind the word mountains, …</p>

</div>

ขณะนี้เราจะกำหนดค่าขั้นตอนในวัตถุ?JSON?พารามิเตอร์ต่อไปนี้

name?:?องค์ประกอบที่คุณต้องการให้คำแนะนำเครื่องมือจะปรากฏ
BGColor?:?สีพื้นหลังของคำแนะนำเครื่องมือ
color?:?สีของคำแนะนำเครื่องมือข้อความ
text :?ข้อความที่อยู่ภายในของคำแนะนำเครื่องมือ
time?:?ถ้าเดินทางโดยอัตโนมัติแล้วครั้งนี้เป็นครั้งใน?ms?สำหรับขั้นตอนนี้
position?:?ตำแหน่งของปลาย
ดังนั้นสำหรับขั้นตอนแรกที่เราจะต้องเพิ่มสิ่งนี้?:

var config = [
???????? {
???????????????? "name" ????????? : "tour_1",
???????????????? "bgcolor"??????? : "black",
???????????????? "color"????????? : "white",
???????? ???????? "position"?????? : "TL",
???????????????? "text"?????????? : "Some text here",
???????????????? "time" ????????? : 5000
???????? },...
]

โดยปกติแล้วเราจะใช้แบบอัตโนมัติ?หากคุณต้องการโดยอัตโนมัติหลังจากนั้นเพียงแค่เปลี่ยนตัวแปรแบบอัตโนมัติไป?(บันทัดที่?158)?เป็น ture
สำหรับตำแหน่งของคำแนะนำเครื่องมือที่เรามีค่าที่เป็นไปได้ดังต่อไปนี้
TL: top left

  • TR: top right
  • BL: bottom left
  • BR: bottom right
  • LT: left top
  • LB: left bottom
  • RT: right top
  • RB: right bottom
  • T: top
  • R: right
  • B: bottom
  • L: left

คุณสามารถปรับรูปแบบของปุ่มนำทางใน?jquerytour.css
เราหวังว่าคุณพบสคริปต์นี้เป็นประโยชน์ขอให้สนุกนะครับ

และดาวน์โหลดได้เลยครับ Miror 1

ที่มา tympanus.net

Comments

comments

Powered by Facebook Comments