Usando a interface do usuário jQuery integrada no meu tema


25

Cada página do meu tema precisará usar a interface do usuário do jquery. Sei que está incluído no Drupal 7, mas não consigo decifrar a documentação técnica demais do Drupal. Parece que a única maneira de fazer isso é com o arquivo template.php. Mas como não entendo esse arquivo, estou tentando evitar fazer dessa maneira.

Existe outra maneira, ou devo apenas tentar o arquivo template.php?


O que você está tentando fazer? Todas as funções da interface do usuário do jquery e o que não deve estar disponível para você. Executar código JS personalizado em todas as páginas? Executá-lo em uma página específica? um evento específico? Existem várias maneiras de executar o JS, a saber: drupal_add_js
LSU_JBob

Estou tentando usar .datepicker () em alguns campos que aparecem em todas as páginas do meu tema. Talvez mais algumas coisas mais tarde também.
22411 Ben

@ Ben Lembre-se de conceder a recompensa se uma resposta resolver seu problema.
googletorp

@googletorp Desculpe, minha primeira recompensa. Recompensa concedida.
Ben

Sinto que muitas das respostas deixam de fora a etapa final: depois de incluir o drupal_add_library ('system', 'ui.button') ou qualquer outra coisa, você precisa adicionar uma ou duas linhas de javascript ao seu tema que realmente invocam o dito plugar.
Ryan Price

Respostas:


36

Adicionar JS a uma página não é tão difícil assim, mesmo que você precise usar o php.

Para arquivos JS normais, você pode fazer algo assim

drupal_add_js($path_to_js)

No entanto, o Drupal registrou a interface do usuário do jQuery nas bibliotecas, facilitando a adição de arquivos JS e CSS para determinados plugins da interface do usuário do jQuery. Isso pode ser feito usando

drupal_add_library($module, $library);

Todos os plugins da interface do usuário do jQuery existem no módulo do sistema, então você pode fazer

drupal_add_library('system', 'ui');

ou

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

Alguns desses plugins têm dependências porque usam outros plugins. O Drupal lida com isso de maneira inteligente e incluirá os componentes necessários.

Você pode ver a lista completa de plugins jQuery aqui . Isso é formatado como uma matriz PHP, mas geralmente a convenção de nomenclatura é ui.PLUGIN-NAME.

Se você precisar adicionar o JS em todas as páginas, basta adicionar um gancho de página de pré-processamento e adicioná-los lá. Isso seria algo parecido com isso no arquivo 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');
}

Tentei adicionar exatamente o que você tem aqui (mas usando o nome do meu tema no lugar de NAME_OF_THEME) ao template.php e não funcionou. Alguma ideia? Isto é o que eu tenho: function nocturnal_preprocess_page(&$variables) { drupal_add_library('system', 'ui'); drupal_add_library('system', 'ui.datepicker'); }
Ben

@ben Você precisa limpar o cache sempre que adicionar uma nova função de gancho ou pré-processamento. Tente limpar o cache. Você também precisa de uma maneira de testar se funciona, pois você está apenas adicionando arquivos JS que não farão nada sozinhos.
googletorp

Limpei o cache e ele deve estar funcionando em alguns campos de data que estavam usando anteriormente uma interface de usuário do jquery referenciada manualmente. Ainda está depurando, mas não foi possível encontrar nada de errado até o momento.
Ben

@ Ben primeiro passo é olhar na fonte e ver se os arquivos foram incluídos (desativar agregação JS se ligado)
googletorp

3
@googletorp: Você poderia elaborar um pouco sobre a diferença entre drupal_add_library('system', 'ui');e drupal_add_library('system', 'ui.accordion');? O primeiro está buscando tudo ou apenas o núcleo? Preciso de uma linha para cada plug-in que uso?
Jarl 28/01

4

você já experimentou o módulo date_popup ? funciona bem com a API do formulário


Eu não quero um módulo porque o formulário que precisa é muito complexo e requer codificação personalizada. É codificado no modelo para o tema. Estou tentando descobrir a melhor maneira de usar a interface do usuário do jquery que acompanha o Drupal. A única maneira de fazê-lo funcionar é colocá-lo na pasta do meu tema e vinculá-lo lá. Mas como eu estou executando vários sites em uma instalação do Drupal, e todos esses sites precisarão da interface do usuário do jQuery, eu queria usar apenas a interface do usuário do jQuery para impedir o trabalho duplicado.
21911 Ben

