Foundation4のセレクトボックス問題の対応

CSSフレームワークのFoundation4を利用して、Webアプリケーションの作成を行っていました。
簡単に使えるのはいいのですが、融通が利かない部分もあり、微妙な感覚を覚えました。

その中でも、モーダルを利用した場合にモーダル内のセレクトボックスへFoundationのセレクトボックス表示が反映されないと言う状態に陥ってしまう謎の現象にあたりました。

ベースとなるCSSやJSへの修正は、今後のアップデートなどを考えるとやりたくないため、下記の方法で対応しました。

対応方法としては、モーダル上に設置されているセレクトボックスのIDを、関数へと渡しクラス要素の再配置などを行うと言う方法です。
実際に利用する方法ですが、HTML、JavaScriptの内容は下記のものとなります。

HTML

<html>
  <head>
    <script>
      $(function() {
        // モーダルを利用する処理
        fixedSelector('#sample');
      });
    </script>
  </head>
  <body>
    <div id="modal">
      <select id="sample">
        <option></option>
        <option></option>
        ...
      </select>
    </div>
  </body>
</html>

JavaScript

function fixedSelector(id) {
	var ids = (id instanceof Array) ? id : [id], did = null, select = null, div = null, txt = null;
	for (var i in ids) {
		did = $(ids[i]).data('id'), select = $($("select[data-id^='" + did + "']")[0]), div = $($("div[data-id^='" + did + "']")[0]);
		txt = $('#' + select.attr('id') + ' option:selected').text();
		if (txt !== '') {
		    div.find('a.current').text('');
		    div.find('a.current').removeClass('current');
		    div.find('a.current').addClass('selector');
		    $(div.find('a').get(0)).text(txt);
		    $(div.find('a').get(0)).removeClass('selector');
		    $(div.find('a').get(0)).addClass('current');
		    $(div.find('li')).each(function() {
		        ($(this).text() === txt) ? $(this).addClass('selected') : $(this).removeClass('selected');
		    });
		}
	}
}

モーダルを呼び出す処理の中で、fixedSelectorを呼出しセレクトボックスの再生成を行います。
渡す引数は、セレクトボックスのIDとなっています。(複数の場合は配列で渡せます)

簡易に出来る分、こう言った部分ではまることもありますが、使い方次第では作業時間を大幅に少なく出来るので、どんどん利用していきたいと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする