問題タブ [material-design-lite]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - jQuery を使用した HTML コードの解析
ウェブサイトで新しいmaterial-design-lite (mdl) を使用しています。また、 mustache.jsを使用して動的コンテンツを読み込んでいます。
ここで、新しく作成された要素upgradeElementを mdl の関数を使用して登録し、それらを認識して JavaScript を適用する必要があります。彼らのウェブサイトには、これを行うためのサンプルコードがいくつかあります。
ただし、私は jQuery を使用しており、取得したテンプレート全体を解析してmustache.js各コンポーネントを正しく登録する方法が完全にはわかりません。これは私が試したことです：
はfilledTemplate、それが含むことができるものの明確なアイデアを与えるためのものです。すべての入力、テキストエリア、スライダー、ラジオ、チェックボックス、およびボタンをバインドする必要があります。上記の例では、2 つのラジオ ボックスと 1 つのボタンを含む、mdl からの単純なカード レイアウトを確認できます。
最初にボタン要素をアップグレードするように componentHandler を取得しようとしましたが、mdl が を返すelement.getAttribute is not a functionので、間違った値を に与えているだけだと思います.upgradeElement()。
ここで何が間違っていますか？
例としてコードペンを次に示します: http://codepen.io/anon/pen/JdByGZ
html - MDL の適応型 CSS の高さ
MDL に基づく Web サイトがあり、中央に大きなヘッダーがあります。テキストを見るために、ボックスを後ろに置きました。
これが CodePenです。
目標は、人々がモバイルなどのウィンドウのサイズを変更すると、ボックスがテキストの高さでサイズ変更されることです。
どうすればこれを行うことができますか？
これは私の CSS です。
そして私のHTML
ありがとう
material-design-lite - サイドバー mdl-drawer をナビゲーション パネルの上ではなく下に配置します
Material Design Lite では、要素の位置をどのように指定しますか? 現在のデフォルトのように、ナビゲーション パネルの下にサイドバーを表示したいと思います: http://www.getmdl.io/components/#layout-section/layout
javascript - Material Design Lightでjavascriptを使用して引き出しからタブをアクティブにすることは可能ですか?
Material Design Lite で JavaScript を使用してタブをアクティブにすることはできますか?
内部のリンクを使用してタブをアクティブにしたいmdl-layout__drawerですか?
そのための機能はありますか？
javascript - Material Design Lite の 2 列メニューの例 - Chrome で機能しない
ねえみんな、2 つの列を持つメニューを作成する方法の例 (必要に応じて css オーバーライドを使用) はありますか?
私は次のことをしようとしています:
CSS は次のようになります。
` 単純に 2 つの列を追加しようとすると、うまくいきますが、リスト項目が消えてしまいます!
なぜこれが起こっているのですか？問題を示すプランカーを次に示します。
javascript - ユーザーのクリック時にドロワーを非表示にする方法
ユーザーがアイテムをクリックしたときにドロワーを非表示にするにはどうすればよいですか? それともボタンがクリックされたときですか？
ボタンをクリックすると、引き出しの外側をクリックしたかのように引き出しが非表示になるようにするにはどうすればよいですか? ドロワーの外でクリック イベントをシミュレートしようとしましたが、それでも非表示になりません。
javascript - マテリアル デザイン テーブル コンポーネントが動的な行を選択可能にしない
Material Design Lite のテーブル コンポーネントに問題があります。mdl-data-table--selectable行を選択可能にするクラスで定義しました。HTMLで静的に定義されている場合はそうですが、ノードを動的に作成してテーブルに追加すると、選択可能になりません。
このフィドルを見てください
追加しましたcomponentHandler.upgradeElement(tr);が、問題は解決せず、例外もスローされたので、それなしで続行しました。
こんにちは、これに対する答えが見つからないので、テーブルを更新する方法について新しい提案をお待ちしています。現在、すべてのコンテンツを削除し、要素を動的に追加する必要があるテーブルを再度生成しています。どんな提案でも大歓迎です。
html - Foundation または Bootstrap のように MDL のグリッド ガターを調整するにはどうすればよいですか?
Material Design Liteのグリッドシステムのガター幅の設定方法、
mdl で、基本的なグリッド。
これは、mdl vs ファンデーションのスクリーンショットです。
ガター幅をゼロに固定するにはどうすればよいですか?
フィドルをセットアップし、
アップデート：
ドキュメントを掘り下げた後、クラスが存在します
mdl-cell--stretch
セルを縦に伸ばして親を埋めます
このようにグリッドを変更しますが、それでも問題ありません!