問題タブ [jasny-bootstrap]

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 投票する
2 に答える
1154 参照

javascript - 別の要素のトリガー クリックでナビゲーション バーが閉じないようにする

私は jasny ブートストラップ offcanvas navbar ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ) を使用しています。これは、ページの他の場所でクリック イベントが発生するたびに閉じます。ただし、3 つの異なる Twitter アカウント間を移動するように変更された Twitter フィードがあります。それらを切り替えるために、クリックがトリガーされます。これにより、ツイートが切り替わるたびに navmenu が閉じてしまい、それを防ぐことができないようです。

Twitterスクロールコードは次のとおりです。

私は と を適用しようpreventDefault()stopPropagation()しましたtrigger('click')が、jQuery の経験が非常に少なく、これをどこに置くべきかを推測しているだけです。

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

javascript - Clear (or change) input mask from input textbox (Using Jasny)

I wish to change the input mask on a textbox depending on the value selected on a select list. The code is:

I have tried

but get "Uncaught TypeError: $(...).unmask is not a function" error.

The documentation says '?' says 'any characters following will become optional' so I tried $("#searchCriteria").inputmask({ mask: '?', placeholder: '' });

with no success.

It does appear that once the mask has been set, it cannot be changed or cleared, but I'm sure there is a way.

I have also tried $("#searchCriteria").unbind();

Which cleared the mask, but would then not set it to anything else.

EDIT: I am not tied down to using Jasny, any other suggestions welcome :)

The requirement I'm trying to fulfil is 'Change an input mask on an input textbox according to the selection in a dropdown list'.

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

twitter-bootstrap - Jasny Bootstrap の画像アップロード -- インスタント プレビューはどのように実装されていますか?

jasny は画像をサーバーにアップロードしますか? それともローカルファイルですか?ローカル ファイルの場合、ブラウザーがプライベート ファイルにアクセスできるということですか?

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

javascript - Laravelバリデーターで使用する前にjasny入力マスクをクリアするには?

ユーザーの携帯電話番号を取得するフォーム フィールドがあります。

jasny 入力マスクを使用してユーザーがデータを入力するようにガイドしましたが、携帯電話番号を999999999の形式でデータベースに保存する必要があります (0 とスペースなし)。

ajax を使用して serialize() 関数によってサーバーにデータを送信するため、関数またはメソッドを jasny 入力マスクに変更または追加しない限り、クライアント側スクリプトを使用して入力値を変更したくありません (このようなフォーム フィールドが多数あります)。そのようなすべての分野で使用するために!

入力された値をサーバー側で取得し、それを Laravel 5 のモデル属性に割り当てたいので、ユーザー モデルでアクセサーとミューテーターを宣言して、携帯電話番号を設定および取得します。

それはうまく機能しますが、Laravel検証を使用してそれが一意のフィールドであることを示したい場合、機能しません。コードの平和は次のようなものです:

エラーが発生します: SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry

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

html - Bootstrap/Jasny の "offcanvas" サイドバー メニューがページのコンテンツをフリーズさせる (つまり、スクロールできない)

フィドル。

これは文字通り、ここにある Jasny の「Off Canvas Reveal」デモです。私がしたことは、スクロールバーが必要になるようにページのコンテンツを拡張することだけでした。

ハンバーガー メニューをクリックすると、ページのコンテンツがフリーズしてスクロールできなくなります。この動作を修正するにはどうすればよいですか? メニューが出ている間もページをスクロールし続けたい。

CSS:

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

angularjs - Jasny ブートストラップ オフキャンバス メニューがモバイルで閉じない (iPhone 6 Chrome)

Jasny Bootstrap の offcanvas プラグインを使用してメニューを実装しています。デスクトップブラウザで期待どおりに動作します。ただし、モバイル (正確には iPhone 6) では、ユーザーがメニューの外側をクリックしても、メニューは閉じません。デスクトップ ブラウザでは、オフキャンバス メニューが表示されているときに、メニュー領域の外側をクリックすると、メニューが閉じます。これはバグですか、それとも予期された動作ですか?

