4

私は、ユーザーイベントを処理するために多くのJavascriptを使用して、非常に動的なWebベースのアプリケーションを構築しています。私は物事をもう少し使いやすくする過程にあり、今までにない問題に遭遇しました。

私はjQueryを使用しているので、それを考慮に入れてください。前もって感謝します。

次のように定義されたボタン要素のセットがあります。

<input type="button" title="My 'useful' text here." disabled="disabled" />

私はこれらのボタンをデフォルトのスタイルで持っています：

div#option_buttons input {
     cursor: help;
}

次に、jQueryを使用して、選択ボックスでクリックイベントとして次のようなものを実行します。

window.current_column = '';
$('select.report_option_columns').live('click', function() {
    var column = $(this).val();
    if ( column == window.current_column ) {
        // clear our our previous selections
        window.current_column = '';
        // make this option no longer selected
        $(this).val('');

        $('div#option_buttons input').attr('disabled','disabled');
        $('div#option_buttons input').attr(
            'title',
            'You must select a column from this list.'
        );
        $('div#option_buttons input').css('cursor', 'help');
    } else {
        window.current_column = column;
        $('div#option_buttons input').attr('disabled','');
        $('div#option_buttons input').attr(
            'title',
            'Add this option for the column "' + column + '"'
        );
        $('div#option_buttons input').css('cursor', 'default');
    }
});

したがって、ご覧のとおり、選択ボックス（ここには表示されていません）で列が選択されている場合、ボタンを有効にして、ボタンのように動作させます（自分のクリックイベントを使用）。ただし、列が選択されていない場合（デフォルトのロードを含む）、ボタンを無効にします。私のユーザビリティ開発者は、軽量のツールチップとしてtitle属性をネイティブにレンダリングすることで、ボタンを有効にするために何ができるかについて、ユーザーに微妙なコンテキストの手がかりを提供したいと考えていました。私はすでにアプリケーションの他の領域でこれを行っています（これはプロジェクトのクレイジーな獣です）。ユーザビリティテストでは、カーソルが「ヘルプ」に変わったときに、ユーザーがカーソルを合わせることができることを少なくとも認識できることが示されています。要素を作成し、何が起こっているかについての情報を取得します。

しかし、フォーム要素を使用してこれを試したのはこれが初めてです。どうやら、私がdisabled = "disabled"を要素に入れると、それはtitle属性を完全に無視し、ツールチップを表示しません。

今、私はいくつかのオプションがあることを知っています（少なくとも私が考えることができるもの）：

  1. もう少し堅牢な独自のカスタムツールチッププラグインを作成します。
  2. 要素を「無効」にしないでください。ただし、無効としてスタイルを設定してください。これは私が（開発のしやすさの点で）最も頼りにしていたオプションでしたが、私はこれをしなければならないのが嫌いです。
  3. ボタンを有効のままにしますが、クリックイベントは処理しません。論理的に本来のスタイルのままにしておくのが好きなので、このオプションはあまり好きではありません。無効にされたボタンは最も正確に「感じ」、無効にされたボタンの外観はすぐに無効にされたボタンとして認識されます。

それで、それでも、私は何かが足りないのでしょうか？思いもよらなかった簡単なことはありますか？グーグル検索はこのトピックで私に失敗したので、私はこれにいくつかの新鮮な目を得るためにStackOverflowでこれを投げると思いました。

**編集**

私はちょうどこの同じトピックに関する別のStackOverflowの質問を見つけましたが、その人は彼の問題を説明する非常に異なる一連の用語を使用していました（おそらく私がそれを見つけられなかった理由）。

質問のURLは次のとおりです。Firefoxは無効な入力フィールドにツールチップを表示しません

その質問に対する両方の答えはかなり良いですが、他に誰か提案があるかどうかを確認したいと思います。多分もっとjQuery特有のもの？再度、感謝します。

4

4 に答える 4

7

同様の問題が発生し、無効になっている要素を別の要素で囲み、そのdivを操作しました。tipTipを使用して、無効になっているチェックボックスのツールチップを表示していました。

<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>
于 2011-07-23T03:53:55.290 に答える
3

非常に堅牢な検証プラグインがいくつかあります。それらはjQueryプラグイン領域にあります。

私がたまたま大好きで、最近流行しがちなもう1つのオプションは、「Tipsy」プラグインを使用することです。あなたは少し'？'を置くことができます テキストフィールドの右側にあるアイコンと、それらの上にマウスを置くと、「Facebookのような」ツールチップが表示されます。このプラグインは非常にシャープで、私はそれを強くお勧めします。

幸運を！

于 2010-01-20T20:05:35.290 に答える
1

タイトルがないという問題が解決するかどうかはテストしていませんが、jqueryを使用してボタンを無効にすることもできます。$(document).ready()

よろしく、ハーパックス

于 2010-01-20T19:45:04.540 に答える
1

それでもデザインが完全に壊れない場合は、ボタンを「span」、「p」、...タグに「My'useful'texthere」で置き換えることができます。

そして、ユーザーが正しい動きをしたときにのみ、ボタンと交換してください。

于 2010-01-20T20:46:42.763 に答える