如何将简单的jQuery和jQuery

如何将简单的jQuery和jQuery

关注
发信
关注(28)粉丝(399)

Drupal-如何将简单的jQuery和jQuery UI添加到head标签?

本文介绍了Drupal-如何将简单的jQuery和jQuery UI添加到head标签?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

个人而言，我不喜欢使用jQuery Update模块； 1.似乎有很多不必要的开销； 2.它仅允许更新至jQuery 1.8，这已经很旧了，个人而言，此模块需要自行更新如果你问我！

Personally, I don't like using jQuery Update module, 1. Seems like a lot of unnecessary overhead, and 2. It only allows to update up to jQuery 1.8, which is old and personally this module needs to be updated itself if you ask me!

因此，我需要在Drupal 7的head标签中添加以下URL，然后再加载其他js文件.

So I need to add the following URLS to my head tag in Drupal 7, before any other js files get loaded.

Google CDN jQuery URL://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Google CDN jQuery URL: //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Google CDN jQuery UI URL://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

Google CDN jQuery UI URL: //ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

我尝试将其放入theme.info文件中，但是它来自CDN，所以这将无法工作，因为theme.info中的js链接到以主题为根的相对路径

I've tried putting this into the theme.info file, but it is coming from a CDN, so this won't work, since the js in theme.info links to a relative path there where the theme is the root.

那么，在正常情况下，在Drupal 7中如何将其添加到head标记之前的其他脚本中?

So, how do I add this into the head tag before any of the other scripts under normal conditions in Drupal 7?

我进行了建议的编辑，由于某种原因，不再为该主题加载CSS文件.我在这里使用媒体响应主题:主题

I have made the recommended edits and for some reason the CSS file is no longer loading for that theme. I am using the media responsive theme here: https://drupal.org/project/media-responsive-theme

这是我的theme.php文件的样子:

Here is what my theme.php file looks like:

<?php
/**
 * Implements hook_html_head_alter().
 * This will overwrite the default meta character type tag with HTML5 version.
 */
function media_responsive_theme_html_head_alter(&$head_elements) {
  $head_elements['system_meta_content_type']['#attributes'] = array(
    'charset' => 'utf-8'
  );
}

/**
 * Insert themed breadcrumb page navigation at top of the node content.
 */
function media_responsive_theme_breadcrumb($variables) {
  $breadcrumb = $variables['breadcrumb'];
  if (!empty($breadcrumb)) {
    // Use CSS to hide titile .element-invisible.
    $output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';
    // comment below line to hide current page to breadcrumb
    $breadcrumb[] = drupal_get_title();
    $output .= '<nav class="breadcrumb">' . implode(' » ', $breadcrumb) . '</nav>';
    return $output;
  }
}

/**
 * Override or insert variables into the page template.
 */
