Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
ラベル ui の投稿を表示しています。 すべての投稿を表示
ラベル ui の投稿を表示しています。 すべての投稿を表示

2009年11月6日金曜日

YUI AutoCompleteを使うコードの例

【CSS】
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css" />


【JavaScript】
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/animation/animation-min.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js"></script>

<script type="text/javascript">
new YAHOO.widget.AutoComplete(
    "myInput",
    "myContainer",
    new YAHOO.util.LocalDataSource(["とうきょう", "とちぎ", "とやま"]),
    {useShadow: true} //AutoCompleteに影を表示
);
</script>


【HTML】
<div style="width:15em">
    <input id="myInput" type="text">
    <div id="myContainer"></div>
</div>


参考：YUI 2: AutoComplete

tags: , , , 0 コメント

2009年3月5日木曜日

YUIの Menu Control Widgetを最小限のコードで使う例

ページ上部のシンプルなメニューの場合。
YUI Loaderを使うと一瞬、素のHTMLが表示されるので、事前にCSS・JavaScriptを読み込んでセットアップしたほうが見栄えがよい。

（2009/03/15 追記：htmlのbody要素開始タグにclass属性を追加）


CSS

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/menu/assets/skins/sam/menu.css">

<style type="text/css">
.active-menu{
/* アクティブなメニューボタンの装飾をする */
background: #fff;
}
</style>

JavaScript
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onContentReady("menu", function(){ new YAHOO.widget.MenuBar("menu"); });
</script>

HTML
<body class="yui-skin-sam">
<div id="menu" class="yuimenubarnav">
<div class="bd">
<ul>
<li class="active-menu"><a class="yuimenuitemlabel" href="http://google.jp">google</a></li>
<li><a class="yuimenuitemlabel" href="http://yahoo.jp">yahoo</a></li>
<li><a class="yuimenuitemlabel" href="http://goo.jp">goo</a></li>
</ul>
</div>
</div>

tags: , , , , , 0 コメント

2009年2月11日水曜日

Photoshopで既存のファイルに別の画像ファイルを取り込む方法

初めてPhotoshopに触れた。WindowsのペイントツールやFlash（Playerではなく編集ツールの方）みたいに使えるかと思っていたが、Ctrl＋C/X/Vが使えなかったりして使い勝手が全然違う。
既存のPhotoshopのファイルに別の画像ファイルを取り込む方法すら分からない。

哲さんの雑記帳: Photoshop CS2で2枚の写真を連結して、1枚の写真にする方法です。 JTrimですと簡単に出来ますが、あえてPhotoshopで挑戦してみました。（タイトル長い）を参考にしてやった分かった。

Windowを隣に並べてドラッグ＆ドラッグすると。

さすがMac出身のソフト。マウスがメインか。

tags: , , , 0 コメント

2008年11月24日月曜日

Googleカレンダーでスクロールホイールを使って月を移動

Googleカレンダーで月ごとのカレンダーを表示している時に、マウスのスクロールホイールを回すと表示中の月を次の月や前の月に移動できることにさっき気付いた。
地味だけどなかなか便利な機能かも。

tags: , , , 0 コメント

2008年9月16日火曜日

Flashでページをめくるライブラリで逆方向にめくる方法

Flashでページをめくるライブラリで、日本の縦書きの本のようにページを左から右へめくるようにする方法。


Page Flip by PiXELWiTの場合

  • Actionsレイヤー フレーム2の「gotoAndPlay(4)」を変更し、最初に表示したいページのフレームに行くようにする
    （全部で8ページの場合は「gotoAndPlay(13)」）
  • シンボルBound PagesのActionsレイヤー フレーム1の冒頭にある変数dir, flipPage, curPageの初期値を変更する
    • dirは-1にする
    • flipPageは表示しているページとその裏のページを足して2で割った値にする
      （全部で8ページの場合は7.5）
    • curPageは表示しているページとその右側のページを足して2で割った値にする

      （全部で8ページの場合は8.5）

Free PageFlip 2.25 by Iparigrafikaの場合
  • Actionsレイヤー フレーム5の50行目あたりでセットしている変数「directlink」の値を最初に表示したいページ番号にする
    または、
    directlinkに関する記述（51~53行目）を削除してしまい、直接変数「page」にページ番号をセットしてもOK
  • 要は、初期処理で変数「page」にセットされたページを最初に表示するようになっているようだ



tags: , , 7 コメント

2008年4月6日日曜日

Flashでページをめくるライブラリのまとめ

実際に使用する場合は、最新情報やライセンスについて再度確認した方が良い。

Freeで、かつソースをいじらずに動的なコンテンツを表示したいなら、76designのDynamic PgeFliv v2が良さそう。 あと、JavaScriptではjQuery testくらいしか見つけられなかった。 Silverlightでもできるが、現時点では普及していないのでFlashの方が無難か。

2008/09/16追記： Flashでページをめくるライブラリで逆方向にめくる方法もどうぞ。

tags: , , 4 コメント

登録: 投稿 (Atom)

ブログ アーカイブ

tags