[CSS3]rotate
rotateプロパティ。
WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280
文字の上の丸をドラッグ:移動
rotateプロパティ。
WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280
文字の上の丸をドラッグ:移動
モデルau design projectのneonです。
全て自作しました。
WindowsXPの下記のブラウザで動作を確認しました。
Firefox3.5
IE6,7(png8画像は劣化)
GoogleChrome4.0.249.78 (36714)
SRWare Iron4.0.280
Safari4.0
3時間くらいでササッと作ったものなんで
生暖かい目で見てください。
jQueryなどのライブラリを使わず全て自作しました。
元ネタはこちら
左が重い方は右へ
javascriptです。
全て自作しました。
上部サムネクリック:対象画像までスライド
マウスホイール:スライド
バードラッグ:ドラッグ
バーを投げる:飛んでく
WindowsXPの下記のブラウザで動作を確認しました。
Firefox3.5
IE7
GoogleChrome4.0.249.78 (36714)
Safari4.0
ajaxです。
marunouchi.com的なものを作ってみました。
全て自作しました。
ブラウザウィンドウリサイズ:並び替え
リンクマーク付き画像クリック:リンク先へ
リンクマーク無し画像クリック:拡大画像表示
基本メモ。
ウィジェットエンジンをダウンロードしてインストール。
http://widgets.yahoo.co.jp/download/
開発ツール、リファレンスはここ。
http://widgets.yahoo.co.jp/workshop/
ウィンドウを生成
var field=new Window(); field.title="frasio report"; field.width=480; field.height=480; field.visible=true; field.shadow=true;
画像を配置
var im=new Image(); im.src="images/img00.png"; im.hOffset=10; im.vOffset=10; field.appendChild(im);
テキストを配置
var t=new Text(); t.hOffset=10; t.vOffset=10; t.size=12; t.color="#000000"; field.appendChild(t);
入力テキストを配置
var texinput=new TextArea(); texinput.width=200; texinput.height=150; texinput.bgColor="#ffffff"; texinput.bgOpacity=255; field.appendChild(texinput);
Flashを配置
var f=new Flash(); f.src="flash/item.swf"; f.hOffset=100; f.vOffset=50; field.appendChild(f); //flash上はウィジェットをドラッグできない
Webを配置
var w=new Web(); w.hOffset=200; w.vOffset=200; w.width=280; w.height=280; w.url="http://www.yahoo.co.jp/"; field.appendChild(w); //表示に時間がかかる //jsが効かなかったり文字化けしたりして実用的ではない
オンライン上のxmlをロードして解析する。
get_xml(); function get_xml(){ var url=new URL(); var xmlstr=url.fetch("/test/20/test.xml"); var xml=XMLDOM.parse(xmlstr); var myxml=xml.evaluate("metadata"); var node=myxml.item(0); var str=node.evaluate("string(name)"); log(str); //strにnameタグの「frasio report」という文字列が格納されている }
ローカルのxmlをロードして解析する。
get_local_xml(); function get_local_xml(){ var xmlstr=filesystem.readFile("test.xml"); var xml=XMLDOM.parse(xmlstr); var myxml=xml.evaluate("metadata"); var node=myxml.item(0); var str=node.evaluate("string(name)"); log(str); //strにnameタグの「frasio report」という文字列が格納されている }
テキストファイルをユーザ指定場所に保存する。
save_text("保存するテキスト"); function save_text(target_str){ var destination=saveAs(".txt");//ユーザに保存先を指定させる if(destination==null)return; if(!filesystem.itemExists(destination)){ filesystem.writeFile(destination, target_str); return true; } return false; }
ファイルのドロップを受け付ける
field.onDragDrop=when_file_drop; function when_file_drop(e){ var files=e.items; var ft=get_filetype(files[0]); if(ft!="jpg")return; var img=new Image(); img.src=files[0]; field.appendChild(img); } function get_filetype(filepath){ return filepath.toString().split(".").pop(); }
swfobjectはこの↓サイトでダウンロードできます。
http://code.google.com/p/swfobject/
まずhtmlに貼り付けるには下記のようにします。サンプル
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/swfobject.js"></script> </head> <body> <div id="flashcontent"></div> <script type="text/javascript"> swfobject.embedSWF("swf/main.swf", "flashcontent", "400", "300", "9.0.45"); </script> </body> </html>
1.5のときと同じようにdivタグにidをつけ、
flashplayerのバージョンが足りないときに表示するコードを記述する。
embedするためのコードの引数は下記のようになっています。
swfobject.embedSWF(swfファイル, divタグのid, flashの幅, flashの高さ, 必要なバージョン, expressInstall.swf, flashvars, params, attributes);
5個目までは分かると思いますので6個目から説明します。
6個目以降は必ずしも必要ではありません。
expressInstall.swfはflashplayerのバージョンが足りないときに画面遷移なしに
その場で最新flashplayerをインストールすることができるモジュールです。
使わないときはfalseを渡します。
これを使って貼り付けてflashplayerのバージョンが足りないときは下図のような
画面が出てインストールすることが出来ます。
見た目がアレなので素直にAdobeのサイトへ飛ばすリンクを記述したほうがいいかも。
7個目のflashvarsはflashに値を渡したいときに使います。
使い方:
var flashvars = {}; flashvars.id = "232";
8個目のparamsはmenuやallowfullscreenを設定するものです。
使い方:
var params = {}; params.menu = "false"; params.wmode = "opaque"; params.allowfullscreen = "true"; params.allowscriptaccess = "sameDomain";
9個目のattributesはnameやstyleclassを設定するものです。
使い方:
var attributes = {}; attributes.name = "flashswf"; attributes.styleclass = "jack"; attributes.align = "middle";
これら全部の引数を使うとコードはこんなふうになります。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/swfobject.js"></script> </head> <body> <div id="flashcontent"></div> <script type="text/javascript"> var flashvars = {}; flashvars.id = "232"; var params = {}; params.menu = "false"; params.wmode = "opaque"; params.allowfullscreen = "true"; params.allowscriptaccess = "sameDomain"; var attributes = {}; attributes.name = "flashswf"; attributes.styleclass = "jack"; attributes.align = "middle"; swfobject.embedSWF("swf/main.swf", "flashcontent", "400", "300", "9.0.45", "swf/expressInstall.swf", flashvars, params, attributes); </script> </body> </html>
以上がswfobject2.1の説明です。便利ですねー。
ここまで長々と説明してきましたが、自分で書くのめんどくせーってときは
swfobjectのサイトでswfobject_generator_1_2_air.zipをダウンロードして使えばコピペで済みます。
JavaScriptをかましたMac対応ScrollBarとかswfobject1.5用に作っていたので
2.1のものも作らなければ。