付属の Jasny Bootstrap メニュー サンプルを使用して、デスクトップ Chrome と iPhone Chrome を比較してこの問題を再現しました。

http://www.jasny.net/bootstrap/examples/navmenu-push/

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

ruby-on-rails - Carrierwave 組み込みの複数ファイル アップロードを Jasny Bootstrap ファイル アップロード プレビューと統合する

Carrierwave 組み込みの複数ファイル アップローダーを使用するアプリがあります。Jasny の Bootstrap File Input プラグインを使用して、基本的な画像のプレビューと管理 (選択した画像を削除できる必要があるだけ) を実装しようとしていますが、うまくいきません。

1 つの画像では機能しますが、複数では機能しません。

私のモデル:

私のフォーム:

次のいずれかを行います。

a. ユーザーが各画像を選択してプレビューを表示し、Jasny のプラグイン コントロールを使用して削除できるように、5 つの入力を表示します。

また

b. ユーザーが複数選択してアップロードしようとするファイルごとに 5 つのプレビューを生成する 1 つのボタンを表示します。

「a」の問題は、5 つの f.input :images を作成する必要があり、フォームが送信されたときに機能しないことです。

「b」の問題は、最初の画像のプレビューのみが表示され、コントロールが最初の画像でのみ機能することです。

現在、Carrierwave の実装を変更することはできないため、その構成で作業する必要があります。通常の CarrierWave アップロードを使用するために、新しいモデルの AdImages を実装できません。

何か案は?CarrierWave の組み込みの複数アップロード機能を使用してプレビューを表示する他のプラグインまたは他の方法の提案を受け入れます。

編集: 知らない人のために説明すると、CarrierWave はデータベースに JSON 列を作成して、画像ファイルパスを保存します。そのため、フォームに :image[1] を手動で挿入しようとしました。

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

css - Bootstrap レスポンシブ テーブルが iOS デバイスで水平方向にスクロールしない

次のマークアップを含むテーブルがあります。

ドキュメントにあるように、私のテーブルは水平方向にスクロールできるはずです。Chromeのデバイスエミュレータを使用すると機能します。ただし、実際の iPhone (この場合は iPhone 5s - iPhone 6 でもテスト済み) を使用して試してみると、テーブルを水平方向にまったくスクロールできません。デフォルトでビューポートに表示されている最後の列を見ることができますが、横にスクロールすることはできません。iPhoneのクロムとサファリで試してみましたが、同じ動作になりました。

を追加しようとしました-webkit-overflow-scroll: touchが、問題は解決しませんでした。overflow-x: scrollまた、デフォルトの代わりに手動で追加しようとしましautoたが、役に立ちませんでした。

それが問題かどうかはわかりませんが、 jasny bootstrapによるブートストラップ プラグイン offcanvas も持っており、iPhone でそのサイド メニューを垂直方向にスクロールすることもできません。エミュレーターではすべて機能しますが、実際には失敗します。

ひょっとしたら、この二人は何かで繋がっているのかもしれません。

どんな助けでも大歓迎です。

編集:

Androidフォンでテストしたところ、テーブルを水平にスクロールできるようです。ただし、Androidでもサイドメニューを縦にスクロールすることはできません。これらの問題が相互に関連していないことを意味していると思います。

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

javascript - jasny bootstrap offcanvas が電話でスクロールしない

jasny bootstrapアドオンを使用してサイドメニューを作成しました。マークアップはかなり単純です。

問題は、電話ではスクロールできないことです。スクロールしようとすると、うまくいきません。

iOS シミュレーターと Web インスペクターを使用して深くチェックし、いくつかのイベントをバインドしようとしていました。scrollイベントをにバインドしようとしました.sidemenuが、このイベントはトリガーされませんでした。touchstart次に、イベントをバインドしようとしましたが、期待どおりに機能しました。私のタッチは認識しますが、スクロールジェスチャを認識しないということですか?

なぜそれが機能しないのですか?