Vueで可変モーダルを実装する - Qiita
はじめに ドラッグで移動、拡大縮小ができるモーダルを作ってみました。 早速完成形からお見せします。 モーダルの移動 サイズ調整 移動 まずは、ヘッダー部分をドラッグすることでモーダルが移動ができるようにします。 1. テンプレート <template> <div class="draggable-modal" :style="{ width: `${modalWidth}px`, height: `${modalHeight}px`, transform: `translate(${pos.x}px, ${pos.y}px)`, }" > <div class="header" @mousedown=" (e) => { adjustDragStart(e) } " > header </div> <div class="body">body</div> </div> </template
＊Vue 3系＊ モーダルウィンドを作成 - Qiita
はじめに Vue3系を勉強し始めてcomponentを使う練習をしたかったので モーダルを作ってみた時の忘備録です。 また、初心者のため Emit（子→親）についても整理しながらの記事になります。 もうVueを使い倒している方には向かない内容につき 時間の無駄になってしまうので読まないでくださいね！！！ 私は、今までVue2系の"vue-property-decorator"を使用していたので Vue3系の勉強をしながら作成したものになります。 不備等もあると思いますがご了承ください。 ＊関連ワード Vue.js 3系 / TypeScript / SCSS / component / Mac OS / Modal / emit 完成形 ディレクトリ構成 ディレクトリ内 ※ storeやrouterなど使用していないものは省略しています src/ ┣ components/ │ ├ He
jQuery「prettyPhoto」でおしゃれに画像を拡大表示する使い方【lightbox系】
lightbox系のプラグイン、jQueryで利用するJavaScriptライブラリ「prettyPhoto」の使い方、設定のまとめ。 prettyPhotoは画像拡大表示のほかに、動画の拡大表示にも対応しています。 Youtube、Quicktime、FLASH、VIDEOファイルなどをおしゃれに拡大表示することができます。 ページ内の画像をグループ化することで自動再生スライドショーも可能。 サンプルデモ 必要なファイルは以下URLのダウンロードより http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ prettyPhotoの設定方法jQueryとprettyPhotoよりダウンロードしたprettyPhoto.jsとprettyPhoto.cssをヘッダで読み込む。 <link
Webページでよく使用されるコンポーネントをアクセシブルに実装するコードのまとめ -Frend
アコーディオンやタブ、ダイアログ、オフ キャンバス、ページ内リンクなど、Webページでよく使用されるコンポーネントをアクセシブルに実装するコードを紹介します。 Frend 実装にあたり Frendのコンポーネントは最小限で、他のスクリプトやCSSの依存はありません。Web標準をプライオリティとして構築されています。 WAI-ARIAに基づき、ARIA属性とイベントバインディングを利用し、ディテールを提供しています。すべてのコンポーネントはキーボードでの操作も可能です。 コンテンツあるいはインタラクションは、それを利用するためのベースラインを保証し、CSSやJavaScriptで拡張している箇所は必ずしもすべてのブラウザで同じように機能しません。しかし、それを利用することに問題はありません。 アクセシブルに実装されたコンポーネント 各ページでは実際のデモとコード、解説が掲載されています。
メッセージボックスや通知ダイアログ表示コンポーネントが多数詰まった「Lobianijs」:phpspot開発日誌
Lobianijs - Responsive jQuery messagebox and notification plugin available for commercial and non-commercial usages メッセージボックスや通知ダイアログ表示コンポーネントが多数詰まった「Lobianijs」 標準やBootstrap標準ではないようなダイアログ、通知のコンポーネントが利用できます 通知系。サウンドも鳴らすことができます 関連エントリ モダンなUIでモーダルダイアログを出すことができる「jQuery Popdown」 iOS風のモーダルダイアログを実装できる「basicModal」 確認ダイアログ（window.confirm）の実装をクロスブラウザで統一できる「jquery.confirm」 アニメーションするモダンなモーダルダイアログを汎用的につくれる「cta
CSS3だけで作るClickableなUI - くらげだらけ
最近はHTMLやCSSぐらいしか書いていませんが、HTMLやCSSでできることを考えたりしています。 HTML5やCSS3はクロスブラウザ（主にIE）を考えたりすると、現実的でないような気さえしますが、Mobileデバイスに限れば、もう既に一般的な技術です。 HTMLはフォームパーツなどのインタラクティブな要素があります。それらはPerlやPHP、もしくはJavascriptを使ってユーザーと対話するために利用されています。 CSSでも :hover や :active、:visited などの擬似クラスはユーザーとの対話ができるセレクタとして使うことができます。しかし、それらでできるUIには限界がありました。 CSS3ではさらに便利なセレクタが追加されていて、それとフォームパーツなどを組み合わせることで、今までではJavascriptを使用しなければできなかったようなUIが作れると考えま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
