การใช้ jQuery UI ในตัวในธีมของฉัน

25

ชุดรูปแบบของฉันทุกหน้าจะต้องใช้ jquery UI ฉันรู้ว่ามันรวมอยู่ใน Drupal 7 แต่ฉันไม่สามารถถอดรหัสเอกสารทางเทคนิคของ Drupal ได้ ดูเหมือนว่าวิธีเดียวที่จะทำได้คือใช้ไฟล์ template.php แต่เนื่องจากฉันไม่เข้าใจไฟล์นั้นฉันจึงพยายามหลีกเลี่ยงการทำเช่นนั้น

มีวิธีอื่นหรือฉันควรลองไฟล์ template.php

7 theming javascript

— เบน
แหล่งที่มา

คุณพยายามจะทำอะไร? ฟังก์ชัน jquery UI ทั้งหมดและสิ่งที่คุณไม่ควรมีให้ รันโค้ด JS ที่กำหนดเองในทุกหน้าใช่ไหม ดำเนินการในหน้าเฉพาะหรือไม่ เหตุการณ์เฉพาะ มีหลายวิธีในการทำให้ JS ทำงาน, คือ drupal_add_js

— LSU_JBob

ฉันกำลังพยายามใช้. datepicker () ในบางฟิลด์ที่ปรากฏในทุกหน้าในธีมของฉัน อาจมีบางสิ่งเพิ่มเติมในภายหลังเช่นกัน

— Ben

@Ben อย่าลืมมอบรางวัลหากคำตอบสามารถแก้ไขปัญหาของคุณได้

— googletorp

@googletorp ขออภัยความโปรดปรานครั้งแรกของฉัน รางวัลที่ได้รับ

— Ben

ฉันรู้สึกเหมือนคำตอบจำนวนมากออกจากขั้นตอนสุดท้ายว่าเมื่อคุณรวม drupal_add_library ('system', 'ui.button') หรืออะไรก็ตามคุณต้องเพิ่ม javascript หนึ่งบรรทัดหรือสองธีมในธีมของคุณที่กล่าวว่าจริง ๆ แล้ว เสียบเข้าไป.

— Ryan Price

36

การเพิ่ม JS ให้กับหน้านั้นไม่ใช่เรื่องยากแม้ว่าคุณจะต้องใช้ PHP

สำหรับไฟล์ JS ปกติคุณสามารถทำสิ่งนี้ได้

drupal_add_js($path_to_js)

Drupal ได้ทำการลงทะเบียน jQuery UI ลงในไลบรารีทำให้ง่ายต่อการเพิ่มทั้งไฟล์ JS และ CSS สำหรับปลั๊กอิน jQuery UI สามารถทำได้โดยใช้

drupal_add_library($module, $library);

ปลั๊กอิน jQuery UI ทั้งหมดมีอยู่ในโมดูลระบบดังนั้นคุณสามารถทำได้

drupal_add_library('system', 'ui');

หรือ

drupal_add_library('system', 'ui.accordion');

บางส่วนของปลั๊กอินเหล่านี้มีการพึ่งพาเนื่องจากพวกเขาใช้ปลั๊กอินอื่น ๆ Drupal จัดการสิ่งนี้อย่างชาญฉลาดและจะรวมส่วนประกอบที่จำเป็น

คุณสามารถดูรายการเต็มรูปแบบของ jQuery ปลั๊กอินที่นี่ สิ่งนี้ถูกจัดรูปแบบเป็นอาร์เรย์ PHP แต่โดยทั่วไปแล้วหลักการตั้งชื่อคือ ui.PLUGIN-NAME

หากคุณต้องการเพิ่ม JS ในทุก ๆ หน้าคุณสามารถเพิ่ม hook ของหน้าประมวลผลล่วงหน้าและเพิ่มลงในหน้านั้นได้ สิ่งนี้จะมีลักษณะเช่นนี้ในไฟล์ template.php

function NAME_OF_THEME_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.accordion');
  drupal_add_library('system', 'effects.highlight');
}

— googletorp
แหล่งที่มา

ฉันพยายามเพิ่มสิ่งที่คุณมีอยู่ที่นี่ (แต่ใช้ชื่อธีมแทน NAME_OF_THEME) ใน template.php และใช้ไม่ได้ ความคิดใด ๆ นี่คือสิ่งที่ฉันมี:

function nocturnal_preprocess_page(&$variables) { 	drupal_add_library('system', 'ui'); 	drupal_add_library('system', 'ui.datepicker'); }

— Ben

