maxfactory | モバイル関連の技術メモ » javascript http://maxfactory.biz/blog モバイル（フィーチャーフォン、スマートフォン、タブレット）を中心とした技術メモ Thu, 14 Jul 2011 08:19:44 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 [jquery]IE8でtrに.toggle()が効かない http://maxfactory.biz/blog/2010/04/21/jqueryie8%e3%81%a7tr%e3%81%ab-toggle%e3%81%8c%e5%8a%b9%e3%81%8b%e3%81%aa%e3%81%84/ http://maxfactory.biz/blog/2010/04/21/jqueryie8%e3%81%a7tr%e3%81%ab-toggle%e3%81%8c%e5%8a%b9%e3%81%8b%e3%81%aa%e3%81%84/#comments Wed, 21 Apr 2010 12:37:20 +0000 max http://maxfactory.biz/blog/?p=481 jqueryを利用してテーブルをアコーディオンのように列を表示するUIを作成していて、
IE８だけが列を開くことができなかった。
jqueryのバージョンは1.3.2です。

下記のようにjqueryのtoggle関数を利用して実装していました。
※利用しているソースは参考させてもらった下記のサイトから抜粋しています。
http://stackoverflow.com/questions/975153/jquery-toggle-not-working-with-trs-in-ie

//html
<a id="readOnlyRowsToggle">Click</a>
<table>
  <tr><td>row</td></tr>
  <tr><td>row</td></tr>
  <tr class="readOnlyRow"><td>row</td></tr>
  <tr class="readOnlyRow"><td>row</td></tr>
  <tr class="readOnlyRow"><td>row</td></tr>
</table>


//javascript

$(document).ready(function() {
    $(".readOnlyRow").hide();
    $("#readOnlyRowsToggle").click(function() {
        $(".readOnlyRow").toggle();
    });
});

toggle関数が効かない原因は、
$(classname).is(“:visible”)
が必ずtrueを返すためにshow()が実行されないため。

if($(classname).is(":visible"))//IE8 always evaluates to true.
     $(classname).hide();
else
     $(classname).show();

なので、下記のようにtoggle関数を利用しない方法で実装する。

var elem = $(classname)[0];
if(elem.style.display == 'none')
     $(classname).show();
else
{
     $(classname).hide();                      
}

これでIE8も問題なく動作した。

◯参考サイト
http://stackoverflow.com/questions/975153/jquery-toggle-not-working-with-trs-in-ie

]]> http://maxfactory.biz/blog/2010/04/21/jqueryie8%e3%81%a7tr%e3%81%ab-toggle%e3%81%8c%e5%8a%b9%e3%81%8b%e3%81%aa%e3%81%84/feed/ 0 [jquery]JQUERY ALERT DIALOGS http://maxfactory.biz/blog/2009/08/27/jquery_alert_dialogs/ http://maxfactory.biz/blog/2009/08/27/jquery_alert_dialogs/#comments Thu, 27 Aug 2009 04:22:16 +0000 max http://maxfactory.biz/blog/?p=214 「JQUERY ALERT DIALOGS」
こちらを利用するとjsのダイアログ（alert,confirm,prompt）のviewを自由に変えることができます。

今回利用したのは、viewの変更目的ではなくｊＡlert関数を利用した際に、

1．画面上のボタンなどのイベントを無効としてくれる
2．alertのボタンクリック時のイベントハンドリングが容易
jAlert(“メッセージ”, “タイトル”, function(){/*クリック時のイベント*/});

という点で利用しました。

※IE6でダイアログの幅が横一杯に広がってしまうのは、問題点としてあるとのことです。

○利用方法とサンプルをアップしているブログ記事がありました。
http://javascript.webcreativepark.net/library/jquery_alert_dialogs

]]> http://maxfactory.biz/blog/2009/08/27/jquery_alert_dialogs/feed/ 0 [js]アルファ画像（透過png）を使う http://maxfactory.biz/blog/2008/07/30/js%e3%82%a2%e3%83%ab%e3%83%95%e3%82%a1%e7%94%bb%e5%83%8f%ef%bc%88%e9%80%8f%e9%81%8epng%ef%bc%89%e3%82%92%e4%bd%bf%e3%81%86/ http://maxfactory.biz/blog/2008/07/30/js%e3%82%a2%e3%83%ab%e3%83%95%e3%82%a1%e7%94%bb%e5%83%8f%ef%bc%88%e9%80%8f%e9%81%8epng%ef%bc%89%e3%82%92%e4%bd%bf%e3%81%86/#comments Tue, 29 Jul 2008 15:12:54 +0000 max http://maxfactory.biz/wp/?p=48 ブログのロゴは透過png画像なのですが、IE6では表示が崩れてしまう。
そこで、IE6でも崩れないようにしてくれるjsライブラリを利用しました。

