HOME > 開発者向けBLOG

Technology Note 開発者向けBLOG

Ext JS4 MVCアプリケーション開発 第二回

はじめに 前回のエントリにてコントローラ・ビューを作成しViewportが表示されました。今回はそのViewportにBorderレイアウトを指定し、下記の流れにてコントローラーにイベントハンドラを設定していきましょう。 各ビューの設置 Viewportへ各ビューを定義 各コントローラーを設置 コントローラーの使用宣言 各ビューの設置 ExtJS4 MVCにおけるビューは、Ex...

続きを読む

checkedセレクタでラジオボタンを表現

checkedセレクタで、画像を使用せずにラジオボタンを表現する方法ご紹介いたします。 ポイントは27行目の「opacity: 0;」と32行目の「input[type=”radio”]:checked + label」です。 「opacity: 0;」を使用している理由は、「dispay: none;」ではスマートフォンのアンドロイド携帯では表示されて...

続きを読む

Ext JS4 MVCアプリケーション開発 第一回

はじめに 近年のWebアプリケーションやその開発手法は、大きな過渡期にあります。Ajaxなどの技術に始まる、Javascriptの業界における再評価、再認識は、それらに大きな影響を与えています。 またスマートフォンの台頭、HTML5、CSS3の広まりも、従来のWeb開発、Web知識だけでは補えないものになってきています。 そんな時代の変化に対応すべく、様々なJavascript...

続きを読む

2カラムの固定、可変レイアウト

2カラムの固定と可変があるレイアウトをご紹介いたします。 カラムレイアウトと言えば、pxでの固定レイアウト、または%での可変レイアウトが思い出されると思います。今回は2カラム構成で、片方がpxでの固定、片方が%での可変レイアウトを作成します。 下記のソースは左カラムが固定で、右カラムが可変のCSSです。 左カラムは2行目の「.l_col_fix」で「float: left;」と...

続きを読む

transitionとtargetでクリック時に画像を横にスライド

クリックで画像を横にスライドさせる方法をご紹介いたします。CSS3のtransitionとa要素のtarget属性がスライドの肝です。 使用している画像は4枚になります。 まず、2行目の「div.photo_area」でスライドエリア全体を中央に表示します。次に10行目の「div.photo_block」で指定した幅と高さを決めて、現在表示する画像以外のものを非表示にします。 ...

続きを読む

PAGETOP