問題タブ [zurb-foundation-5]

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.

0 投票する
3 に答える
2450 参照

alert - Zurb Foundation 5 個人用ボタンでアラート ボックスを閉じる

アラートボックスを「拡張」して、たとえば確認ボックスやプロンプトボックスを表示したいのですが、コールバック関数を近くで使用して、たとえばデータベースに情報を保存したいと考えています。

私のアラートボックスの構造は次のようになります:

.alert-box-close私が抱えている問題は、クラスがクラスのようにどのように機能する.closeかです。

助けてくれてありがとう

0 投票する
0 に答える
1105 参照

ruby-on-rails - simple_form gem を使用した Foundation 5 スイッチ

このhttp://foundation.zurb.com/docs/components/switch.htmlに似ていない結果を達成しようとしていますか? Foundation 5 スイッチ クラスの使用

私が抱えている問題は、 simple_form が同じ名前の非表示の入力を作成するため、次のコードを使用すると目的の結果が得られないことです

以下のHTMLがかなり生成されます

0 投票する
2 に答える
10111 参照

jquery - Foundation 5 Datepicker の失敗、またはそれは私です

OK、私は SASS で FOundation 5 を実行しています。Peter Beno による Datepicker をここからダウンロードしました。

https://github.com/najlepsiwebdesigner/foundation-datepicker

ファウンデーション 4 用に作られていることはわかっていますが、ファウンデーション 5 で機能しない理由はわかりません。ええ、javascript は私の頭を少し超えていますが、それが私が他の誰かの日付ピッカーを使用している理由です。 .

この日付ピッカーを Foundation 5 に実装するために行った手順は次のとおりです。

1)foundation-datepicker.jsの名前をfoundation.datepicker.jsに変更し、JSバンドルに含めました。私のページは現在、このスクリプトをロードしています。

2) foundation-datepicker.css の名前を変更_datepicker.scssし、sass フォルダーに含めました。現在、縮小されたcssファイルに吸い込まれていることを確認しました。

次に、自分のページで次のコードを使用しました。

asp.net mvc からこれに出力するもの:

また、jQueryuiの呼び出し後にこれを追加しました

これがドキュメントページです。彼が Foundation 5 でこれを機能させるのを手伝ってくれれば、更新してより明確にします.

http://foundation-datepicker.peterbeno.com/example/example.html

そして、Chromeのくだらない日付ピッカーを避けるために、Mozillaでテストしました。私は何を間違っていますか。Foundation 5と競合している可能性が最も高いですか。jQueryUIベースで使用できる、多少似ている別の日付ピッカーはありますか。

0 投票する
2 に答える
4461 参照

orbit - 要素を検査するまで Zurb Foundation の Orbit Slider が機能しない

Zurb Foundation 5 と Orbit スライダーを使用してサイトを構築しています。モーダルにスライダーを設定しましたが、要素を検査するまで画像の上部とスライド ナビゲーションのみが表示され、その後スライダー全体が表示されます。ヘルプ?

サイトはこちら: http://www.parker-gibson.com/testing/foundation/index.html "This is what I do" セクションの最初の画像をクリックすると、問題のスライダーが表示されます。前もって感謝します!関連するコードは以下のとおりです...

0 投票する
2 に答える
7885 参照

html - Zurb Foundation グリッドが最後の列を左に移動

まったくハッキングせずにグリッドを利用する良い方法を見つけようとしています。

私がやりたいのはsmall-4、一番上の行に 3 つの幅のグリッド (それぞれに別名) があり、2 番目の行では列を一致させたいのですが、small-4要素は 2 つだけです。

通常、答えは1つを実行してから1つ実行することですsmall-4small-8、入力がwidth: 100%これに設定されているため、うまくいきません。

これを箱から出して行う方法はありますか?オフセットについては知っていますが、それは右に移動するように設定されたアイテムに対してのみ機能します。

現時点では、2 つsmall-4の div で右の div が右に浮いており、上の div と一致していません。さらに追加することもできsmall-4ますが、これについてはベスト プラクティスに従いたいと思います。

ここに私のコードがあるので、私が何を意味するかを見ることができます:

0 投票する
1 に答える
418 参照

javascript - Zurb Foundation のハッシュタグは、URL のブックマークまたはバックリンクのモーダルを表示します

ZURB Foundation 5 を JS Script 'Reveal Modal' と共に使用しています。私がやりたいのは、URL 内の URL ハッシュタグでモーダル表示できるようにすることです。

引き金

Revealモーダル

ハッシュタグは a href では必要ありませんが、この背後にある理由は、が使用されている場合は.no-js、java-script が検出されない場合にリンクがほとんど機能しないことを意味します。display:nonedisplay:block

必要なソリューション

<a href>モーダル ボックスを表示するときに URL の更新内でハッシュ タグを使用しているため、これは問題ではありませんが、誰かがブックマークを付けたり、ハッシュタグ付きのリンクを共有したりすると、ボックスが自動表示されるという解決策が必要です。自体。

たとえば、Bits and Bobsをクリックすると、URL が表示さsitename.com/#bits-n-bobsれ、モーダルが表示されます。私が望むのは、誰かがハッシュタグを使用してそのページにアクセスしたときにハッシュタグを使用してドメインをリンクすると、Click を必要とせずにJavaScript を使用して Reveal Modal を開くことです。

これは JavaScript で行うのはかなり簡単なことだと思いますが、それは私の最も弱い分野の 1 つであり、助けを借りたり、少なくとも正しい方向に向けてくれたりすることに感謝します。

0 投票する
2 に答える
1444 参照

html - Zurb Foundation 5: グリッド列のスタッキング

私は財団に不慣れで、グリッドの使用方法に関する基本的なアイデアしかありません。

モバイル/小さな画面で表示する場合、これらの 3 つの列を積み重ねる必要があります (「モバイル」画像を参照)。 携帯画面

大きな画面では次のようになります。

非モバイル画面

これが私の現在のコードです。それは私が望んでいたものではなく、混乱し始めています。

0 投票する
2 に答える
2659 参照

css - Foundation 5 グリッド行のネスティング ネガティブ マージン

Zurb Foundation 5 でこの奇妙な問題が発生しました。行を行内にネストするたびに、負のマージンが生成され、グリッドから放り出されます。私のコードのマークアップの例は次のとおりです。

そして、これがその財団が生成するコードです。

この動作を防ぐにはどうすればよいですか? マークアップに何か問題がありますか、それとも基盤の scss をオーバーライドする必要がありますか (ただし、デフォルトのスタイルをオーバーライドしたくありません)。