diff options
Diffstat (limited to 'files/ja/jetpack/ui')
-rw-r--r-- | files/ja/jetpack/ui/index.html | 45 | ||||
-rw-r--r-- | files/ja/jetpack/ui/selection/index.html | 62 | ||||
-rw-r--r-- | files/ja/jetpack/ui/slidebar/index.html | 24 | ||||
-rw-r--r-- | files/ja/jetpack/ui/tabs/index.html | 18 |
4 files changed, 149 insertions, 0 deletions
diff --git a/files/ja/jetpack/ui/index.html b/files/ja/jetpack/ui/index.html new file mode 100644 index 0000000000..9e1e13da30 --- /dev/null +++ b/files/ja/jetpack/ui/index.html @@ -0,0 +1,45 @@ +--- +title: UI +slug: Jetpack/UI +translation_of: Archive/Mozilla/Jetpack/UI +--- +<div class="note"> + <strong>Note:</strong> <span class="author-g-abp0twjvvqmqlouk">This page documents the Jetpack Prototype, which is no longer under active development. Read the <a class="link-https" href="https://jetpack.mozillalabs.com/prototype.html" rel="external nofollow" title="https://jetpack.mozillalabs.com/prototype.html">experiment report</a> </span><span class="author-g-abp0twjvvqmqlouk">for what we learned from it and the <a class="external" href="http://mozillalabs.com/jetpack/2010/03/09/announcing-the-jetpack-sdk/" rel="external nofollow" title="http://mozillalabs.com/jetpack/2010/03/09/announcing-the-jetpack-sdk/">blog post announcing the first SDK release</a> fo</span><span class="author-g-abp0twjvvqmqlouk">r what we're up to next!</span></div> +<dl> + <dt> + <a href="/ja/docs/Jetpack/UI/Menu" title="Jetpack/UI/Menu">Menu</a></dt> + <dd> + ブラウザのメニューへのアクセス、メニューの作成と変更について</dd> + <dt> + <a href="/ja/docs/Jetpack/UI/Slidebar" title="Jetpack/UI/Slidebar">Slidebar</a></dt> + <dd> + 画面左からスライドして出てくるサイトバーのような領域にコンテンツを表示できます</dd> + <dt> + <a href="/ja/docs/Jetpack/UI/Toolbar" title="Jetpack/UI/Toolbar"><span style="text-decoration: underline;">Toolbar</span></a></dt> + <dd> + ツールバーの中に要素を追加したり、要素にアクセスする</dd> + <dt> + <a href="/ja/docs/Jetpack/UI/Panel" title="Jetpack/UI/Panel">Panel</a></dt> + <dd> + 配置、サイズ、スタイルを自由に指定可能な コンテンツ領域を作れます</dd> + <dt> + <a href="/ja/docs/Jetpack/UI/Tabs" title="Jetpack/UI/Tabs">Tabs</a></dt> + <dd> + ブラウザのタブにイベントを追加したり、タブとタブに含まれるドキュメントを操作する</dd> + <dt> + <a href="/ja/docs/Jetpack/UI/Statusbar" title="Jetpack/UI/Statusbar">Statusbar</a></dt> + <dd> + 低レベルの関数とそれらの呼び出し</dd> + <dt> + <a href="/ja/docs/Jetpack/UI/Notifications" title="Jetpack/UI/Notifications">Notifications</a></dt> + <dd> + UIの機構を利用してユーザに警告を表示する</dd> + <dt> + <a href="/ja/docs/Jetpack/UI/Selection" title="Jetpack/UI/Selection">Selection</a></dt> + <dd> + ユーザが選んだものを操作する</dd> + <dt> + <a href="/ja/docs/Jetpack/UI/Window" title="Jetpack/UI/Window">Window</a></dt> + <dd> + 異なるブラウザのウィンドウ間のインタラクションを楽に行う</dd> +</dl> diff --git a/files/ja/jetpack/ui/selection/index.html b/files/ja/jetpack/ui/selection/index.html new file mode 100644 index 0000000000..346679a8a6 --- /dev/null +++ b/files/ja/jetpack/ui/selection/index.html @@ -0,0 +1,62 @@ +--- +title: Selection +slug: Jetpack/UI/Selection +translation_of: Archive/Mozilla/Jetpack/UI/Selection +--- +<h3 class="editable" id="About"><span><span class="mw-headline">About</span></span></h3> +<div class="editIcon"> + <a href="/en/Jetpack/UI/Selection#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> +<ul> + <li><strong><span class="author-p-3041">Status</span></strong><span class="author-p-3041">: 開発中</span></li> + <li><strong><span class="author-p-3041">Instantiation</span></strong><span class="author-p-3041">: </span><code>jetpack.future.import('selection')</code></li> + <li><strong>Last Update</strong>: v0.6</li> + <li><strong>Summary</strong>: selectionは基本的なユーザインタラクションです。Jetpackはユーザによるselectionを探すための標準メソッドを提供しています。 Jetpackのselectionの実装を使用することで、selection イベントの設定、取得をすることが可能となります。</li> +</ul> +<div id="section_2"> + <h3 class="editable" id="selectionの設定と取得"><span><span class="mw-headline">selectionの設定と取得</span></span></h3> + <br> + <div class="editIcon"> + <a href="/en/Jetpack/UI/Selection#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p><code>jetpack.selection</code> の現在のバージョンは <code>.text</code>、<span style="font-family: monospace;">と</span><code> .html</code>のフォーマットを含みます。</p> + <p><strong>selectionの取得</strong></p> + <div style="width: 60%;"> + <pre class="brush: js"><span class="content"><span class="block" style="margin-left: 0px ! important;"><code class="keyword">var</code> <code class="plain">textOfSel = jetpack.selection.text;</code></span></span> +<span class="content"><span class="block" style="margin-left: 0px ! important;"><code class="keyword">var</code> <code class="plain">htmlOfSel = jetpack.selection.html;</code></span></span> +</pre> + </div> + <pre class="js" style="display: none;">var textOfSel = jetpack.selection.text; +var htmlOfSel = jetpack.selection.html;</pre> +</div> +<p><strong>selectionの設定</strong></p> +<div style="width: 60%;"> + <pre class="brush: js">jetpack.selection.text = 'Hello'; +jetpack.selection.html = '<b>Hello</b>'; +</pre> +</div> +<pre class="js" style="display: none;">jetpack.selection.text = 'Hello'; +jetpack.selection.html = '<b>Hello</b>';</pre> +<div id="section_3"> + <h3 class="editable" id="onSelection"><span><span class="mw-headline">onSelection </span></span></h3> + <div class="editIcon"> + <a href="/en/Jetpack/UI/Selection#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p>onSelection メソッドを使用することでselectionが行われたときに、イベント関数を実行することができます。</p> + <p><strong>Selectionイベントの追加</strong>:</p> + <pre class="brush: js"><span class="content"><span class="block" style="margin-left: 0px ! important;"><code class="plain">jetpack.selection.onSelection( fn )<span style='font-family: "Courier New","Andale Mono",monospace;'>;</span></code></span></span> +</pre> + <p style="margin-left: 80px;"><em>Argumants</em><br> + <em><strong>fn</strong></em>: selectionが行われるときに実行される関数。関数は引数を受け取りません。 引数の代わりに <code>jetpack.selection.* を使用してください。</code></p> + <p><code><span id="1256762297356E" style="display: none;"> </span></code><strong>Selection イベントの除去</strong>:</p> + <div class="lines"> + <pre class="brush: js"><span class="content"><span class="block" style="margin-left: 0px ! important;"><code class="plain">jetpack.selection.onSelection.unbind( fn );</code></span></span></pre> + </div> + <p style="margin-left: 80px;"><em>Arguments</em><br> + <em><strong>fn</strong></em>: 開放したい関数のリファレンス。A reference to a specific function you would like to unbind.</p> + <p><strong>詳細な例:</strong></p> + <div class="lines"> + <pre class="brush: js"><span class="content"><span class="block" style="margin-left: 0px ! important;"><code class="plain">jetpack.selection.onSelection(</code><code class="keyword">function</code><code class="plain">(){</code></span></span> +<span class="content"><code class="spaces"> </code><span class="block" style="margin-left: 14px ! important;"><code class="keyword">var</code> <code class="plain">html = jetpack.selection.html;</code></span></span> +<span class="content"><code class="spaces"> </code><span class="block" style="margin-left: 14px ! important;"><code class="plain">jetpack.selection.html = </code><code class="string">">>>"</code> <code class="plain">+ html + </code><code class="string">"<<<"</code><code class="plain">;</code></span></span> +<span class="content"><span class="block" style="margin-left: 0px ! important;"><code class="plain">});</code></span></span></pre> + </div> +</div> +<p> </p> diff --git a/files/ja/jetpack/ui/slidebar/index.html b/files/ja/jetpack/ui/slidebar/index.html new file mode 100644 index 0000000000..24fb7def9e --- /dev/null +++ b/files/ja/jetpack/ui/slidebar/index.html @@ -0,0 +1,24 @@ +--- +title: Slidebar +slug: Jetpack/UI/Slidebar +--- +<h3 id="About"><span>About</span></h3> +<ul> <li><strong><span>Status</span></strong><span>: In Development</span></li> <li><strong><span>Instantiation</span></strong><span>: </span><code>jetpack.future.import('slideBar') </code></li> <li><strong>Last Update</strong>: v0.6</li> <li><strong>Summary</strong>: slideBarはブラウザの古いスライドバー機能の再開発です。 slideBarはブラウザウィンドウの横にあり、一時的な情報と永続的な情報の両方を広い範囲に早くアクセスすることが可能となります。 slideBar機能を選択すると、そのコンテンツは現在のWEBページの後方から現れます。</li> +</ul> +<h3 id="新しいslideBar_インスタンスの作成と関連するオプション"><span>新しいslideBar インスタンスの作成と関連するオプション<br> +</span></h3> +<pre class="brush: js"><span><span>jetpack.slideBar.append( options ); </span></span></pre> +<pre style="" class="js">jetpack.selection.onSelection( fn );</pre> +<p style="margin-left: 80px;"><em>引数</em><br> +<em><strong>options</strong></em>: あなたのslideBarインスタンスに特定の修正を加えたオブジェクト。</p> +<p style="margin-left: 120px;">{<br> +<code> icon</code> <em>- uri</em> - SlideBar内で見せるアイコンのhref<br> +<code> html -</code> <em>text/xml</em> - 機能のためのhtml コンテンツ<br> +<code> url</code> <em>- uri</em> - コンテンツをロードするためのurl<br> +<code> width - </code><em>num</em> - コンテンツエリアと選択したスライドサイズの横幅<br> +<code> persist</code> - <em>bool</em> - 選択された時のデフォルトのslideの動作<br> +<code> autoReload -</code> <em>bool</em> - 選択された時にコンテンツを自動的にリロードするか<br> +<code> onClick</code> - <em>func</em> - アイコンがクリックされた時のcallback関数<br> +<code> onSelect</code> - <em>func</em> - 機能が選択された時のcallback関数<br> +<code> onReady</code> - <em>func</em> - 機能がロードされた時のcallback関数<br> +}</p> diff --git a/files/ja/jetpack/ui/tabs/index.html b/files/ja/jetpack/ui/tabs/index.html new file mode 100644 index 0000000000..e6fb3c0138 --- /dev/null +++ b/files/ja/jetpack/ui/tabs/index.html @@ -0,0 +1,18 @@ +--- +title: Tabs +slug: Jetpack/UI/Tabs +translation_of: Archive/Mozilla/Jetpack/UI/Tabs +--- +<h3 id="新しいタブを開く">新しいタブを開く</h3> +<p> </p> +<p>新しいタブを開くのは簡単で、単に<code>jetpack.tabs</code>の<code>open</code>メソッドをURLを含む文字列と一緒に呼ぶだけです。</p> +<pre class="prettyprint"><code><span class="pun">jetpack.tabs.open("http://www.mynewtab.com");</span></code></pre> +<h3 id="タブのドキュメントとウィンドウオブジェクトにアクセスする">タブのドキュメントとウィンドウオブジェクトにアクセスする</h3> +<p> </p> +<p><code>contentDocument</code>と<code>contentWindow</code>オブジェクトはドキュメントとウィンドウを表すオブジェクトです。これらは現在表示中のタブのプロパティとしてアクセスすることができます。</p> +<p>タブの<code>contentWindow</code>の中にあるjavascriptのオブジェクトに直接アクセスできないという事に気をつけて下さい。これにアクセスする場合は必ず、 <code>jetpack.tabs.focused.contentWindow</code>.<code>wrappedJSObject</code>オブジェクトを通してアクセスして下さい.</p> +<pre class="prettyprint"><code><span class="pun">var doc = jetpack.tabs.focused.contentDocument; /*Focused tab's equivalent Document object*/ </span></code> +<code><span class="pun">var win = jetpack.tabs.focused.contentWindow; /*Focused tab's equivalent Window object*/</span></code> +<code><span class="pun">var tabJsUniverse = jetpack.tabs.focused.contentWindow.wrappedJSObject; /*Tab's js object*/</span></code> +</pre> +<p><a href="/ja/Jetpack/基礎" title="ja/Jetpack/基礎">基礎</a> に詳しい情報があります.</p> |