function media_responsive_theme_preprocess_page(&$vars) {

    $html5jqueryui = array(
        '#tag' => 'script',
        '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
        ),
        '#prefix' => '',
        '#suffix' => '',
    );

    drupal_add_html_head($html5jqueryui, 'html5jqueryui');

    $html5jquery = array(
        '#tag' => 'script',
        '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
        ),
        '#prefix' => '',
        '#suffix' => '',
    );

    drupal_add_html_head($html5jquery, 'html5jquery');


  if (isset($vars['main_menu'])) {
    $vars['main_menu'] = theme('links__system_main_menu', array(
      'links' => $vars['main_menu'],
      'attributes' => array(
        'class' => array('links', 'main-menu', 'clearfix'),
      ),
      'heading' => array(
        'text' => t('Main menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      )
    ));
  }
  else {
    $vars['main_menu'] = FALSE;
  }
  if (isset($vars['secondary_menu'])) {
    $vars['secondary_menu'] = theme('links__system_secondary_menu', array(
      'links' => $vars['secondary_menu'],
      'attributes' => array(
        'class' => array('links', 'secondary-menu', 'clearfix'),
      ),
      'heading' => array(
        'text' => t('Secondary menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      )
    ));
  }
  else {
    $vars['secondary_menu'] = FALSE;
  }
}

function media_responsive_theme_js_alter(&$js) {
    // var_dump($js);
    unset($js['misc/jquery.once.js']);
    unset($js['misc/jquery.js']);
    unset($js['misc/ui/jquery.ui.core.min.js']);
}

/**
 * Duplicate of theme_menu_local_tasks() but adds clearfix to tabs.
 */
function media_responsive_theme_menu_local_tasks(&$variables) {
  $output = '';

  if (!empty($variables['primary'])) {
    $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>';
    $variables['primary']['#prefix'] .= '<ul class="tabs primary clearfix">';
    $variables['primary']['#suffix'] = '</ul>';
    $output .= drupal_render($variables['primary']);
  }
  if (!empty($variables['secondary'])) {
    $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>';
    $variables['secondary']['#prefix'] .= '<ul class="tabs secondary clearfix">';
    $variables['secondary']['#suffix'] = '</ul>';
    $output .= drupal_render($variables['secondary']);
  }
  return $output;
}

/**
 * Override or insert variables into the node template.
 */
function media_responsive_theme_preprocess_node(&$variables) {
  $node = $variables['node'];
  if ($variables['view_mode'] == 'full' && node_is_page($variables['node'])) {
    $variables['classes_array'][] = 'node-full';
  }
}

function media_responsive_theme_page_alter($page) {
  // <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  $viewport = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
    'name' =>  'viewport',
    'content' =>  'width=device-width'
    )
  );
  drupal_add_html_head($viewport, 'viewport');
}

在页面顶部的实际来源中，现在看起来像这样:

In the actual source for the head of the page, it looks like this now:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<link rel="shortcut icon" href="http://localhost:8082/sites/all/themes/media-responsive-theme/favicon.ico" type="image/vnd.microsoft.icon" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" />
<meta name="viewport" content="width=device-width" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<link rel="alternate" type="application/rss+xml" title="site RSS" href="http://localhost:8082/rss.xml" />
<title>Testing Site | Just a test site</title>
<style type="text/css" media="all">@import url("http://localhost:8082/modules/system/system.base.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.menus.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.messages.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.theme.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/modules/comment/comment.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_api/date.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_popup/themes/datepicker.1.7.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_repeat_field/date_repeat_field.css?myw3hn");
@import url("http://localhost:8082/modules/field/theme/field.css?myw3hn");
@import url("http://localhost:8082/modules/node/node.css?myw3hn");
@import url("http://localhost:8082/modules/search/search.css?myw3hn");
@import url("http://localhost:8082/modules/user/user.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_example/css/views_slideshow_xtra_example.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_overlay/css/views_slideshow_xtra_overlay.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views/css/views.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/all/modules/admin_menu_dropdown/admin_menu_dropdown.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/ckeditor/ckeditor.css?myw3hn");
@import url("http://localhost:8082/profiles/acquia/modules/ctools/css/ctools.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/jquery.fancybox.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-thumbs.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-buttons.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/all/themes/media-responsive-theme/style.css?myw3hn");
@import url("http://localhost:8082/sites/all/themes/media-responsive-theme/media.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/default/files/fontyourface/font.css?myw3hn");</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alegreya:900&amp;subset=latin" media="all" />
<script type="text/javascript" src="http://localhost:8082/misc/drupal.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_overlay/js/views_slideshow_xtra_overlay.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb_connect.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb_stream.js?myw3hn"></script>
<script type="text/javascript" defer="defer" src="http://localhost:8082/sites/all/modules/admin_menu_dropdown/admin_menu_dropdown.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fancybox/fancybox.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/jquery.fancybox.pack.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/lib/jquery.mousewheel-3.0.6.pack.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-thumbs.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-media.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-buttons.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/masonry/jquery.masonry.min.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/masonry/masonry.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/google_analytics/googleanalytics.js?myw3hn"></script>
<script type="text/javascript" src="//use.edgefonts.net/alegreya:n7.js"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/themes/media-responsive-theme/js/custom.js?myw3hn"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"media_responsive_theme","theme_token":"GE9M-bDBXcKzDxK1W8lZM9a-OjlA00XIZ6zA3sYZHCw","js":{"misc\/drupal.js":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_overlay\/js\/views_slideshow_xtra_overlay.js":1,"sites\/all\/modules\/fb\/fb.js":1,"sites\/all\/modules\/fb\/fb_connect.js":1,"sites\/all\/modules\/fb\/fb_stream.js":1,"sites\/all\/modules\/admin_menu_dropdown\/admin_menu_dropdown.js":1,"sites\/all\/modules\/fancybox\/fancybox.js":1,"sites\/all\/libraries\/fancybox\/source\/jquery.fancybox.pack.js":1,"sites\/all\/libraries\/fancybox\/lib\/jquery.mousewheel-3.0.6.pack.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-thumbs.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-media.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-buttons.js":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra.js":1,"sites\/all\/libraries\/masonry\/jquery.masonry.min.js":1,"sites\/all\/modules\/masonry\/masonry.js":1,"sites\/all\/modules\/google_analytics\/googleanalytics.js":1,"0":1,"\/\/use.edgefonts.net\/alegreya:n7.js":1,"sites\/all\/themes\/media-responsive-theme\/js\/custom.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"sites\/all\/modules\/date\/date_api\/date.css":1,"sites\/all\/modules\/date\/date_popup\/themes\/datepicker.1.7.css":1,"sites\/all\/modules\/date\/date_repeat_field\/date_repeat_field.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_example\/css\/views_slideshow_xtra_example.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_overlay\/css\/views_slideshow_xtra_overlay.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/admin_menu_dropdown\/admin_menu_dropdown.css":1,"sites\/all\/modules\/ckeditor\/ckeditor.css":1,"profiles\/acquia\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/libraries\/fancybox\/source\/jquery.fancybox.css":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-thumbs.css":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-buttons.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra.css":1,"sites\/all\/themes\/media-responsive-theme\/style.css":1,"sites\/all\/themes\/media-responsive-theme\/media.css":1,"sites\/default\/files\/fontyourface\/font.css":1,"http:\/\/fonts.googleapis.com\/css?family=Alegreya:900\u0026subset=latin":1}},"fb_connect":{"front_url":"\/","fbu":null,"uid":0},"fb_devel":{"session_id":"T4ElbmGjm-bpoAuSJrtnz6i9T7QvI7ukMr8LT2ZY49Q","session_name":"SESSbce8863eabfd478fab0d5a5077b9e512"},"admin_menu_dropdown":{"key":"`","default":0},"fancybox":{"helpers":{"thumbs":{"width":50,"height":50,"position":"bottom"},"media":[],"buttons":{"position":"top"}}},"masonry":{".view-packages.view-display-id-block .view-content":{"item_selector":".masonry-item","column_width":290,"column_width_units":"px","gutter_width":10,"resizable":true,"animated":true,"animation_duration":500,"fit_width":true,"rtl":false,"images_first":true}},"googleanalytics":{"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip"}});
//--><!]]>
</script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