○アルファ画像を扱うJSライブラリ
alphafilter.js

設定も簡単です。

alphafilter.jsを読み込んで、


<script type="text/javascript" defer="defer" src="./alphafilter.js">

透過png画像にalphafilterクラスを適応させる。


<img src="/images/logo.png" class="alphafilter" alt="" />

○参考サイト
http://blog.webcreativepark.net/2007/02/01-233315.html

]]> http://maxfactory.biz/blog/2008/07/30/js%e3%82%a2%e3%83%ab%e3%83%95%e3%82%a1%e7%94%bb%e5%83%8f%ef%bc%88%e9%80%8f%e9%81%8epng%ef%bc%89%e3%82%92%e4%bd%bf%e3%81%86/feed/ 0 [javascript]color picker http://maxfactory.biz/blog/2008/07/16/javascriptcolor-picker/ http://maxfactory.biz/blog/2008/07/16/javascriptcolor-picker/#comments Wed, 16 Jul 2008 01:49:07 +0000 max http://maxfactory.biz/wp/?p=32 ブログパーツの背景色をユーザが設定できる管理画面（htmlページ）を作成しています。
一般ユーザにRGB16進で記述させるって厳しいので、
カラーがUIでわかりやすく表現する方法を探してました。

で、ありました。
JSで作成されたいけてるカラーピッカーを発見しました。（有名なのかもしれないけど）

○color picker
http://www.skuare.net/test/proPhotoColor.html

サンプルソースの配布もしているので、設置が簡単でした。
ただ、重い。。。
表示に時間がかかってしまうので、利用したい人だけが別ウインドウを開いて使用してもらうようなナビゲーションにしました。
（Flashで作成したほうが軽いんでしょうね。。）

あと、サンプルではJSファイルと画像ファイルが相対パス指定になっています。
絶対パスで利用したい方は、ダウンロードしたファイルから以下の点を修正します。

○index.html(7行目?11行目と142行目?174行目)
cssとimageを読み込みしているパスを絶対パスに変更

○colorpicker.js(9行目?13行目)

Refresh.Web.DefaultColorPickerSettings = {
startMode:’h',
startHex:’ff0000′,
clientFilesPath: ‘img/’
};

上記の箇所が初期設定になっていますので、
clientFilespathを「img/」から自分の環境パスに変更で完了

]]> http://maxfactory.biz/blog/2008/07/16/javascriptcolor-picker/feed/ 0 [javascript]別ウインドウにPOSTでデータ送信 http://maxfactory.biz/blog/2008/07/15/javascript%e5%88%a5%e3%82%a6%e3%82%a4%e3%83%b3%e3%83%89%e3%82%a6%e3%81%abpost%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e9%80%81%e4%bf%a1/ http://maxfactory.biz/blog/2008/07/15/javascript%e5%88%a5%e3%82%a6%e3%82%a4%e3%83%b3%e3%83%89%e3%82%a6%e3%81%abpost%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e9%80%81%e4%bf%a1/#comments Tue, 15 Jul 2008 01:51:10 +0000 max http://maxfactory.biz/wp/?p=30 とある案件で別ウインドウで開きながら、
開く前のFormデータをPOSTで送信することが必要になった。

■対処法
○formタグ

<form name=”form2″ action=”./preview” method=”post” target=”preview” onsubmit=”openPreview(‘./privew’, ‘preivew’);return false;”>

○javascript

function openPreview(url, name)
{
    preview = window.open(url, name);
    window.preview.focus();
}

別ウインドウのウインドウ名を指定して（例ではpreivew）、
formで送信する際にtargetを別ウインドウで開いたウインドウ名（preview）を指定してあげればOK.

参考サイト
○http://webmag.dnw.jp/2007/04/post_25.html

]]> http://maxfactory.biz/blog/2008/07/15/javascript%e5%88%a5%e3%82%a6%e3%82%a4%e3%83%b3%e3%83%89%e3%82%a6%e3%81%abpost%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e9%80%81%e4%bf%a1/feed/ 1