繁体   English   中英

使用JavaScript的drupal模块自定义块内容

[英]drupal module custom block content with javascript

我正在使用以下hook_block开发自定义模块:

<?php
 function mytwitter_block($op = 'list', $delta = 0, $edit = array()) {
 switch ($op) {
 case 'list':
 $blocks['hashtag_search'] = array(
    'info' => t('Hashtag Search'),
    'cache'=> BLOCK_CACHE_GLOBAL
);
$blocks['eclap_timeline'] = array(
    'info' => t('Timeline @UserTwitter')
);
return $blocks;

case 'configure':

case 'save':

return _mytwitter_block_settings_save($delta, $edit);

case 'view':
default:
 switch ($delta) {
   case 'hashtag_search':             
     $block['subject'] = t('#Hashtag search');
     $block['content'] = ***##i want put here the java script##***
     break;
   case '_timeline':
     $block['subject'] = t('My Twitter user timeline');
     $block['content'] = t('andremo ad installare qui la timeline');
 }
 return $block;
 }
}
?>

我想使用以下代码javascript:

var HASHTAG = 'TEATRO'; // don't include the #
var UPDATE_INTERVAL = 1000; // how often to update the hash tag in milliseconds
var MAX_TWEETS = 5; // max number of tweets at a time. make this larger if the topic is popular
var ANIM_SPEED = 500; // speed of animation
var tweets = new Array();
var count = 0;
var tweets_per_call = 0;
var firstID = -1;

(function() {
// call the twitter api on a set interval
setInterval(function() {
    $.getJSON("http://search.twitter.com/search.json?q=%23" + HASHTAG + "&result_type=recent&rpp=5&callback=?", {}, function(data) {
        tweets_per_call = data.results.length;
        firstID = -1;
        // for each response, create a visual tweet
        $.each(data.results, handleTweets);
    });
}, UPDATE_INTERVAL);
})();

// handle the data from twitter

function handleTweets(key, data) {
tweetFound = false;

// see if tweet already exists, if so don't handle it and exit
for (var i = 0; i < tweets.length; i++) {
    if (tweets[i].tweet == data.text) {
        tweets_per_call--;
        return;
    }
}

// increase tweet counter
count++;

// if its the first tweet in a request, set it to the current counter
if (firstID == -1) {
    firstID = count;
}

// add tweet to array
tweets.push({
    id: count,
    tweet: data.text
});

// add tweet to page
addTweet(count, data);

// remove the oldest tweet if there are more than 
if (tweets.length > MAX_TWEETS) {
    $('#' + tweets[0].id).hide(ANIM_SPEED, removeTweet(tweets[0].id));
    tweets.shift();
}
 }  

 // add tweet to html


 function addTweet(id, data) {
var delayTime = ANIM_SPEED;

// set delay time for each tweet
delayTime = (id - firstID) * ANIM_SPEED;

// use jquery to add html to the page
$('#tweets').prepend("<article id='" + id + "'><table><tr><td><span class='user'>@" + data.from_user + "</span> " + data.text + "</td></tr></table></article>");

// hide the tweet so it can be animated in
$('#' + id).hide(0);

// delay the display of the tweet until the ones in front of it have finished
setTimeout(function() {
    $('#' + id).slideDown(ANIM_SPEED);
}, delayTime);

 }

 // remove a tweet

 function removeTweet(id) {
$('#' + id).remove();
 }

使用这种样式的CSS:

 html, body, #tweets
{
overflow: hidden;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
 }

#tweets
{
position: absolute;
width: 900px;
left: 50%;
margin-left: -450px;
top: 20px;
color: #FFF;
 } 

 /* each tweet box */
 article
 {
width: 300px;
height: 60px;
background-color: #222;
border-radius: 0px;
margin-bottom: 40px;    
 }

  table
{
height: 100%;
width: 100%;
 }

  td
 {
vertical-align: middle;
padding: 0px 20px 0px 20px;
  }

  /* twitter user name */
 .user
 {
font-weight: bold;
font-size: 15px;
color: #7e9137;
  }

在这种情况下,如何使用功能drupal_add_js?...我必须更改javascript中的某些内容。

我将使用一些主题函数/模板,并在主题函数中使用drupal_add_cssdrupal_add_js添加自定义CSS / JS。 这些代码行中的内容。 当然可以在必要时进行调整(例如路径和填充物)。 我以为你会把你的CSS和JS mytwitter.cssmytwitter.js文件放在同一文件夹中mytwitter.module文件。 但是请随意选择所需的任何文件夹结构。

function mytwitter_block($op = 'list', $delta = 0, $edit = array()) {
  case 'view':
  default:
    switch ($delta) {
      case 'hashtag_search':             
        $block['subject'] = t('#Hashtag search');
        // This is where we call our theme function to output some content
        // and add the CSS/JS files.
        $block['content'] = theme('mytwitter_output');
        break;
      case '_timeline':
        $block['subject'] = t('My Twitter user timeline');
        $block['content'] = t('andremo ad installare qui la timeline');
      }
  return $block;
}


/**
* Implementation of hook_theme()
*/
function mytwitter_theme() {
  // Register a theme function
  return array(
    'mytwitter_output' => array(
      'arguments' => array('some_vars' => NULL),
    ),
  );
}

/**
* Adds the module's CSS and JS files
* @file mytwitter.js is where the JS script stay.
* @file mytwitter.css is where the custom CSS is put
*/
function mytwitter_init() {
  // Adjust the path if necessary
  $module_path = drupal_get_path('module', 'mytwitter');

  // Add the JS  
  drupal_add_js($module_path . '/mytwitter.js');

  // Add the CSS
  drupal_add_css ($module_path . '/mytwitter.css');
}

/**
* The theme function where the JS files are added.
* If you need a larger, more complex HTML structure,
* use a template implementation instead.
*/
function theme_mytwitter_output($some_vars) {
  mytwitter_init();

  $output = '<p>Hello World</p>';
  return $output;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM