ハンバーガーボタン実装で学ぶJSの基礎
ハンバーガーボタン実装で学ぶJSの基礎主にスマートフォンデバイスなどのUIでよくみられるようになった三本線「三」のメニューボタン。海外でハンバーガーに見えることからハンバーガーメニューとか、ハンバーガーボタン・ナビゲーションと呼ばれています。今回は、ハンバーガーボタンをもとにJavaScriptの基礎をご紹介します。 ◎ 長所 メニューの内容をWebサイト上に表示させなくとも、コンテンツリンクを実装できるハンバーガーボタンは、画面の表示領域を広くもつことができます。 そのため、ゆったりとしたデザインや大胆なレイアウトをスマートフォンでもできることが魅力です。 △ 短所 コンテンツリンクを押すためにひとつ動作が増えたことから、 ユーザーエンゲージメント※1※1 エンゲージメントとは、企業や商品、ブランドなどに対してユーザーが「愛着を持っている」状態のこと。 、つまりユーザーがサイトのゴールに
プルダウンメニューにテキスト入力？
・ JavaScriptで書くとこのようなことでしょうか。 <html> <head> <script type="text/javascript"> function setSel(sel) { if (sel.value == "0") { sel.selecctedIndex = 0; sel.form.date.style.display = 'none'; } else { sel.selecctedIndex = 1; sel.form.date.style.display = 'block'; } } </script> </head> <body> <form id="F1" action="#"> 日付検索: <br /> <select onChange="setSel(this)"> <option value="0"> すべての日付 </option> <optio
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
米Yahoo!、JavaScriptライブラリ「YUI 3.2」をリリース。タッチインターフェイス対応などを強化 | OSDN Magazine
米Yahoo!は9月7日、JavaScriptベースのWebアプリケーション向けUIライブラリ「YUI 3.2.0」を発表した。パフォーマンス面での改良に加え、タッチとジェスチャーに対応するなど、モバイル端末向け機能が強化された。同社開発者用サイトのYUIページから入手できる。 YUIはリッチなUIを持つWebアプリケーションを構築するためのJavaScriptライブラリ。DOM操作や動的なページ操作、Ajaxサポートといった機能を備えているほか、さまざまなユーザーインターフェイスコンポーネントも提供している。米Yahoo!など多くのWebサイトで利用されている。 YUI 3.2.0ではYUIの主要な機能を最小限の作業で利用できるようにする「SimpleYUI」と呼ばれるモジュールが新たに追加された。SimpleYUIは「suimpleyui-min.js」というスクリプトファイルをロード
alert,confirm,promptを模倣するjxDialogを作ってみた - jiroの日記
ブラウザの標準のalert等のダイアログ系をかっこよくJavaScriptで模倣してみました。サンプルを見てもらえば、分かるのですが、ダイアログが表示されると半透明のレイヤーが表示部を覆って、下に表示されている要素を選択できないようにして、モーダルダイアログをシミュレートしています。DLはこちらから タブで移動できちゃうでしょ? よくあるレイヤーはクリックしてもその下にあるエレメントはクリックできないのですが、タブキーで遷移して、スペースキーで普通に押せてしまいます。しかし、jxDialogで作成しているダイアログ表示ではタブキーイベントをちゃんと制御して、モーダルダイアログにしています。 カスタマイズできます 必要なライブラリはないので、比較的気楽に取り込めるんじゃないかと思います。使い方はサンプルを参照してください。デフォルトで用意しているダイアログはalert,confirm,pro
プロトタイプ：AJAXで改良するフォーム入力
ここのところ、Google App Engine上でアプリを作っている私だが、iPhoneアプリとかを作り慣れている私としては、単純なHTMLページの組み合わせでUIを作るというのでは面白くない。そこで、サーバーがModel、クライアントがViewとControllerというアーキテクチャととことん追求してサービスを作っているのだが、そのためにはさまざまなUI部品を作らなければならず、そこにやたらと時間がかかっている。 始めた当初は、「今はオープンソースの時代だからUI部品もオープンなものを集めてくれば済む」と軽く思っていたのだが、実際に使おうとすると不必要に複雑だったり、汎用化されすぎていたりしてそのままでは使えないものが大半。結局のところ、そのまま使える品質のJavaScriptライブラリはjQueryのみで、それ以外は、（１）オープンなものを元にシンプルなものを作り直す、（２）スクラ
Googleのトップページを開くと毎秒100回JavaScriptが実行されるよ - 射撃しつつ前転 改
FirefoxがCPUを常に15%ぐらい食うのが気になっていたので調べてみたら、Googleのトップページを開くとものすごい勢いでJavaScriptが実行されることがわかった。具体的には、var k=t.value;k!=h&&X(0);h=k というコードが毎秒100回実行されている。このせいで、自分の使っているPCだと、Googleのトップページを開くだけでCPU使用率が2%ぐらい上がっているようだ。Firefox特有の問題というよりは、ウェブページ側の作り方に依るものみたいだ。たぶん他のブラウザでも問題は変わらないだろう。 Googleのトップページの場合、コードを調べてみた限りでは、原因はどうも検索候補の自動補完用のコードみたいだ。現在の入力文字列が過去の記録と違ったら補完の提示をやり直す、みたいなことをやっているように見える。 HTMLではテキストボックス内のテキストが変更され
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to slide{move} slider in Selenium WebDriver
オートフォーカスしてカーソルを末尾に移動させる小技 - Qiita
Google Code Archive - Long-term storage for Google Code Project Hosting.