2012-03-14 1 views
0

私はいくつかの段階的なオンライン手順を作成しようとしています。ユーザーが進むにつれて完了する手順を確認してほしいです。チェックリスト用のjQueryプラグインはありますか?

理想的には、各ステップの横にチェックボックスがあります。彼らがそれをクリックすると、そのステップがクロスアウトされ、完了したものとして表示されます。

このようなプラグインはありますか?

+2

プラグインが必要ですか?チェックボックスのライブイベントで1行のjavascriptを使用するだけで、次の_div_または_p_などにクラスを適用することができます(取り消し線のスタイルで)。 –

答えて

1

本当にプラグインは必要ありません。あなたがこのマークアップを持っているとしましょう:

<ul> 
    <li><input type="checkbox">Step 1</li> 
    <li><input type="checkbox">Step 2</li> 
    <li><input type="checkbox">Step 3</li> 
    <li><input type="checkbox">Step 4</li> 
</ul> 

これがチェック時にアイテムを三振、いつチェックを外し、それを削除します:

$('[type="checkbox"]').click(function(){ 
    var element = $(this).parent(); 
    if ($(this).is(':checked')) { 
     element.wrap('<del>'); 
    } else { 
     element.unwrap('<del>'); 
    } 
}); 

はデモ:http://jsfiddle.net/awMhq/

ちょうどあなたが正しいCSSを持っていることを確認してください<del>のために設定してください。そのような線で表示されます。del {text-decoration: line-through; color:#f00}

1ページ/ステップから進捗を保存するために、あなたにとって何が意味があるかを決めることができます。

+0

これはかなりクールです!しかし何か言及するのを忘れてしまった。ユーザーの設定を覚えてチェックリストを必要とするので、一定の期間にわたってチェックリストを使用することができます。それはクッキーで設定されますか?これは本当に複雑ですか? – Gregg

+0

それはあなたのアプリケーションに完全に依存する部分であり、プラグインはあなたのために推測することができません。私はあなたがクッキーやデータベースを使用すると仮定します。明確な仕様がなければ、それ以上のことは言い難い。これらのオプションのいずれかについて学習するために利用できるリソースがたくさんあります。私はいくつか見つけることができるかどうかを見てみましょう...これは匿名ユーザーか登録ユーザーのためのものですか?データの保存期間、データの保存期間などはどれくらいですか? –

+0

これは匿名ユーザー向けで、少なくとも1週間は設定を保存したいと考えています。データは単なるテキスト文字列です。基本的なステップバイステップの説明は、彼らがそれらをチェックアウトすることができます。 – Gregg

関連する問題