clone()のselectがコピーされない、選択されないバグをとりあえず直す。
jQueryにclone()という大変便利なメソッドがあります。これは、
$(“#hoge”).clone();
とすると、ID=hogeを丸ごとコピーしてくれるというものです。
フォームで項目を追加したい場合などに大変威力を発揮します。
ただ問題があって、このclone()は、selectタグで変更したものを、コピーしてくれず、コピーしたら変更後の表示値ではなく、初期値が表示されてしまいます。
角丸テーブルをCSS3を使って実現する
仕事でページを作る必要があり、その際に角丸テーブルを作りましたので、そのやり方をご紹介。
基本的にborder-radiusを使いますので、IE8以下は非対応ですが、IE8以下へはJavascriptライブラリなどで適宜対応してください。
なおここでは、シンプルな3行3列のテーブルを考えています。また前提として、幅100px、高さ30pxとしています。
モダンブラウザで実装可能な、フォームを便利にするテク。IEはダメだけど。
ウェブアンケートとか、テーブルを使ったフォームでよくあるもので、例えば以下のようなコードで書かれるものです。
1 2 3 4 5 |
<table> <tr> <td><input type="radio" /></td> </tr> </table> |
これのテーブルセル内をクリックすると、チェックボックスなりラジオボタンなりがon状態にする方法です。
fieldsetタグについてのメモ。
フォームを弄る必要があって、調べていたのですが、フォームをグループ化するのに便利な、fieldsetタグなるものがあるのを思い出しました。
というわけで、fieldsetタグについてのメモになります。
JSライブラリを使って、IEでもCSS3やHTML5を。
Microsoftが、IE6、7の強制アップデートを表明しましたが、XPでは最新でもIE8までなっております。IE9は多少増しになりましたが、頻繁にアップデートされるChromeやFirefoxのように、最新のものに対応していないという、制作側からしたら泣きたくなるような状況がまだまだ続きます。
というわけで、IEを最新のものに対応させるJavascriptライブラリをご紹介。
tableとCSSだけで作る、テーブル内スクロール表示用のコード。
以前、Tableタグを学ぶで書いた、tableタグの内部でスクロールバーを表示させる方法ですが、こちらのものより、よりシンプルな方法を見つけたのでご紹介いたします。
tableタグは、tdとthに幅を指定してやると、綺麗にレイアウトできる。
HTMLを触り始めてから4、5年経過していますが、昨日まで知らなかったのでご紹介。
今までtableタグには何らかの形(widthもしくはCSS)で幅を指定していたのですが、tableタグ自体に指定するより、thタグtdタグに指定した方がレイアウト的にかなり綺麗になるということに気づきました。
本日、仕事でやったことなのですが忘れないうちにメモ。
僕は基本的に、HTMLやCSSはあらかた理解しているのですが、Tableタグ関係とFormタグ関係は苦手です。
というのも、今の時代、サイトのレイアウトテーブルなんて使いませんし、プログラムもほとんど触ったことがないのでフォームタグなんて使いません。
そんな状況で受けた本日の研修では、テーブルタグを使ったデータ表示をやりましたので、復習も兼ねて情報を載せておきます。
SEO塾テンプレート×WordPressテーマ(http://www.seowptemplate.com/)、SEO塾(株式会社アルゴリズム:http://www.algorism.co.jp/)とシステム開発のエキスパート、イーティーネット社のコラボレーションで生まれたSEO対策のWordPressテーマです。
WordPressをビジネスで活用する上で役に立つプラグインをWordPressのプラグイン販売サイト CMS×WPで手に入れましょう。