drupal模块使用javascript自定义块内容

时间:2013-02-10 23:38:53

标签: javascript drupal-6

我正在使用以下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中改变一些东西.. 救命啊!

1 个答案:

答案 0 :(得分:0)

我会使用一些主题函数/模板,并在主题函数中使用drupal_add_cssdrupal_add_js添加自定义CSS / JS。沿着这些代码行的东西。当然,必要时调整它(如路径和东西)。我假设您将mytwitter.cssmytwitter.js文件中的CSS和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;
}