@ben คุณต้องล้างแคชทุกครั้งที่คุณเพิ่ม hook หรือฟังก์ชั่น preprocess ลองล้างแคช คุณต้องมีวิธีทดสอบว่าใช้งานได้หรือไม่เนื่องจากคุณเพิ่มไฟล์ JS เท่านั้นซึ่งจะไม่ทำอะไรด้วยตนเอง

— googletorp

ฉันล้างแคชแล้วและควรทำงานกับบางฟิลด์วันที่ซึ่งก่อนหน้านี้ใช้ jquery UI ที่อ้างอิงด้วยตนเอง ยังคงแก้ไขข้อผิดพลาด แต่ไม่พบสิ่งผิดปกติ

— Ben

@Ben ขั้นตอนแรกคือดูแหล่งที่มาและดูว่ามีการรวมไฟล์ไว้หรือไม่ (ปิดใช้งานการรวม JS หากเปิดใช้งานอยู่)

— googletorp

3

@googletorp: คุณช่วยอธิบายรายละเอียดเล็กน้อยบน betweeen ความแตกต่างdrupal_add_library('system', 'ui');และdrupal_add_library('system', 'ui.accordion');? เป็นคนแรกที่ดึงทุกอย่างหรือแก่นแท้? ฉันต้องมีบรรทัดสำหรับทุกปลั๊กอินที่ใช้หรือไม่

— Jarl

4

คุณลองโมดูdate_popup แล้วหรือยัง ทำงานได้ดีกับแบบฟอร์ม API

— LSU_JBob
แหล่งที่มา

ฉันไม่ต้องการโมดูลเพราะรูปแบบที่ต้องการนั้นซับซ้อนและต้องมีการเข้ารหัสที่กำหนดเอง มันยากในแม่แบบสำหรับชุดรูปแบบ ฉันพยายามหาวิธีที่ดีที่สุดในการใช้ประโยชน์จาก jQuery UI ที่มาพร้อมกับ Drupal วิธีเดียวที่ฉันจะทำให้มันใช้งานได้คือใส่ไว้ในโฟลเดอร์ของธีมและลิงก์ไปที่นั่น แต่เนื่องจากฉันใช้งานเว็บไซต์หลายแห่งในการติดตั้ง Drupal ครั้งเดียวและไซต์เหล่านี้ทั้งหมดต้องการ jQuery UI ฉันจึงต้องการใช้ jQuery UI ในตัวเพื่อป้องกันการทำงานซ้ำซ้อน

— Ben

คุณควรจะสามารถเรียกสิ่ง jQuery ui จากเว็บไซต์ใด ๆ และเพิ่มในมันเป็นหลัก drupal แบบฟอร์มถูกสร้างด้วย Form API หรือไม่

— LSU_JBob

2

ทำไมแบบฟอร์มที่สร้างขึ้นในไฟล์เทมเพลต นั่นไม่ใช่เรื่องน่าเบื่อมาก ... ถ้าคุณไม่ได้ใช้ API แบบฟอร์มคุณจะพลาดประโยชน์บางประการเช่นความปลอดภัยในตัวจากการโจมตี SQL injection ฉันขอแนะนำให้นำแบบฟอร์มของคุณออกจากไฟล์เทมเพลตและเขียนโมดูลที่กำหนดเองซึ่งคุณสร้างแบบฟอร์มโดยใช้ Form API พยายามอย่าเป็นคาวบอย ในกรณีใด ๆ คุณสามารถอ้างอิงจาวาสคริปต์ได้จากทุกที่โดยใช้ drupal_add_js บางสิ่งเช่นนี้ drupal_add_js ('/ misc / ui / jquery.ui.core.min.js', 'file'); AND drupal_add_js ('/ misc / ui / jquery.ui.datepicker.js', 'ไฟล์');

— LSU_JBob

3

สร้างฟอร์มในโมดูลที่กำหนดเองโดยใช้ Form API จากนั้นในไฟล์ tpl เรียกการเรนเดอร์ (drupal_get_form ('form_id')); ฉันสัญญาว่าจะใช้แบบฟอร์ม api ซึ่งอาจมีจาวาสคริปต์ที่กำหนดเองสามารถจัดการกับความต้องการที่ซับซ้อนที่คุณมี ฉันรู้สึกว่าคุณกำลังทำให้สิ่งต่างๆยากขึ้นด้วยตัวคุณเองโดยพยายามยัดเยียดฟังก์ชั่นทั้งหมดนี้ให้เป็นไฟล์ tpl นั่นเป็นเทคนิคของเลเยอร์ธีมดังนั้นจึงไม่ใช่วิธีที่ดีที่สุดที่จะป๋อมในส่วนใหญ่ของโค้ดแบ็คเอนด์ที่ใช้งานได้ในพวกเขา

