Clever Geek Handbook

他のサイトでのjQueryグッズの統合

ユーザー生成コンテンツを含む小さなプロジェクトがあります。 タスクは、ユーザーのブログやサイトに統合するためのユーザーのページへのリンクを含むボタンコードを作成することでした。 しかし、ほとんどの競合他社のように、退屈なボタンをすることは望んでいませんでした。 単純なボタンとリンクとともに、ajaxとアニメーションを使用して、jQuery-evskyに何か特別なことをしたかったのです:)。



ポイントは簡単です。ユーザーは、ボタンを動的に挿入するスクリプトを自分のWebサイトに配置します。 ボタンをクリックすると、ウィンドウがポップアップし、リソースからロードされたユーザーページが表示されます。



問題は明らかです。

  1. ユーザーのサイトでjQueryと必要なプラグインが使用されているかどうかを判断する必要があります。 そうでない場合は、両方を動的にロードします。 サイトでjQueryを使用している人と使用していない人に別々のコードを使用します-どんな状況でもロードは言うまでもありません（特にプラグインではグリッチが発生する可能性があります）。

  2. 押されたjQueryの重量は約60 kBであり、スワップの場合、コードを実行する前に完全にロードして初期化する時間がありません。



グッズには、fancyboxプラグインを使用しました。 ライトボックス効果のある写真だけでなく、iframeの他のコンテンツも表示できます。



以下はコードです。



ユーザーがサイトに挿入するコードは次のようになります。

  1. < script type = 'text/javascript' > var ExtendVar='ExtendVar'; < / script > < script type = 'text/javascript' src = 'http://MySite.ru/js/script.js' >< / script >



  2. < script type = 'text/javascript' > var ExtendVar='ExtendVar'; < / script > < script type = 'text/javascript' src = 'http://MySite.ru/js/script.js' >< / script >





script.jsでは、次のように記述します。

  1. 新しい MyClass （ ExtendVar ） ;
  4. 関数 MyClass （ ExtendVar ） {
  5. これ 。 ExtendVar = ExtendVar ;
  7. if （ this。ExtendVar ） {
  9. ドキュメント。 write （ "<a class = 'iframe fancy' href = 'http：//MySite.ru/" + this。ExtendVar + "' title = 'MySite.ru /" + this。ExtendVar + "' target = '_ blank' > <img src = 'http：//MySite.ru/img/dezign/MyButton.png' style = 'border：0 none; position：relative;' alt = 'MySite.ru' /> </a> " ） ; //ボタンを挿入します
  11. //このサイトでjQueryが使用されているかどうかを確認します
  12. if （ typeof （ jQuery ） == 'undefined' ） { //そうでない場合は、接続する
  13. var JQ =ドキュメント。 createElement （ 'script' ） ;
  14. Jq。 src = 'http://MySite.ru/js/jquery.js' ;
  15. Jq。 type = 'text / javascript' ;
  16. ドキュメント。 getElementsByTagName （ 'head' ） [ 0 ] appendChild （ JQ ） ;
  17. }
  19. waitJQ （ ） ; // jQueryのロードと初期化を期待します
  20. } ;
  23. 関数 waitJQ （ ） {
  24. if （ typeof （ jQuery ） == 'undefined' ） {
  25. ウィンドウ。 setTimeout （ waitJQ 、 100 ） ; // jQueryがロードされるまで100ミリ秒ごとに再帰
  26. }
  27. その他 {
  28. // jQueryを正常に決定した後、必要なプラグインがこのサイト（この場合はfancybox）で使用されているかどうかを確認します
  29. if （ typeof （ jQuery。fn。fancybox ） == 'undefined' ） { //そうでない場合は、接続する
  30. jQuery （ "head" ） 。 append （ "<script type = 'text / javascript' src = 'http：//MySite.ru/js/fancybox.js'> </ script> <link rel = 'stylesheet' href = 'http：// MySite。 com / css / fancybox.css 'type =' text / css 'media =' screen '/> " ） ;
  31. }
  33. waitFB （ ） ; // fancyboxプラグインのロードと初期化を待機しています
  34. }
  35. }
  38. 関数 waitFB （ ） {
  39. if （ typeof （ jQuery。fn。fancybox ） == 'undefined' ） {
  40. ウィンドウ。 setTimeout （ waitFB 、 100 ） ; // fancyboxがロードされるまで100ミリ秒ごとに再帰
  41. }
  42. その他 {
  43. jQuery （ 'a.fancy' ） 。 fancybox （ { frameHeight ： 190 、 frameWidth ： 350 } ） ; //実際に効果を初期化します
  44. }
  45. }
  46. }


例はサイトMoiaVizitka.ruで見ることができます。 誰もが便利になれば、嬉しいです。


More articles:


All Articles