ภาพหมุน Modx บนหน้าผลิตภัณฑ์ ใหญ่โตและน่ากลัว

สวัสดีชุมชน!

ในโพสต์นี้ คุณจะได้เรียนรู้ว่า Multiple Formtabs คืออะไร และวิธีสร้างการกำหนดค่าด้วยชุดข้อมูลอื่น และแน่นอนว่าเราจะสร้างแถบเลื่อนที่จะมีให้กับคุณ ประเภทต่างๆสไลด์และในตอนท้ายเป็นอย่างมาก เรื่องราวที่น่าสนใจซึ่งฉันไม่กล้าบอกใครมานานแล้ว (ถ้าคุณสนใจ แต่เรื่องราวน่าสนใจเชื่อฉันเถอะ) ตัวอย่างสไลด์:

• ภาพพื้นหลัง
• วิดีโอในพื้นหลัง
• สีทึบบนพื้นหลัง

ความสนใจ! ครั้งนี้ไม่จำเป็นต้องให้เด็กและสตรีมีครรภ์อยู่ห่างจากหน้าจอ เพราะนี่คือการเลือกปฏิบัติตามอายุและเพศ! จะเป็นเช่นนี้ จะประกาศอีกครั้ง! ฉันมักจะอ้างถึงบทเรียนแรกเพื่อไม่ให้พูดซ้ำ ดังนั้นฉันขอแนะนำอย่างยิ่งให้ลองดูว่าทำไม? ลองนึกภาพ: คุณเจอโปรเจ็กต์ที่ตัวอย่างเช่นในหน้าหลักมีแถบเลื่อนที่มีสไลด์หลายประเภทอันหนึ่งมีวิดีโออยู่ด้านหลังอีกอันมีรูปภาพและอันที่สามเช่นมีทึบ สี. คุณจะไม่สร้างฟิลด์ชุดเดียว (การกำหนดค่าเดียว) และสิ่งต่างๆ (ขออภัยสำหรับคำศัพท์) ลงในฟิลด์เหล่านี้ทั้งหมด และบอกผู้จัดการว่าจะใช้ชีวิตและอยู่กับมันอย่างไร นี่ไม่ใช่แนวทางที่จริงจัง! ? (หวังว่าจะมีคนเข้าใจ) เรามาเริ่มเรื่องกันดีกว่า เราเข้าใจ "ทำไม" แล้ว ทีนี้เรามาดู "อย่างไร" กันดีกว่า หากคุณได้อ่านบทเรียนแรกแล้ว เราจะต้องไปที่หน้าส่วนประกอบ MIGX และสร้างการกำหนดค่า 3 แบบ ติดตั้ง ColorPicker จาก Jako ล่วงหน้า (แต่ไม่จำเป็น): สิ่งใดก็ตามที่ฉันไม่ได้ระบุ ให้ข้ามไป! การกำหนดค่าที่มั่นคง

• แท็บการตั้งค่า
  • ชื่อ - มั่นคง
  • เพิ่มหมวดหมู่ใหม่ - ตัวเลื่อน
• แท็บรูปแบบ
  • ฟิลด์ ฟิลด์สร้าง 3 ฟิลด์
  • สีพื้นหลัง:
    • ชื่อฟิลด์ - bgcolor
    • คำบรรยาย - เลือกสีพื้นหลัง
    • อินพุตประเภททีวี - ColorPicker (หรือแบบที่คุณ
      ใช้)
  • หัวข้อ:
    • ชื่อฟิลด์ - ส่วนหัว
    • คำบรรยายภาพ - ชื่อสไลด์
  • คำอธิบาย:
    • ชื่อฟิลด์ - คำอธิบาย
    • คำบรรยายภาพ - คำอธิบายสไลด์
    • อินพุตประเภททีวี - พื้นที่ข้อความ
  • ฟิลด์ฟอร์มแท็บหลายรายการ - ประเภท ( ค่านี้จะเป็นชื่อคีย์เข้า
    อาร์เรย์เอาท์พุท ค่าเริ่มต้น: MIGX_formname)
  • - มีสีทึบบนพื้นหลัง (ข้อความ
    การกำหนดค่าที่กำหนดในรายการตัวเลือก)
  • - solid (ค่าของฟิลด์ประเภทเดียวกัน
    ในอาร์เรย์)

