0

私は、4つのミニタスクで構成されるタスクの流れを定義する必要があるプロジェクトに取り組んでいます。その上で、エンドユーザーがどのミニタスクを行っているかを示す必要があります。このために、すべてのタスクにイメージ タグを使用しています。

 <img>1</img>
 <img>2</img>
 <img>3</img>
 <img>4</img>

cssまたはjqueryで関連付けるが、画像を使用しないなど、これを行う他の方法はありますか。どんなアイデアも評価されます。前もって感謝します。

4ステップタックのイメージ

4

3 に答える 3

1

この種のものには JQuery UIを使用することをお勧めします。JQuery UI CSS フレームワークは、ほとんどの基本的な Web アプリケーションを満たすのに十分な機能を備えています。

次のようなタスクラベルのレイアウトを簡単に定義できます

.tasklabel{
    width:80px;
    height:40px;
    float:left;
}

また、コードを変更せずに、テーマをカスタマイズしてアプリでテストできる JQuery UIのThemerollerもあります。すぐに始められる簡単なデモを作成しました。

于 2013-05-28T07:40:18.847 に答える
1

画像を<div>s に置き換えてbackground-image(またはbackground-color単純な塗りつぶしが必要な場合は) css ルールを使用できます。

HTML:

<div class="task">1</div>
<div class="task">2</div>
<div class="task">3</div>
<div class="task">4</div>

CSS:

.task {
    /* image */
    background-image: url('/path/to/image');
    /* or color */
    background-color: #FF0000;
    /* or both */
    background: url('/path/to/image') no-repeat 0 0 #FF0000;
}
于 2013-05-28T07:22:34.770 に答える