我认为可能是调用jquery的时间太早，或者$ js中还有其他变量需要设置吗?

I think maybe the jquery is being called too early, or there are other variables to unset within $js?

当我在Chrome中查看错误时填充的JS错误列表如下:

The list of JS errors that populates when I view errors in Chrome is as follows:

Uncaught ReferenceError: Drupal is not defined views_slideshow_xtra_overlay.js:6
Uncaught ReferenceError: Drupal is not defined fb.js?myw3hn:25
Uncaught ReferenceError: Drupal is not defined fb_connect.js:17
Uncaught ReferenceError: Drupal is not defined fancybox.js:7
Uncaught ReferenceError: Drupal is not defined views_slideshow_xtra.js:6
Uncaught ReferenceError: Drupal is not defined masonry.js:8
Uncaught ReferenceError: Drupal is not defined localhost/:1372
Uncaught ReferenceError: Drupal is not defined localhost/:1535
Uncaught ReferenceError: Drupal is not defined admin_menu_dropdown.js:3

基本上，未定义Drupal".如何定义?

Basically, "Drupal is not defined". How to define it?

推荐答案

Add the following function in your theme template.php file.

function YOURTHEMENAME_preprocess_html(&$vars) {

   $html5jquery = array(
      '#tag' => 'script',
      '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
      ),
      '#prefix' => '',
      '#suffix' => '',
      );
   drupal_add_html_head($html5jquery, 'html5jquery');

   $html5jqueryui = array(
      '#tag' => 'script',
      '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
      ),
      '#prefix' => '',
      '#suffix' => '',
      );
   drupal_add_html_head($html5jqueryui, 'html5jqueryui');



}

这篇关于Drupal-如何将简单的jQuery和jQuery UI添加到head标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-26 07:42
Powered by LMLPHP ©2024 如何将简单的jQuery和jQuery 0.033660