2019年02月25日(月)
フォームの内容を元に任意のUIに遷移
Result
See the Pen CSS Grid: Form to Badge by kachibito
(@kachibito) on CodePen.
フォームの内容から別のUIに遷移する、みたいなの
やってる事は割とシンプルで、作成ボタンをクリックするとレイアウト全体を包括する親ブロックのclassを別のclassと入れ替えてCSSで見た目を整えてるだけです
サンプルはバッジっぽいUIですが他にも応用できますね何かに使えそうかなぁと思ったので備忘録です
例えば非予約なイベント会場等で来場者カードを作る時に来場者にタブレットで入力してもらうと来場者カード発行の手続きプロセスを簡略できる、とかjQuery
//ボタンクリックで全体のclassを入れ替えて、フォーム内容とカードUIをトグル $(".js-switch").click(function() { $(".main-content").toggleClass("as-card"); }); //画像を送信前にプレビューする var reader = new FileReader(); reader.onload = functio...
0
13
2
14author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
アドビ、デジタルコンテンツ管理ソリューション「Adobe Experience Manager 6.5」を発表
NEXT ›
[ユーザー投稿] 「戦闘力が高い人材に、タフに自分を効率的に育てる環境の条件とは」
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『フォームの内容を元に任意のUIに遷移』についてまとめています。
この記事は特にjQuery・WordPressについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
