ポップアップ:ポップアップ

このサンプルは、Popupが所有者要素を持つときのPopupコントロールの動作を示します。showTriggerおよびhideTriggerプロパティは、所有者要素がクリックされたとき、またはPopupがフォーカスを失ったときのPopupの動作を制御するために使用されます。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let popClickBlur = new input.Popup('#popClickBlur', { owner: document.getElementById('btnClickBlur'), showTrigger: 'Click', hideTrigger: 'Blur' }); // let popClickClick = new input.Popup('#popClickClick', { owner: document.getElementById('btnClickClick'), showTrigger: 'Click', hideTrigger: 'Click' }); // var popClickNone = new input.Popup('#popClickNone', { owner: document.getElementById('btnClickNone'), showTrigger: 'Click', hideTrigger: 'None' }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popups with Owner Elements</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <h4>クリックで表示、フォーカス移動で非表示</h4> <button id="btnClickBlur" class="btn btn-primary"> Popoverを表示 </button> <div id="popClickBlur" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> メッセージ </div> </div> <hr /> <h4>クリックで表示、クリックで非表示</h4> <button id="btnClickClick" class="btn btn-primary"> Popoverを表示 </button> <div id="popClickClick" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> メッセージ </div> </div> <hr /> <h4>クリックで表示、コードで非表示</h4> <button id="btnClickNone" class="btn btn-primary"> Popoverを表示 </button> <div id="popClickNone" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> <form name="popoverForm"> <p> メッセージ</p> <pre>2 + 3 = <span class="">5</span></pre> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="メールを入力"> </div> </div> <div class="form-actions"> <button class="btn btn-danger wj-hide">閉じる</button> <button class="btn btn-primary wj-hide-ok">変更を保存する</button> </div> </form> </div> </div> </div> </body> </html> .modal-body { min-width: 300px; } input:invalid { border-color: red; } /* CSS animations for fading in and out */ .custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s; } .custom-animation-visible { opacity: 1; transform: none; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popups with Owner Elements</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <h4>クリックで表示、フォーカス移動で非表示</h4> <button #btnClickBlur class="btn btn-primary"> Popoverを表示 </button> <wj-popup [owner]="btnClickBlur" [showTrigger]="'Click'" [hideTrigger]="'Blur'" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> メッセージ </div> </wj-popup> <hr /> <h4>クリックで表示、クリックで非表示</h4> <button #btnClickClick class="btn btn-primary"> Popoverを表示 </button> <wj-popup [owner]="btnClickClick" [showTrigger]="'Click'" [hideTrigger]="'Click'" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> メッセージ </div> </wj-popup> <hr /> <h4>クリックで表示、コードで非表示</h4> <button #btnClickNone class="btn btn-primary"> Popoverを表示 </button> <wj-popup [owner]="btnClickNone" [showTrigger]="'Click'" [hideTrigger]="'None'" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> <form name="popoverForm"> <p> メッセージ</p> <pre>2 + 3 = <span class="">5</span></pre> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="メールを入力"> </div> </div> <div class="form-actions"> <button class="btn btn-danger wj-hide">閉じる</button> <button class="btn btn-primary wj-hide-ok">変更を保存する</button> </div> </form> </div> </wj-popup> </div> .modal-body { min-width: 300px; } input:invalid { border-color: red; } /* CSS animations for fading in and out */ .custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s; } .custom-animation-visible { opacity: 1; transform: none; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjInput from '@grapecity/wijmo.react.input'; // class App extends React.Component { constructor() { super(...arguments); this.initClickBlurPopup = (popup) => { popup.owner = this.refs.btnClickBlur; }; this.initClickClickPopup = (popup) => { popup.owner = this.refs.btnClickClick; }; this.initClickNonePopup = (popup) => { popup.owner = this.refs.btnClickNone; }; } render() { return <div className="container-fluid"> <h4>クリックで表示、フォーカス移動で非表示</h4> <button className="btn btn-primary" ref="btnClickBlur"> Popoverを表示 </button> <wjInput.Popup showTrigger="Click" hideTrigger="Blur" initialized={this.initClickBlurPopup} className="popover"> <h3 className="popover-title"> タイトル </h3> <div className="popover-content"> メッセージ </div> </wjInput.Popup> <hr /> <h4>クリックで表示、クリックで非表示</h4> <button className="btn btn-primary" ref="btnClickClick"> Popoverを表示 </button> <wjInput.Popup showTrigger="Click" hideTrigger="Click" initialized={this.initClickClickPopup} className="popover"> <h3 className="popover-title"> タイトル </h3> <div className="popover-content"> メッセージ </div> </wjInput.Popup> <hr /> <h4>クリックで表示、コードで非表示</h4> <button className="btn btn-primary" ref="btnClickNone"> Popoverを表示 </button> <wjInput.Popup showTrigger="Click" hideTrigger="None" initialized={this.initClickNonePopup} className="popover"> <h3 className="popover-title"> タイトル </h3> <div className="popover-content"> <form name="popoverForm"> <p> メッセージ</p> <pre>2 + 3 = <span className="">5</span></pre> <div className="form-group"> <div className="input-group"> <div className="input-group-addon">@</div> <input className="form-control" type="email" placeholder="メールを入力"/> </div> </div> <div className="form-actions"> <button className="btn btn-danger wj-hide">閉じる</button> <button className="btn btn-primary wj-hide-ok">変更を保存する</button> </div> </form> </div> </wjInput.Popup> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .modal-body { min-width: 300px; } input:invalid { border-color: red; } /* CSS animations for fading in and out */ .custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s; } .custom-animation-visible { opacity: 1; transform: none; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <h4>クリックで表示、フォーカス移動で非表示</h4> <button class="btn btn-primary" ref="btnClickBlur"> Popoverを表示 </button> <wj-popup :owner="btnClickBlur" :showTrigger="'Click'" :hideTrigger="'Blur'" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> メッセージ </div> </wj-popup> <hr /> <h4>クリックで表示、クリックで非表示</h4> <button class="btn btn-primary" ref="btnClickClick" > Popoverを表示 </button> <wj-popup :owner="btnClickClick" :showTrigger="'Click'" :hideTrigger="'Click'" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> メッセージ </div> </wj-popup> <hr /> <h4>クリックで表示、コードで非表示</h4> <button class="btn btn-primary" ref="btnClickNone" > Popoverを表示 </button> <wj-popup :owner="btnClickNone" :showTrigger="'Click'" :hideTrigger="'None'" class="popover"> <h3 class="popover-title"> タイトル </h3> <div class="popover-content"> <form name="popoverForm"> <p> メッセージ</p> <pre>2 + 3 = <span class="">5</span></pre> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="メールを入力"> </div> </div> <div class="form-actions"> <button class="btn btn-danger wj-hide">閉じる</button> <button class="btn btn-primary wj-hide-ok">変更を保存する</button> </div> </form> </div> </wj-popup> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function(){ return { btnClickBlur: null, btnClickClick: null, btnClickNone: null } }, mounted: function(){ this.btnClickBlur = this.$refs.btnClickBlur; this.btnClickClick = this.$refs.btnClickClick; this.btnClickNone = this.$refs.btnClickNone; } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .modal-body { min-width: 300px; } input:invalid { border-color: red; } /* CSS animations for fading in and out */ .custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s; } .custom-animation-visible { opacity: 1; transform: none; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Popups with Owner Elements</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html>