การกำหนดค่าวิดีโอ

• แท็บการตั้งค่า
  • ชื่อ-วิดีโอ
  • หมวดหมู่ - สไลเดอร์
• แท็บรูปแบบ
  • ฟิลด์ - สร้าง 1 แท็บและในฟิลด์ฟิลด์ให้สร้าง 3 ฟิลด์อีกครั้ง มีเพียงฟิลด์เดียวเท่านั้นที่เป็นประเภทที่แตกต่างกัน ฉันควรชี้แจงที่นี่ว่าจำนวนฟิลด์และประเภทของฟิลด์ในการกำหนดค่าที่แตกต่างกันอาจแตกต่างกันมากเท่าที่จินตนาการของคุณมีจำกัด... และฉันรู้ว่าจินตนาการของคุณสบายดี
  • วิดีโอ (เช่น ไฟล์):
    • ชื่อฟิลด์ - วีดีโอ
    • คำบรรยายภาพ - อัปโหลดวิดีโอ
    • อินพุตประเภททีวี - ไฟล์
  • หัวข้อ:
    • ชื่อฟิลด์ - ส่วนหัว
    • คำบรรยายภาพ - ชื่อสไลด์
  • คำอธิบาย:
    • ชื่อฟิลด์ - คำอธิบาย
    • คำบรรยายภาพ - คำอธิบายสไลด์
    • อินพุตประเภททีวี - พื้นที่ข้อความ
  • ฟิลด์ฟอร์มแท็บหลายรายการ - ประเภท
  • ข้อความตัวเลือกแท็บหลายรูปแบบ - พร้อมวิดีโอในพื้นหลัง
  • ตัวเลือกแท็บหลายรูปแบบค่า - วิดีโอ

การกำหนดค่าตัวเลื่อนจะถ่ายภาพตามค่าเริ่มต้นและจะเป็นการกำหนดค่าหลัก

• แท็บการตั้งค่า
  • ชื่อ - แถบเลื่อน
  • หมวดหมู่ - สไลเดอร์
  • การแทนที่ "เพิ่มองค์ประกอบ" - เพิ่มสไลด์
  • คำบรรยายแบบฟอร์ม
  • ชื่อหน้าต่าง - เพิ่ม/แก้ไขสไลด์
• แท็บรูปแบบ
  • ฟิลด์ - สร้าง 1 แท็บและสร้าง 3 ฟิลด์อีกครั้งในฟิลด์ฟิลด์
  • ภาพ:
    • ชื่อฟิลด์ - รูปภาพ
    • คำบรรยายภาพ - อัปโหลดรูปภาพ
    • อินพุตประเภททีวี-ภาพ
    • ระบุแหล่งที่มาของไฟล์ที่คุณต้องการ ฉันอธิบายงานนี้ไว้ในบทเรียนแรก
  • หัวข้อ:
    • ชื่อฟิลด์ - ส่วนหัว
    • คำบรรยายภาพ - ชื่อสไลด์
  • คำอธิบาย:
    • ชื่อฟิลด์ - คำอธิบาย
    • คำบรรยายภาพ - คำอธิบายสไลด์
    • อินพุตประเภททีวี - พื้นที่ข้อความ
  • แท็บหลายรูปแบบ - นี่คือที่มาของความมหัศจรรย์ เราต้องเลือกการกำหนดค่าที่สร้างขึ้นในขั้นตอนก่อนหน้า รวมถึงการกำหนดค่าที่เรากำลังสร้างตอนนี้ด้วย เช่น เลือกวิดีโอ ทึบ และแถบเลื่อน การกำหนดค่าแถบเลื่อนจะไม่อยู่ในรายการเนื่องจากจริงๆ แล้วยังไม่ได้สร้าง ดังนั้นคุณจะต้องทำตามขั้นตอนที่เหลือ บันทึกการกำหนดค่า เปิดการกำหนดค่านี้อีกครั้งเพื่อแก้ไข และในครั้งนี้ มันจะอยู่ในแถบเลื่อนรายการที่พร้อมใช้งาน
    คำชี้แจงอีกประการหนึ่ง: การกำหนดค่าจะถูกจัดเรียงตามลำดับที่คุณเลือกทุกประการ เช่น ตามค่าเริ่มต้น เมื่อเพิ่มสไลด์ใหม่ สไลด์แรกในรายการจะถูกเลือก
    
  • ป้ายกำกับฟอร์มแท็บหลายรายการ - เลือกประเภทของสไลด์ (ระบุข้อความไว้ที่นี่
    ซึ่งผู้ใช้จะเห็นถัดจากรายการเลือกประเภทสไลด์)
  • ฟิลด์ฟอร์มแท็บหลายรายการ - ประเภท
  • ข้อความตัวเลือกแท็บหลายรูปแบบ - พร้อมรูปภาพบนพื้นหลัง
  • ตัวเลือกแท็บหลายรูปแบบค่า - รูปภาพ