— LSU_JBob

3

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

— Jonathan Rowny

4

refactor แบบฟอร์มที่กำหนดค่าตายตัวของคุณในไฟล์. tpl ไปยังการใช้งานแบบ API เช่น @LSU_JBob กล่าวไม่มีเหตุผลว่าทำไมคุณควรสร้างฟอร์มโดยไม่ใช้ FAPI ผมขอแนะนำให้คุณอ่านแบบฟอร์ม API Quickstart คู่มือและมาร์คอ้างอิงแบบฟอร์ม APIหน้า
เมื่อคุณสร้างแบบฟอร์มแล้วและคุณสามารถส่งค่าไปให้ดำเนินการประมวลผล ฯลฯ ดาวน์โหลดและอ่านรหัสในโมดูลตัวควบคุมวันที่ Date ใช้สำหรับระบุป๊อปอัพวันที่ที่คุณต้องการสร้าง แต่สำหรับ CCK ใน D6 และ Core Fields ใน D7 แม้ว่าคุณจะไม่ต้องการทำงานกับเขตข้อมูลโมดูลวันที่ใช้ JQuery UI เพื่อบรรลุสิ่งที่คุณพยายามทำ โมดูลนี้ควรให้ตัวอย่างที่ชัดเจนแก่คุณ

— บาริสต้ามือสมัครเล่น
แหล่งที่มา

ขอบคุณ ลิงก์เหล่านั้นมีประโยชน์ ฉันไม่ชอบ PHP แต่ฉันเดาว่าฉันต้องทำอย่างที่ฉันต้องการในกรณีนี้ ฉันอาจจะเก็บไว้ในไฟล์ tpl เพื่อประโยชน์เวลาเนื่องจากฉันไม่มีเวลาเรียนรู้ Drupal PHP ในขณะนี้ คำแนะนำที่ดีจากทุกคนว่า

— Ben

3

ขอบคุณที่googletorpตอบคำถามนี้

เพียงเพื่อเพิ่มถ้าสิ่งที่ยังไม่ชัดเจนมากที่เกี่ยวข้องกับการเปิดใช้งานปลั๊กอิน UI

โปรดทราบว่าเมื่อคุณจะพูดถึง: drupal_add_library('system', 'ui');
นี่จะไม่เปิดใช้งานปลั๊กอิน ui ทั้งหมดโดยอัตโนมัติ

คุณสามารถค้นหารายชื่อปลั๊กอิน jquery ui ที่มีใน drupal 7 ที่นี่: /misc/ui/

ในการเปิดใช้งานปลั๊กอิน, ตัวอย่าง: jquery.ui.slider.min.jsคุณต้องเพิ่มบรรทัดนี้:

drupal_add_library('system', 'ui.slider');

หวังว่านี่จะเป็นประโยชน์

— Sumoanand
แหล่งที่มา

2

ฉันมีปัญหานี้เมื่อเร็ว ๆ นี้ มีคนให้โมดูลที่กำหนดเองเพื่อบังคับให้ JQuery UI โหลดทุกหน้า คุณสามารถสร้างมันขึ้นมาใหม่ได้อย่างง่ายดาย ก่อนอื่นให้ติดตั้งjquery_updateและตรวจสอบให้แน่ใจว่าใช้งานได้ จากนั้นสร้างและเปิดใช้งานโมดูลนี้:

สร้างโฟลเดอร์ในพา ธ / ถึง / โมดูลที่ชื่อว่า 'jquery_force'

ข้างในเพิ่มสองไฟล์:

jquery_force.info :

name = JQuery UI Force
description = Forces JQuery UI to always load
dependencies[] = jquery_update
package = User Interface
core = 7.x
files[] = jquery_force.module

jquery_force.module :

<?php
/**
 * @file jquery_force.module
 * TODO: Enter file description here.
 */

/**
 * Implements hook_init().
 */
function jquery_force_init() {
    drupal_add_library('system', 'ui');
}

— mtro
แหล่งที่มา

2

การเพิ่มตัวประมวลผลล่วงหน้าในtemplate.phpไฟล์ไม่ทำงานสำหรับฉัน

ฉันเพียงแค่ใส่drupal_add_library('system', 'ui');ลงtemplate.phpไฟล์ด้วยตัวเองใช้งานได้

— user17418
แหล่งที่มา