前回に続いてhtmlをどんどん打ってゆきます。 guideを引くための機能のフォームのhtmlを加えました。見出しの部分はh1タグをheaderで囲んでいます。ヘッダーは全てのフォームで共通して打ち込みます。 各種見出しとガイドを引くためのボタン、アートボードの内側にガイドを引くための数値を入力するための数値のフォームとcm,mm,pointのラジオボタンをtopcoatのサイトを見ながら設置。以上のタグを打ち込むと以下のようなパネルになります。 とりあえずの表示はこんな感じです。なんとなくnavが上部に配置されてヘッダーがあって真ん中にメインのフォームが配置されて最後にフッターがあるのがわか
それではmainタグの中のフォームを打ち込みましょう。ただしその前にtopcoatについてもう一度触れる必要があります。こちらでも触れていますがtopcoatを使用すれば自前でフォームのカスタマイズをしなくても事前に用意された綺麗なフォームレイアウトが使えるので便利ですが一部radioボタンやcheckboxはそのままinputタグを打ち込んでも表示されません。実際にhtmlタグを打ち込む前に公式サイトで確認する必要があります。例えば このスイッチ型チェックボックスのhtmlは以下のようになっています。 このhtmlを丸々写さないと同じ見た目にならないので注意。labelの中にdivタグがある
前回全体のhtmlについて解説しました。ここから細かいタグも打ち込んでゆきます。まずはタブのhtmlからですが各種パネル表示を切り替える際にradioボタンの値で表示の内容を切り替えます。そのためにradioボタンをリスト形式で打ち込みます。 一気にhtmlの構造が複雑化しました。radio ボックスのフォームがリストタグの中に入れてさらにその外側をformタグで囲っています。この各種リストの中のradioフォームは全て同じ構造になっているので同じようなタグが並んでいるだけです。cssで装飾するためのタグも混じっているので一度削って分かりやすくします。 多少分かりやすくなりました。labelの
Extension関係の記事を検索すると環境構築してパネルを立ち上げるとこまでの記事はかなり多いのですが大体そこから先の記事はほとんどありませんでした。いわゆるHellow worldより進んだちょっとだけ複雑なExtensionの作り方を解説してみます。対象は環境構築はできる、もしくは簡単なパネルなら作れるくらいの方です。今回作るパネルには三つくらい機能を持たせてみます。ガイドを引く、ファイル情報をテキストにして印刷用にヘッドを作る、一時的なカラーの数値を保存する機能を持たせる、です。完成版はこちらにアップしておきました。 zxp圧縮版はこちらです。 パネルの完成図は以下のような感じに。 *