jquery.modal's People
jquery.modal's Issues
「transition: opacity 0.3s visibility 0.3s;」→「transition: opacity 0.3s, visibility 0.3s;」
ajaxでappendし完了後、クリックイベント付与。何故か付与できない時があり、モーダルが機能しなかった。
キャンバス : footer内に移動(最初に読み込む必要性がないため)
開く時のクリックしたイベント情報を取得したい(クリックした要素に応じてHTMLをモーダル中に追加するため)
demo2として、ハンバーガーメニューを開いた時の遅延アニメーション作成
/**
* ハンバーグメニュー内のanimation-delay追加
* @param {string} animation_item アニメーションアイテム
*/
function add_humburger_inner_menu_animation_delay(animation_item) {
let cur_deley = 0,
increment_deley = 0.05;
$(animation_item).each(function(){
$(this).css('transition-delay', cur_deley + 's');
cur_deley = get_humburger_inner_menu_animation_delay(cur_deley, increment_deley);
});
}
/**
* animation-delay追加
* @param {int} cur_deley 現在の遅延秒数
* @param {int} increment_deley 遅延秒数
*/
function get_humburger_inner_menu_animation_delay(cur_deley, increment_deley) {
return cur_deley + increment_deley;
}
ハンバーガーメニュー / アクセシビリティを高める
https://baigie.me/engineerblog/?p=234
- メニューボタンはbutton要素で実装し、WAI-ARIA属性を付ける。
- メニューの開閉状態がスクリーンリーダーに伝わる。
- 各要素にフォーカスがあたり、キーボードで操作が可能。
- メニューが閉じている状態ではメニュー項目にフォーカスが当たらないようにする。
- アコーディオンメニューがある場合、メニューが閉じている状態でアコーディオンメニューの中身にフォーカスが当たらないようにする。
- エスケープキーでメニューを閉じられるようにする。
- メニューを閉じた際にメニューボタンにフォーカスが戻るようにする。
- キーボード操作時、メニューの最後の項目までいったらメニューボタンもしくはメニューの先頭にフォーカスが戻るようにする。
https://docs.google.com/presentation/d/1Gcny5O0jrFbRVfjJWTiRfFkk3EMCLwiS-kqwj_JTCUM/htmlpresent
- メニューだと伝わる
- ポップアップするウィジェットだと伝わる
- 起動ボタンとメニュー内容が紐付いている
- メニューがページ内のどこにあるのかすぐわかる
Demo グローバルメニューに組み込むバージョン作成
プラグイン形式にするのではなく、通常のサイトに組み込むファイル構成にすると良いかも。ファイルが分散されて組み込みづらい。
content_width 要素も閉じるイベント不付与、あるいは、pointer-events: none; でいけるか
handle_scroll layout_content_height < layout_width_height にする
canvas offに cursor pointつける
iOSでメニュー内スクロールできない
ページ内リンク押下時
URLでフラグをつける
プラグイン作成
is_preloadedクラスが非同期処理中では動かない
initを無くす。メソッド化する必要なさそう
【デモ追加】モーダル スライド
fede_in→fade_in
ハンバーガーメニューのクラス名をアコーディオンメニューにする
アクセシビリティ : モーダル
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.