• แท็บคอลัมน์
  • ฟิลด์คอลัมน์ เพิ่มสององค์ประกอบ
  • หัวเรื่อง
    • แท็บคอลัมน์
      • ส่วนหัว - ส่วนหัว
      • ฟิลด์ - ส่วนหัว
    • แท็บตัวแก้ไขเซลล์
      • ตัวแก้ไข - this.textEditor
  • คำอธิบาย
    • แท็บคอลัมน์
      • ส่วนหัว - คำอธิบาย
      • ฟิลด์ - คำอธิบาย
    • แท็บตัวแก้ไขเซลล์
      • ตัวแก้ไข - this.textEditor

ดังที่คุณสังเกตเห็นแล้วในการกำหนดค่าสองรายการแรกเราไม่ได้สร้างคอลัมน์ที่เรียกว่าสำหรับเอาต์พุตในแผงควบคุมนั่นคือ เมื่อแก้ไขพารามิเตอร์ทีวีเอง จำเป็นต้องสร้างคอลัมน์เหล่านี้ในคอลัมน์สุดท้าย เช่น ในการกำหนดค่าที่จะระบุในทีวีและในฟิลด์ Multiple Formtabs ในแท็บ Formtabs การกำหนดค่าทั้งหมดที่เราต้องการจะแสดงรายการรวมถึงการกำหนดค่าเดียวกันนี้ด้วย
ไปสร้างทีวีอย่างรวดเร็วด้วยประเภทอินพุต migx ในช่องการกำหนดค่าเราเขียนชื่อการกำหนดค่าของเราเช่น แถบเลื่อน กำหนดเทมเพลตที่จำเป็นและเปิดทรัพยากรเพื่อแก้ไขหรือสร้างมันขึ้นมา หากเราทำทุกอย่างถูกต้องแล้วเราควรเห็นภาพต่อไปนี้: รูปภาพสามารถคลิกได้และหากคุณได้ดู GIF บนลิงค์ที่จุดเริ่มต้นของบันทึกย่อแล้วนี่คือมัน

เรากรอกข้อมูลอย่างรวดเร็วและไปยังการแสดงสไลด์ของเราต่อไป

จะถอนออกได้อย่างไร? การป้อนข้อมูลนั้นดี แต่เอาท์พุตล่ะ? - ไม่ต้องกังวลสหาย ทุกอย่างจะเรียบร้อยดี สำหรับเอาต์พุต เรามี 2 ตัวเลือกที่ดีอีกครั้ง และเราพิจารณาทั้งสองตัวเลือกเหล่านี้ใน เหล่านี้คือ getImageList ข้อมูลโค้ด MIGX ดั้งเดิม และ fenom อันยิ่งใหญ่ มาดูกันว่าข้อมูลของเรามีลักษณะอย่างไร: getImageList ลองเรียกข้อมูลโค้ดโดยไม่ต้องระบุพารามิเตอร์ tpl เพื่อดูข้อมูลดิบ:

