3

我正在为我的学校重新制作旧网站。请不要介意所有的 css 和 html 混乱，因为我正忙着这样做。另外，我不是javascript专家，所以...

现在，对于我的问题。

该网站使用谷歌日历来记录他们的活动等。在主页上，有一个带有即将发生的活动的小边栏。我不打算每隔一天更改一次，所以我遇到了这个 jQuery 的东西，它直接从日历中提取即将发生的事件。这是在我的页面上加载的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.sint-jozefscollege.be/gallery3/minislideshow/js/jquery.minislideshow.4.0.min.js"></script>
<script src="/jquery.gcal_flow.js"></script>
<script src="/jquery.popupWindow.js"></script>

这是它的外观：

          <div id="gcf-custom-template">
      <div class="gcf-header-block" style=" font-family: verdana; font-size: x-large;">
        <div class="gcf-title-block">
          <a href="/schoolkalender">Agenda</a>
        </div>
      </div>
      <div class="gcf-item-container-block" style=" font-size: 12px; margin-top: 8px;">
        <div class="gcf-item-block">
          <div class="gcf-item-header-block" style=" font-size: 14px; margin-top: 8px;">
<div class="gcf-item-title-block">
              <a class="gcf-item-link"><span class="gcf-item-daterange">00/00</span></a>
              <strong class="gcf-item-title" style=" float: right; width: 150px;">Item Title of Your event
</strong>
            <div style="display: block; clear: both;"></div>
</div>
          </div>
        </div>
      </div>
    </div>

有了上面的东西，这个脚本就来了：

<script type="text/javascript">
  $('#gcf-custom-template').gCalFlow({
  calid: 'jb1p8523dur2d9qtrf0d2demcg%40group.calendar.google.com',
  maxitem: 4,
  mode: 'upcoming',
  daterange_formatter: function (start_date, allday_p) {
  function pad(n) { return n < 10 ? "0"+n : n; }
  return pad(start_date.getDate() + "/" + pad(start_date.getMonth()+1)) + ":";
  }
   });
</script>

现在，我正在尝试让“您的活动的项目名称”中生成的链接在新选项卡中打开。我尝试使用这个脚本：

<script type="text/javascript"> 
 $('#link').popupWindow({ 
   height:500, 
   width:800, 
   top:50, 
   left:50 
  }); 
</script>

我修改了 jquery.gcal_flow.js 文件以将 'id="link"' 添加到链接中，但它不起作用。如果我尝试使用未生成的另一个链接，它就可以正常工作。

欢迎任何帮助！PS：包含所有内容的页面：http ://www.sint-jozefscollege.be/calendar1.html

编辑：实施的解决方案可在http://www.sint-jozefscollege.be

4

1 回答 1

1

我会说你的问题是当你的脚本绑定 popupWindows 时没有生成链接。因此，该事件永远不会受到约束。该插件似乎不支持委托事件，但您始终可以手动创建弹出窗口，使用.on().

$(function() {
    $('body').on('click', '.link', function(e) {
        e.preventDefault();
        new_window = window.open($(this).attr('href'),'','height=500,width=800');
    });
});

您还会在这里注意到两件事。首先，是我把代码放在了jQuery 就绪函数中。您应该始终将所有与 jQuery 相关的代码放在 ready 函数中。其次，我使用.link而不是#link. ID 只能在文档中使用一次，如果需要多次使用，请改用类。

于 2012-11-17T12:45:47.927 回答