3

学校の古いウェブサイトを作り直しています。私は忙しいので、css と html のすべての混乱を気にしないでください。また、私はJavaScriptの専門家ではないので...

さて、私の問題です。

ウェブサイトでは、イベントなどに Google カレンダーを使用しています。ホームページには、今後のイベントに関する小さなサイドバーがあります。これを 1 日おきに変更するつもりはないので、今後のイベントをカレンダーから直接取得するこの 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');
    });
});

また、ここで 2 つのことに気付くでしょう。まず、コードをjQuery ready functionに入れたことです。jQuery 関連のすべてのコードは、常にready 関数に配置する必要があります。.link第二に、代わりにを使用しました#link。ID はドキュメント内で 1 回だけ使用する必要があります。ID を複数回使用する必要がある場合は、代わりにクラスを使用してください。

于 2012-11-17T12:45:47.927 に答える