[] Array ( => 14 => image => files/avatar.png => นี่คือสไลด์ที่มีรูปภาพ => คำอธิบายสั้น ๆ ) [_alt] => 0 [_first] => 1 [_last] = > => 1 = > ตัวเลื่อน) Array ( => 15 => video => files/My home is Shameful.MOV => และนี่คือวิดีโอ => ใช่แล้ว! [_alt] => 1 [_first] => [_last] => => 2 => ตัวเลื่อน) Array ( => 16 => solid => ff0000 => และที่นี่สีแดงก็สวย => ฉันชอบมัน! [_alt] => 0 [_first] => [ _last] => 1 => 3 => แถบเลื่อน)

fenom ($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => นี่คือสไลด์ที่มีรูปภาพ => คำอธิบายสั้น ๆ ) ) => Array ( => 15 => video => files/บ้านของฉันน่าละอาย MOV => และนี่คือวิดีโอแล้ว => ใช่แล้วจริงๆ!) => Array ( => 16 => solid => ff0000 = > และที่นี่สีแดงก็สีสวย => > ชอบนะ!))
ดังที่เราเห็นในอาร์เรย์ของเรามีคีย์ประเภทพร้อมค่าที่เราระบุเมื่อสร้างการกำหนดค่า

ในการแสดงแถบเลื่อนของเราโดยใช้ getImageList เราจำเป็นต้องสร้าง 3 ส่วนที่มีชื่อของค่าคีย์ประเภทของเรา เช่น รูปภาพ วิดีโอ และโซลิด ต่อไปคุณจะเข้าใจว่าทำไม

ตัวอย่างของชิ้น:

// รูปภาพก้อนใหญ่ [[+ส่วนหัว]]

[[+คำอธิบาย]]

// วิดีโอชิ้นใหญ่ [[+ส่วนหัว]]

[[+คำอธิบาย]]

// ก้อนแข็ง [[+ส่วนหัว]]

[[+คำอธิบาย]]

และการโทรควรมีลักษณะดังนี้:

[]

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

(var $slider = $_modx->resource.slider| fromJSON) (ถ้า $slider) (foreach $slider เป็น $slide) (สลับ $slide["type"]) (case "image") ($slide["header "])

($สไลด์["คำอธิบาย"])

(กรณี "วิดีโอ") ($slide["header"])

($สไลด์["คำอธิบาย"])

(กรณี "ทึบ") ($slide["header"])

($สไลด์["คำอธิบาย"])

(/สวิตช์) (/foreach) (/ถ้า)

ผลลัพธ์และเรื่องราวที่สัญญาไว้ ดังที่เราเห็น MIGX สามารถรับมือกับงานนี้ได้ แม้จะไม่ได้ "ดีเยี่ยม" แต่อย่างน้อยก็ "ดี" ฉันขอย้ำอีกครั้งว่า MIGX ไม่จำกัดจำนวนการกำหนดค่า แท็บในการกำหนดค่าแต่ละรายการ และจำนวนฟิลด์ในการกำหนดค่าเหล่านั้น และตัวอย่างที่ฉันหวังว่าคุณจะเข้าใจนั้นค่อนข้างง่ายเพื่อให้คุณสามารถทำความคุ้นเคยกับฟังก์ชันนี้ได้อย่างง่ายดาย และสิ่งสำคัญอีกอย่างหนึ่ง: เมื่อส่งออกเป็นชิ้น ๆ ฉันขอแนะนำอย่างยิ่งให้ตรวจสอบช่องที่จะกรอกและคำนึงเสมอว่าข้อมูลอาจกรอกหรือไม่ได้กรอก หรือด้วยเหตุผลบางประการอาจไม่มาถึง ดังนั้นจึงใช้ตัวกรอง phx สำหรับ ไวยากรณ์ MODX หรือเงื่อนไขใน fenom

ขอบคุณทุกท่านที่ให้ความสนใจ ขอให้ทุกคนโชคดี แต่คงไม่ทำ เพราะอย่างที่เขาว่ากันว่า “ขอให้โชคดี ผู้แพ้” จึงขอให้มีความสุข สุขภาพแข็งแรง หรืออะไรสักอย่าง แต่สำหรับผู้ที่สนใจ ที่เหลือคือประวัติศาสตร์