você poderá chamar qualquer material da interface do usuário do jquery de qualquer site e adicioná-lo, está no núcleo drupal. O formulário é criado com a API do formulário?
LSU_JBob

2
Por que o formulário está incorporado nos arquivos de modelo? isso não é muito drupal ... se você não estiver usando a API do formulário, estará perdendo alguns dos benefícios, como segurança interna contra ataques de injeção de SQL. Eu recomendo retirar seus formulários dos arquivos de modelo e escrever um módulo personalizado onde você faz os formulários usando a API do formulário. Tente não ser um cowboy. De qualquer forma, você pode fazer referência ao javascript de qualquer lugar usando drupal_add_js, algo como isto drupal_add_js ('/ misc / ui / jquery.ui.core.min.js', 'arquivo'); AND drupal_add_js ('/ misc / ui / jquery.ui.datepicker.js', 'arquivo');
LSU_JBob

3
Crie o formulário em um módulo personalizado usando a API do formulário e, em seguida, nos arquivos tpl chame render (drupal_get_form ('form_id')); Prometo que a API do formulário, talvez com algum javascript personalizado, possa lidar com qualquer requisito complexo que você tenha. Eu sinto que você está apenas tornando as coisas mais difíceis para si mesmo, tentando compactar toda essa funcionalidade em um arquivo tpl. Essa é tecnicamente a camada do tema, portanto, não é uma boa prática inserir grandes pedaços de código de back-end funcional neles.
LSU_JBob

3
Eu acho que ele está dizendo CRIAR um módulo. Coisas funcionais, como formas, pertencem a módulos. A API do formulário permite criar qualquer tipo de formulário que você possa imaginar em seu próprio módulo personalizado. O tema deve ser independente da funcionalidade na maioria dos casos. Isso lhe dará mais flexibilidade no caminho.
Jonathan Rowny

4
  1. Refatore seu formulário codificado no arquivo .tpl em uma implementação da API de formulário. Como o @LSU_JBob disse, não há razão para criar um formulário sem usar a FAPI. Eu recomendo que você leia o Guia de início rápido da API de formulários e marque a referência da API de formulários página de .
  2. Depois de criar seu formulário e poder enviar valores a ele, processá-lo etc., faça o download e leia o código no módulo Data Contrib. A data é usada para fornecer o tipo de data pop-up que você deseja criar, mas para CCK em D6 e Core Fields em D7. Embora você não esteja procurando trabalhar com campos, o módulo Data usa a JQuery UI para realizar o que você está tentando fazer. Este módulo deve fornecer um exemplo sólido.

Obrigado. Esses links são úteis. Eu realmente não gosto de entrar no PHP, mas acho que devo fazer exatamente o que quero fazer neste caso. Provavelmente vou mantê-lo no arquivo tpl por uma questão de tempo, pois não tenho tempo para aprender Drupal PHP no momento. Um bom conselho de todos embora.
Ben

3

Obrigado googletorppor responder.

Apenas para adicionar, se as coisas ainda não estiverem muito claras relacionadas à ativação de plugins de interface do usuário .

Observe que quando você mencionar: drupal_add_library('system', 'ui');
Isso NÃO ativará todos os plugins da interface do usuário automaticamente.

Você pode encontrar a lista de plugins jquery ui disponíveis no drupal 7 aqui: /misc/ui/

Para habilitar um plug-in perticular, por exemplo:, jquery.ui.slider.min.jsvocê precisa adicionar esta linha:

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

Espero que isso seja útil.


2

Eu tive esse problema recentemente. Alguém me deu seu módulo personalizado para forçar o carregamento da interface do usuário do JQuery em todas as páginas. Você pode recriá-lo simplesmente. Primeiro, instale jquery_update e verifique se está funcionando. Em seguida, crie e ative este módulo:

Crie uma pasta no caminho / to / modules chamado 'jquery_force'.

Dentro, adicione dois arquivos:

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');
}

2

Adicionando um gancho de pré-processo no template.php arquivo não funcionou para mim.

Eu simplesmente coloco drupal_add_library('system', 'ui');no template.phparquivo por si só, funciona.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.