1ページにつき小さな広告を1つだけ表示することをお約束します。ご心配なく、このメッセージを非表示にすると、二度と表示されなくなります。
種類
Javascript
ポップアップ
要素は、表示されるポップアップコンテンツを指定できます
タイトル付き
要素は、タイトル付きのポップアップコンテンツを指定できます
HTML
要素は、ポップアップのHTMLを指定できます
となりのトトロ
入院中の母親の近くにいるために、二人の姉妹は父親と一緒に田舎に引っ越します。そして、周りの木々には魔法の精霊が住んでいることを発見します。
既存
要素は、ページに既に含まれているポップアップを表示できます
ウォッチメン
1985年の荒廃した別の世界では、コスチュームを着た自警団員の栄光の日々は政府の取り締まりによって終わりを告げましたが、覆面を着けたベテランの一人が残酷に殺害された後、殺人犯の捜査が開始されます。
ユーザー रेटिंग
Javascriptなし
ツールチップ2.2の新機能
要素は、Javascriptなしで表示できるシンプルなツールチップを指定できます
バリエーション
基本
ポップアップは、より基本的な書式設定を提供できます
幅
ポップアップは、長いコンテンツに対応するために幅を広くすることができます
Fluid
Fluidポップアップは、オフセットコンテナの全幅を占めます
1
2
3
4
サイズ
ポップアップのサイズは様々です
Flowing
Flowingポップアップは、最大幅がなく、コンテンツに合わせて流れ続けます
ベーシックプラン
2 プロジェクト、月額10ドル
ビジネスプラン
5 プロジェクト、月額20ドル
プレミアムプラン
8 プロジェクト、月額25ドル
反転
ポップアップの色を反転させることができます
使用方法
ポップアップの初期化
ポップアップは、アクティブ化要素で初期化されます
$('.activating.element') .popup() ;
既存のポップアップの使用
既存のポップアップを使用すると、ポップアップ内に複雑なHTMLを含めることができます。
ページの読み込み時にポップアップをアクティブ化要素に隣接する兄弟要素として含めると、自動的に検出されます。
ポップアップ要素をインラインで検索するように指示するには、inlineパラメータを使用して初期化します
$('.button') .popup({ inline: true }) ;
カスタムヘッダー
任意の場所にある既存のポップアップの使用
ポップアップ要素を兄弟要素として含めることができない場合は、カスタムセレクタを指定してポップアップを取得できます
$('.button') .popup({ popup: '.special.popup' }) ;
メタデータでのコンテンツの指定
タイトル、コンテンツ、HTML、オフセット、バリエーションなどの頻繁に使用される設定は、HTMLメタデータに含めることができます
Javascriptでのコンテンツの指定
$('.ui.popup') .popup({ title : 'ポップアップタイトル', content : 'こんにちは、私はポップアップです' }) ;
ビヘイビア
以下のすべてのビヘイビアは、次の構文を使用して呼び出すことができます
$('.your.element') .popup('ビヘイビア名', 引数1, 引数2) ;
| ビヘイビア | 説明 |
|---|---|
| show | ポップアップを表示します |
| hide | ポップアップを非表示にします |
| hide all | ページ上のすべての表示されているポップアップを非表示にします |
| get popup | 現在のポップアップDOM要素を返します |
| change content(html) | 現在のポップアップコンテンツを変更します |
| toggle | ポップアップの表示を切り替えます |
| is visible | ポップアップが表示されているかどうかを返します |
| is hidden | ポップアップが非表示になっているかどうかを返します |
| exists | ポップアップが作成され、ページに挿入されているかどうかを返します |
| reposition | コンテンツサイズが変更されたときにポップアップを調整します（中央揃えのポップアップにのみ必要です） |
| set position(position) | ポップアップの位置を変更します |
| destroy | ページからポップアップを削除し、すべてのイベントを削除します |
| remove popup | ページからポップアップを削除します |
例
ポップアップ境界の指定2.2の新機能
ポップアップに新しい設定boundaryが含まれるようになりました。これにより、ポップアップが別のセクションの境界を越えないように指定できます。これは、複雑なペインレイアウトで役立ちます
さらに、ポップアップはスクロールコンテキストを指定できるようになり、ウィンドウ以外のスクロールコンテナで、クリックされたポップアップがスクロール時に非表示になるようにすることができます。
$('.boundary.example .button') .popup({ boundary: '.boundary.example .segment' }) ;
通常、このポップアップはデフォルトの位置である中央上に開きますが、これではセグメントの境界を越えてしまうため、セグメント内に留まりながらポップアップを配置できる位置が見つかるまで、他の利用可能な位置を検索します
ワイドポップアップメニュー
ワイドポップアップメニューなどの複雑なコンテンツを表示する簡単な方法は、ポップアップコンテンツをページのHTMLの既存の部分として使用することです。
inline：true設定を使用すると、Semanticはアクティベーターの後に次の兄弟ui popup要素を表示するように指示します。
表示と非表示の遅延などの設定を調整し、メニューをホバー可能にすると、ドロップダウンメニューのように機能させることができます
$('.example .menu .browse') .popup({ inline : true, hoverable : true, position : '左下', delay: { show: 300, hide: 800 } }) ;
ポップアップのセレクターを指定する
ポップアップコンテンツを次の兄弟要素として含めることができない場合は、カスタムセレクターを指定して、ポップアップコンテンツをアクティベーターにリンクすることもできます。
$('.example .custom.button') .popup({ popup : $('.custom.popup'), on : 'click' }) ;
ボタンと同じレベルではありませんが、それでも見つけることができます。
トリガーイベントを指定する
ポップアップトリガーイベントを指定できます
$('.example .teal.button') .popup({ on: 'click' }) ; $('.example input') .popup({ on: 'focus' }) ;
ターゲット要素
ポップアップは、自身とは異なるターゲット要素を指定してポップアップを表示できます
$('.test.button') .popup({ position : 'right center', target : '.test.image', title : '私のお気に入りの犬', content : '私のお気に入りの犬は、他の犬と同じくらい自分自身を好きになってほしいと思っています' }) ;
インラインまたはページに相対
ポップアップは、要素の直後に挿入することも、ページのbodyに子要素として追加することもできます。
/* インラインがtrueの場合にのみポップアップのスタイルを設定します */ .example .popup { color: #FF0000; }
$('.inline.icon') .popup({ inline: true }) ;
配置
ポップアップは、要素の任意の側に配置できます。スペースがない場合は、使用する同様の代替位置が自動的に検索されます。
オフセットの指定
ポップアップの位置は、data-offset = "value"を使用してオフセットプロパティを指定することにより、手動で調整できます。
トランジション
ポップアップは、名前付きのUIトランジションを使用できます。
ホームトランジションを選択
$('.selection') .dropdown({ onChange: function(value) { $('.demo.icon') .popup({ transition: value }) .popup('toggle') ; } }) ;
ポップアップ設定ポップアップの動作を設定するための設定
| 設定 | デフォルト | 説明 |
|---|---|---|
| popup | false | ポップアップとして使用する必要があるDOM要素を指定できます。これは、事前にフォーマットされたポップアップを含める場合に役立ちます。 |
| exclusive | false | このポップアップを開いたときに、他のすべてのポップアップを非表示にするかどうか |
| movePopup | true | ページにすでにpopupが存在する場合、ポップアップをターゲット要素と同じオフセットコンテナに移動するかどうか。サイドバーなど、overflow：visibleのない要素内でポップアップを使用するには、これをfalseに設定する必要がある場合があります |
| observeChanges | true | 要素がページのDOMから削除されたときに、ポップアップがmutationObserversをアタッチして自動的にdestroyを実行するかどうか。 |
| boundary | window | ポップアップがこの要素の境界を超えると、別の表示位置を見つけようとします。 |
| context | body | ポップアップを作成する場所を指定するセレクターまたはjqueryオブジェクト。 |
| scrollContext | window | このコンテキストでスクロールイベントが発生すると、ポップアップが自動的に非表示になります |
| jitter | 2 | ポップアップがコンテキストの境界の外側に表示できるピクセル数。これにより、要素がcontextの端に隣接している場合に、許容される丸め誤差が発生します。 |
| position | top left | ポップアップが表示される位置 |
| inline | false | ポップアップがインラインの場合、現在の要素の横に作成され、ローカルのcssルールを適用できます。非表示にした後、DOMから削除されません。それ以外の場合、ポップアップはbodyに追加され、非表示にした後に削除されます。 |
| preserve | false | 非表示にした後もポップアップコンテンツをページに保持するかどうか。これにより、後続のロードでわずかに速く再表示できます。 |
| prefer | adjacent | ポップアップが画面に収まらない場合に、隣接する位置または反対側の位置を優先するために、adjacentまたはoppositeに設定できます |
| lastResort | false | falseに設定すると、ポップアップが画面に完全に収まらない場合、ポップアップは表示されず、エラーメッセージが生成されます。これを右中央のような位置に設定すると、ステージから部分的に外れていても、ポップアップはこの位置を最後の手段として使用することになります。これをtrueに設定すると、最後に試行された位置が使用されます。 |
| on | hover | ポップアップをトリガーするために使用されるイベント。 フォーカス、クリック、ホバー、または手動のいずれかにすることができます。手動ポップアップは、$（ '.element'）。popup（ 'show'）;でトリガーする必要があります |
| delay |
delay: { show: 50, hide: 0 }
|
ホバーまたはフォーカスでポップアップを表示または非表示にするまでの遅延（ミリ秒単位） |
| transition | slide down | メニューをアニメーションで表示および非表示にする際に使用する名前付きトランジション。 |
| duration | 200 | アニメーションイベントの期間 |
| arrowPixelsFromEdge 2.3の新機能 |
20 | ターゲット要素がこの量の2倍未満の場合、ポップアップは、ポップアップエッジがターゲットのエッジと一致するのではなく、ターゲット要素の中央に矢印が表示されて表示されます。 |
| setFluidWidth | true | パディングを含むwidth：100％を回避するために、ポップアップがロード時に流動的なポップアップバリエーションの幅を設定するかどうか |
| hoverable | false | ポップアップがホバー時に閉じないようにするかどうか（ポップアップナビゲーションメニューに役立ちます） |
| closable | true | on： 'click'を使用する場合、ページをクリックするとポップアップが閉じるかどうかを指定します |
| addTouchEvents | true | on： 'hover'を使用する場合、ポップアップをトリガーできるようにtouchstartイベントを追加するかどうか |
| hideOnScroll | auto | スクロールまたはタッチムーブでポップアップを非表示にするかどうか。 autoは、on： 'click'のないポップアップのみを非表示にします。入力フィールド内をタップしたときにモバイルブラウザがポップアップを閉じないようにするには、これを falseに設定します。 |
| target | false | セレクターまたはjQueryオブジェクトが指定されている場合、ポップアップをその要素を基準にして配置できます。 |
| distanceAway | 0 | 要素からのポップアップの距離のオフセット |
| offset | 0 | 計算された位置からのオフセット（ピクセル単位） |
| maxSearchDepth | 10 | ポップアップが画面に収まらない場合に、ポップアップの位置の検索を諦めるまでの反復回数 |
コールバック
コールバックは、特定の動作の後に発生する関数を指定します。
| パラメータ | コンテキスト | 説明 | |
|---|---|---|---|
| onCreate | $module | $popup | 作成されたポップアップを使用して、ポップアップ要素の作成時にコールバックします |
| onRemove | $module | $popup | PopupがDOMから削除される直前のコールバック |
| onShow | $module | $popup | ポップアップが表示される前のコールバック。このコールバックからfalseを返すと、ポップアップの表示がキャンセルされます。 |
| onVisible | $module | $popup | ポップアップが表示された後のコールバック |
| onHide | $module | $popup | ポップアップが非表示になる前のコールバック。このコールバックからfalseを返すと、ポップアップの非表示がキャンセルされます。 |
| onHidden | $module | $popup | ポップアップが非表示になった後のコールバック |
| onUnplaceable | $module | $popup | ポップアップを画面に配置できない場合のコールバック |
コンテンツ設定ポップアップコンテンツを指定するための設定
| 設定 | 説明 |
|---|---|
| variation | 使用するポップアップバリエーション。スペース区切り文字を使用して複数のバリエーションを使用できます |
| content | 表示するコンテンツ |
| title | コンテンツと一緒に表示するタイトル |
| html | 事前にフォーマットされたタイトルとコンテンツの代わりに表示するHTMLコンテンツ |
DOM設定DOM設定は、このモジュールがDOMとどのようにインターフェースするかを指定します
| 設定 | デフォルト | 説明 |
|---|---|---|
| namespace | popup | イベント名前空間。モジュールのティアダウンが要素にアタッチされている他のイベントに影響を与えないようにします。 |
| selector |
selector : { popup : '.ui.popup' }
|
内部で使用されるDOMセレクター |
| metadata |
metadata: { content : 'content', html : 'html', offset : 'offset', position : 'position', title : 'title', variation : 'variation' }
|
データを格納するために使用されるHTMLデータ属性 |
| className |
className : { loading : 'loading', popup : 'ui popup', position : 'top left center bottom right', visible : 'visible' }
|
状態にスタイルを添付するために使用されるクラス名 |
デバッグ設定デバッグ設定は、コンソールへのデバッグ出力を制御します
| 設定 | デフォルト | 説明 |
|---|---|---|
| name | ポップアップ | デバッグログで使用される名前 |
| silent | false | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を無音にします。 |
| debug | false | 標準のデバッグ出力をコンソールに提供します |
| performance | true | 標準のデバッグ出力をコンソールに提供します |
| verbose | true | 補助的なデバッグ出力をコンソールに提供します |
| errors |
error: { invalidPosition : '指定した位置は有効な位置ではありません', cannotPlace : 'ポップアップがビューポートの境界内に収まりません', method : '呼び出したメソッドは定義されていません。', noTransition : 'このモジュールにはUIトランジションが必要です
|
|