ครั้งหนึ่งญาติๆ ของฉันมาเยี่ยมพวกเรา ในนั้นก็มีหลานชายของฉัน (ลูกชายน้องสาว) มาจากด้วย ประเทศเพื่อนบ้านและหลานชายสองคนของฉัน (เราอายุเท่ากันเกือบทั้งหมด) บ้านพักตากอากาศ, เอเชียกลางที่มีแสงแดดสดใส, ภูเขาลูกเล็กๆ และแม่น้ำใกล้ๆ คืนเดียวกันนั้นเอง เราทั้งสี่คนตัดสินใจเดินเล่นไปตามแม่น้ำสายนี้ และในตอนแรกทุกอย่างก็สงบ ไม่มีเหตุผลที่ต้องกังวล เรามีช่วงเวลาที่ค่อนข้างดี เล่าเรื่องต่างๆ (บางครั้งก็น่ากลัวและน่ากลัว) พูดติดตลก และอะไรทำนองนั้น แต่เมื่อถึงจุดหนึ่ง ฉันสังเกตเห็นว่าหลานชายคนหนึ่งของฉันหน้าซีด และนี่ไม่ใช่แค่คำพูดหรือการปรุงแต่งเท่านั้น เพราะฉันไม่เคยเห็นความกลัวและความสับสนเช่นนี้บนใบหน้าของบุคคลใดมาก่อนและหลังเหตุการณ์นี้ เขามองไปในทิศทางที่หันหลังของฉันโดยไม่ละสายตานั่นคือ ดูเหมือนเขาจะมองอะไรบางอย่างหรือบางคนอยู่ข้างหลังฉัน แต่ไม่ใช่อยู่ข้างหลังฉันโดยตรงและปิดลง สำหรับฉันดูเหมือนว่าเขากำลังมองที่ไหนสักแห่งในระยะไกล มันน่าขนลุกและฉันก็ถามเขาว่า: - เกิดอะไรขึ้น? และเขา…

ย่อหน้านี้จะต้องแกล้งทำเป็นว่าเรื่องราวในบันทึกนี้มีความต่อเนื่อง แต่จริงๆ แล้วฉันแค่หลอกคุณนิดหน่อย หวังว่าฉันจะให้กำลังใจคุณได้บ้างจากข้อความทางเทคนิคที่น่าเบื่อและยาว แล้วอารมณ์ของคุณก็จะดีขึ้น และเรื่องราวเองก็เป็นจริงและน่าสนใจมาก ตอนนี้ขอขอบคุณทุกท่านที่ให้ความสนใจ!

อัปเดต:
แล้วถ้าฉันเป็นบาคล่ะ!?

หากจู่ๆ มีคนอยากขอบคุณคุณด้วยเงินรูเบิลก็ไม่เป็นไร: บัตร Sberbank +79609354545

ในบทนี้ เราจะพูดถึงพื้นฐานของ MIGX และทำงานกับแถบเลื่อนใหม่ที่คุณสามารถใช้ในบล็อกของคุณ

ความต้องการ:

• เว็บไซต์ MODX Revolution
• ติดตั้งประเภทตัวแปรเทมเพลตแบบกำหนดเอง MIGX (ผ่านการควบคุมแพ็คเกจ)
• แถบเลื่อนแกลเลอรีหรือสคริปต์ที่เราต้องการรวมเข้าด้วยกัน ฉันใช้ FlexSlider ของ WooThemes เพราะมันปรับตัวเองตามความกว้างของคอนเทนเนอร์ (ซึ่งสำคัญมากสำหรับการออกแบบแบบตอบสนอง!) นอกจากนี้ยังกำหนดค่าได้ง่าย รองรับการเลื่อนบนสมาร์ทโฟน และดูดีโดยไม่ต้องดัดแปลงใดๆ
• ติดตั้งตัวอย่าง phpthumbof ผ่าน Package Manager สำหรับการครอบตัดรูปภาพอัตโนมัติ
• รูปไหนก็ได้!

เริ่ม

งานนี้ใช้หลายส่วน ก่อนอื่น เราต้องติดตั้ง MIGX TV และเราจำเป็นต้องนำข้อมูลนี้จากส่วนหน้าและทำให้แถบเลื่อนของเราทำงานได้ บทช่วยสอนนี้ถือว่าใช้ FlexSlider เราจะตรวจสอบให้แน่ใจว่าเลย์เอาต์เป็นไปตามที่ต้องการ แต่ก็ควรปรับให้เข้ากับแถบเลื่อนอื่นได้ง่ายมาก

