Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Destaque
Semelhante a Jetpack Workshop
Semelhante a Jetpack Workshop (20)
Último
Último (9)
Jetpack Workshop
- 1. Jetpack ワークショップ 2009/12/06 mollifier http://d.hatena.ne.jp/mollifier/
- 3. Jetpack とは Jetpack Feature の例 Jetpack Feature の 作り方 参考ページ
- 4. Jetpack とは Jetpack Feature の例 Jetpack Feature の 作り方 参考ページ
- 8. 特徴
- 11. ステータスバーに ボタンを追加 右クリックメニューに 追加
- 12. Jetpack とは Jetpack Feature の例 Jetpack Feature の 作り方 参考ページ
- 19. 拡大鏡
- 22. Jetpack とは Jetpack Feature の例 Jetpack Feature の 作り方 参考ページ
- 23. サンプルコードを 4つ紹介
- 24. 1. Hello World!
- 25. jetpack.tabs.onReady(function() { jetpack.notifications.show( "Hello Jetpack!"); });
- 26. jetpack.tabs.onReady( コールバック関数 ); この形で、ページを開い たときにコールバック関 数が呼ばれる
- 28. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <!-- ここが大事 --> <link rel="jetpack" href="hello.js" name="Hello Jetpack" /> <title>Hello Jetpack install page</title> </head> <body> <h1>Hello Jetpack install page</h1> </body> </html>
- 29. 2. Hello Jetpack in Statusbar
- 31. jetpack.statusBar.append({ html: "Hello", width: 45, onReady: function(widget){ $(widget).click(function() { jetpack.notifications.show( "Hello Jetpack!"); }); } });
- 32. onReady: function(widget){ $(widget).click(function() { // 何か処理 }); } onReady : 新しいパネルが作られた 際のコールバック widget : パネル要素 $ : jQuery の $
- 35. jetpack.tabs.onReady(function(doc) { if (doc.defaultView.frameElement) { return; } if (doc.location.href.search( /^http://d.hatena.ne.jp//) !== -1) { $(doc).find("a.keyword"). each(function() { $(this).replaceWith($(this).html()); }); } });
- 36. ポイント 1
- 37. jetpack.tabs.onReady(function(doc) { if (doc.defaultView.frameElement) { // frame または iframe の場合 return; } }); frame, iframe を ロードした時も コールバックが呼び出される
- 38. ポイント 2
- 39. jetpack.tabs.onReady(function(doc) { // doc が読み込んだページの // document オブジェクト $(doc).find("a.keyword"). // 略 ... }); document でドキュメントオブ ジェクトが参照できない。 なので、$(cssセレクタ) とい う書き方は不可。
- 40. 4. Info
- 41. Ajaxの例
- 42. jetpack.statusBar.append({ html: "<button>info</button>", width: 60, onReady: function(widget) { $(widget).click(function() { var word = jetpack.tabs.focused. contentWindow.getSelection(); $.get("http://www.google.co.jp/search", {q: word}, function(data) { var info = $(data, widget). find("#resultStats").text(); jetpack.tabs.focused.contentWindow. alert(info); }); }); } });
- 43. ポイント 1
- 44. onReady: function(widget) { // 略 ... $.get( "http://www.google.co.jp/search", {q: word}, function(data) { var info = $(data, widget). find("#resultStats").text(); コンテキストを指定する 必要がある。 $(data) ではうまくいかない。
- 45. ポイント 2
- 46. Firefox は タブブラウザ
- 48. 今表示しているタブ の Window オブジェ クト jetpack.tabs.focused. contentWindow
- 50. 今表示しているタブ の Document オブ ジェクト jetpack.tabs.focused. contentDocument
- 51. Jetpack とは Jetpack Feature の例 Jetpack Feature の 作り方 参考ページ
- 52. 英語ページ
- 53. Jetpack Gallery Jetpack Feature がいっ ぱいある http://jetpackgallery.mozill alabs.com/ リンク
- 58. 日本語ページ
- 64. 30分で作るJetpack Feature (1) 概要 CommentsAdd Star http://d.hatena.ne.jp/lesamo ureuses/20090715/1247637734 リンク
- 68. これを参考にして 作ってみよう
- 69. ありがとう ございました