ขั้นตอนที่ 1: ติดตั้ง MIGX TV สำหรับการจัดการรูปภาพ

เริ่มต้นด้วยการติดตั้งทีวี พลังของ MIGX คือคุณสามารถกำหนดฟิลด์ที่คุณต้องการได้ คุณจะเห็นเป็นตารางและคุณเพียงแค่ต้องตั้งชื่อหัวข้อ ในกรณีนี้ ฉันจะต้องมีฟิลด์ที่แตกต่างกันสามฟิลด์:

• ช่องป้อนข้อมูลสำหรับเลือกภาพในระบบไฟล์ (หรือใน 2.2 จากแหล่งสื่อของคุณ)
• ช่องป้อนข้อความสำหรับป้อนคำบรรยาย/แท็ก/คำอธิบาย FlexSlider ทำงานได้ดีมากพร้อมคำบรรยาย ดังนั้นเราจะใช้มัน
• ฉันยังเพิ่มการป้อนข้อความสำหรับ "ตั้งค่า" ดังที่เราจะได้เห็นในภายหลัง ฉันจะใช้สำหรับตัวเลื่อนแต่ละตัวจำนวนไม่สิ้นสุดที่จะถูกเพิ่มจากที่ใดก็ได้ในทรัพยากร

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

มาดูการสร้างทีวีกันดีกว่า นี่คือแถบเลื่อนพร้อมคำอธิบายรูปภาพ (ในกรณีที่ไม่เห็นสิ่งใดในภาพขนาดย่อ)

สร้างตัวแปรเทมเพลตใหม่ในแท็บองค์ประกอบและตั้งชื่อที่เหมาะสม ฉันจะเรียกมันว่า ws.images ถ้าคุณตั้งชื่อมันเอง อย่าลืมแทนที่ [[*ws.images]] ด้วยชื่อของคุณ ในแท็บตัวเลือกการป้อนข้อมูล ให้เลือกประเภท "migx" จากเมนูแบบเลื่อนลง หากคุณไม่เห็นประเภทนี้ ให้ตรวจสอบว่าคุณได้ติดตั้งแพ็คเกจ MIGX ผ่านทาง Package Manager หรือไม่ คุณจะสังเกตเห็นว่ามีการเพิ่มตัวเลือกหลายอย่างที่ด้านล่างของหน้าจอ รวมถึงแท็บแบบฟอร์มและคอลัมน์ตาราง สิ่งนี้ใช้ได้กับ MODX เวอร์ชัน >2.0; สำหรับเวอร์ชันก่อนหน้า ฉันแนะนำให้อัปเกรด

โปรดทราบ: ช่องแท็บฟอร์มและคอลัมน์กริดจะต้องกรอกด้วยสตริง JSON ที่ถูกต้อง โดยพื้นฐานแล้ว JSON เป็นวิธีการแสดงวัตถุ อาร์เรย์ หรือคีย์ -> การรวมค่าในลักษณะที่ภาษาการเขียนโปรแกรมเกือบทุกภาษารองรับ นี่คือข้อกำหนดทางเทคนิคและตัวอย่างบางส่วนจากเว็บไซต์ JSON อย่างเป็นทางการ

การติดตั้งแท็บแบบฟอร์ม

แบบฟอร์มอนุญาตให้คุณใช้แท็บต่างๆ แต่ละแท็บมีคำอธิบายและหลายช่อง คุณสามารถทำสิ่งที่ล้ำหน้าได้มากมายด้วยสิ่งนี้ เนื่องจากคุณจะต้องใช้แท็บเดียวเกือบตลอดเวลา ดังนั้นโปรดจำไว้ก่อนไว้ใช้ในภายหลัง นี่คือโค้ด JSON สำหรับแท็บแบบฟอร์มที่ฉันใช้:

[("คำบรรยายภาพ": "รูปภาพ", "ฟิลด์": [ ("field": "set", "คำอธิบายภาพ": "ชุด"), ("field":คำอธิบาย ""คำอธิบาย": "คำอธิบาย") , ("field": "รูปภาพ" "คำบรรยาย" "รูปภาพ" "inputTVtype" "รูปภาพ") ] )]

มาดูแต่ละบรรทัดกัน:

• อันแรกแสดงการเปิดอาร์เรย์แท็บด้วยวงเล็บเหลี่ยม ([) และการเปิดวัตถุแท็บด้วยเครื่องหมายปีกกา (()) หลังจากนี้ เราจะกำหนดคำอธิบายของฟิลด์ Image โปรดทราบว่าคุณต้อง หากต้องการใช้เครื่องหมายคำพูดคู่ (" ") สำหรับคุณสมบัติและค่า เครื่องหมายคำพูดเดี่ยวอาจนำไปสู่ผลลัพธ์ที่ไม่คาดคิด หากคุณพบเครื่องหมายวงเล็บเหล่านี้ในคุณสมบัติหรือค่าใดๆ ให้หลีกเลี่ยงเครื่องหมายเหล่านั้นด้วยเครื่องหมายทับ (\) หลังจากกำหนดคำอธิบาย (คำบรรยาย) แล้ว มาดำเนินการต่อและเริ่มกำหนดอาร์เรย์ของ “ฟิลด์” โดยเปิดด้วยวงเล็บเหลี่ยม ([)
• เราจะกำหนดฟิลด์แรกของเราเป็นชุด "field": "set" หมายความว่าเราต้องการให้ป้อนข้อความธรรมดาในช่องนี้ “คำบรรยาย”: “ชุด” – เราให้คำอธิบายของชื่อ “ชุด” – นี่จะเป็นชื่อสำหรับการป้อนข้อความธรรมดา ต่อไปเราจะให้ลายเซ็น "Set" ซึ่งจะแสดงในแบบฟอร์มเป็นป้ายกำกับฟิลด์
• ต่อไป เราจะกำหนดฟิลด์คำอธิบายในลักษณะเดียวกัน
• บรรทัดที่ 4 กำหนดรูปภาพ สิ่งที่พิเศษคือเราใช้ทีวีเครื่องอื่น (ชื่อ "รูปภาพ") เป็นประเภทอินพุต นี่เป็นคุณสมบัติที่แข็งแกร่งมากของ MIGX และช่วยให้คุณใช้ทีวีเครื่องอื่นเพื่อสร้างรูปร่างของคุณได้ ในกรณีนี้ "รูปภาพ" ของทีวีนั้นง่ายมาก: ประเภทอินพุตคือรูปภาพ และใน 2.2 คุณสามารถกำหนดให้กับแหล่งสื่อที่ถูกต้องได้ คุณไม่จำเป็นต้องเชื่อมโยงมันกับเทมเพลตเหมือนกับที่คุณทำในกรณีของทีวีทั่วไป อีกวิธีหนึ่งในการทำเช่นนี้ (ซึ่งฉันใช้ในทีวี MIGX อื่นๆ) คือการสร้างกล่องวิทยุหรือกล่องเลือก
• บรรทัดที่ห้าปิดอาร์เรย์เขตข้อมูล โปรดทราบว่าบรรทัดสุดท้ายที่กำหนดฟิลด์ (รูปภาพ) ไม่ได้ลงท้ายด้วยลูกน้ำ - นี่เป็นสิ่งสำคัญ! หากคุณใส่เครื่องหมายจุลภาคในอาร์เรย์ JSON จะไม่ถูกแยกวิเคราะห์และแบบฟอร์มของคุณจะไม่ทำงาน
• บรรทัดที่หกปิดวัตถุแท็บและอาร์เรย์แท็บทั้งหมด

ด้วยวิธีนี้เราจึงสร้างทีวี "ภาพ"! คุณควรมีแบบฟอร์มที่ใช้กรอกข้อมูลอยู่แล้ว แต่คุณต้องมีมาร์กอัปจึงจะแสดงได้...

การตั้งค่าเค้าโครงคอลัมน์ เค้าโครงคอลัมน์เป็นตารางบนแผงทรัพยากรของทีวี คุณต้องกำหนดส่วนหัวสำหรับตารางนี้ผ่านตัวเลือกอินพุตเค้าโครงคอลัมน์ นี่คือคำจำกัดความ (JSON อีกครั้ง) ของสิ่งที่ฉันใช้: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description", "sortable" : "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image", "renderer": "this.renderImage" " )]

มาดูแต่ละบรรทัดกัน:

• เปิดอาร์เรย์ส่วนหัวด้วยวงเล็บเหลี่ยม ([) และส่วนหัวของคอลัมน์ที่ห้าด้วยเครื่องหมายปีกกา (()
• เราตั้งชื่อส่วนหัวว่า "Set" ระบุว่าสามารถเรียงลำดับได้ (เรียงลำดับได้) และระบุพารามิเตอร์ "set" ซึ่งสอดคล้องกับคำจำกัดความของแท็บ Set Form ที่มี "field": "set"
• สิ้นสุดการตั้งค่า / เริ่มต้นคำอธิบาย
• เราตั้งชื่อส่วนหัวว่า "คำอธิบาย" จัดเรียงและเปรียบเทียบกับฟิลด์คำอธิบาย dataIndex
• สิ้นสุดคำอธิบาย / รูปภาพเริ่มต้น
• ตั้งชื่อส่วนหัวว่า "รูปภาพ" ซึ่งไม่สามารถจัดเรียงได้ และแมปกับฟิลด์ dataIndex - รูปภาพ นอกจากนี้เรายังจะกำหนดตัวเรนเดอร์ซึ่งใน ExtJS จะอนุญาตให้คุณเปลี่ยนประเภทของข้อมูลเอาต์พุต ในกรณีนี้ "this.renderImage" ตัวแสดงภาพจะใช้ URL ของรูปภาพที่เลือกโดยอัตโนมัติและสร้างภาพขนาดย่อแทน
• จุดสิ้นสุดของวัตถุ Image และอาร์เรย์ส่วนหัว

หลังจากนี้ คุณสามารถกำหนด MIGX TV นี้ให้กับเทมเพลตของคุณและตรวจสอบผลลัพธ์ได้ มาร์กอัปไม่แสดง? กลับไปที่แท็บและตรวจสอบให้แน่ใจว่าค่าทั้งหมดอยู่ในเครื่องหมายคำพูดคู่ ไม่ใช่เครื่องหมายคำพูดเดี่ยว และตรวจสอบเครื่องหมายจุลภาคเพิ่มเติม

ข้อมูล ใช้ JSONLint เพื่อตรวจสอบ JSON

• กรอกรายละเอียด
• แสดงข้อมูลบนเว็บไซต์

มาเติมตัวแปรเทมเพลตของเรา ws.image ด้วยข้อมูลที่กำหนดเอง

หากคุณพยายามแสดงข้อมูลนี้เป็นทีวีปกติ คุณจะเห็นสิ่งนี้:

[( "MIGX_id": "1", "set": "set1", "คำอธิบาย": "แมวของมาร์คที่แอบขโมยไส้กรอกมากินเมื่อไม่ได้หลับ", "image": demo/uroki/15 /1 .jpg" ),( "MIGX_id": "2", "set": set1, "คำอธิบาย: "barabaka", "image": "demo/uroki/15/2.jpg" ),( "MIGX_id บาร์"3", "set": "set1", "คำอธิบาย": "como esta nuevo", "image": "demo/uroki/15/3.jpg" ),( "MIGX_id":4 , "set": "set1", "คำอธิบาย": คุณสามารถฆ่าคนได้ด้วยหนังสือเล่มนี้ ""image": "demo/uroki/15/4.jpg" )]

นี่คืออาร์เรย์ JSON ที่ป้อนฟิลด์และค่า!

เนื่องจาก MIGX มาพร้อมกับส่วนย่อย getImageList คุณจึงสามารถลองแสดงข้อมูลโดยใช้ข้อมูลนี้ได้ คุณสามารถค้นหาเอกสารประกอบได้ในตัวอย่างนี้ หรือสร้างตัวอย่างของคุณเอง (parseMIGXToGallery) ซึ่งฉันใช้เพื่อสร้างมาร์กอัปจาก &tpl chunk ตามข้อมูลทีวี: