Geekly Articles each Day

JavaScriptを使用しない分割ボタンドロップダウン

すべての人に良い一日を！

最近では、レコードのリストに対して何らかのマルチアクションコントロールを作成する必要がありました。 スプリットボタンドロップダウンの使用がすぐに思い浮かびました。 この場合、アクションのドロップダウンリストと組み合わされたフォームの送信ボタン。 このようなコントロールは、最新のインターフェイスによく見られます。 Twitter Bootstrapなどのアセンブリに含まれる既製のソリューションもあります。

ただし、ブートストラップのような実装は、いくつかの理由で好きではありません。

これらの理由から、このようなコントロールの独自のバージョンを閉じることにしました。 すべてのアイデアを実装することは不可能だったため、このメソッドはjs-solutionsの完全な代替物であるとは主張していません。 繰り返しになりますが、私は有用な人にのみ投稿します。

実際、このソリューションは、「 チェックボックスとラジオの簡単なカスタマイズ」という記事で私が提示したアイデアに基づいています。

以下の例は単純化されているため、完全にクロスブラウザーではない可能性があることにすぐに注意してください。 その中で、スタイルの完全な計算、プロパティのブラウザープレフィックスの使用、ハーフフィルターなどに集中しないことにしました。 オプションは間違いなく完全に動作していますが。
コードだけが先に進みます。

マークアップ

< button id = "action" >アクション< / / button >
< label for = "action" > ＆＃x25bc;
< ul >
< li title = "選択した編集" > < 入力 id = "編集" タイプ = "ラジオ" 名 = "アクション" 値 = "編集"非表示チェック / > < ラベル = = "編集" >編集< / ラベル > < / li >
< li title = "Delete selected" > < input id = "delete" type = "radio" name = "action" value = "delete" hidden / > < label for = "delete" > Delete < / label > < / li >
< li title = "既読としてマークを選択" > < input id = "read" type = "radio" name = "action" value = "read" hidden / > < label for = "read" > Read < / label > < / li >
< li title = "スパムとして選択されたマーク" > < 入力 ID = "スパム" タイプ = "ラジオ" 名 = "アクション" 値 = "スパム"非表示/ > < ラベル = = "スパム" >スパム< / ラベル > < / li >
< / ul >
< / ラベル >

スタイル

ボタン、ラベル{ カーソル ： ポインタ ; }
ボタン、
ボタン+ラベル{
フロート ： 左 ;
表示 ：インラインブロック 。
マージン ： 0 ;
背景 ： ＃659A22 repeat-x ;
背景画像 ： -webkit-linear-gradient （ top 、 ＃9AC92C 、 ＃659A22 ） ;
背景画像 ： -o-linear-gradient （ top 、 ＃9AC92C 、 ＃659A22 ） ;
背景画像 ： -moz-linear-gradient （ top 、 ＃9AC92C 、 ＃659A22 ） ;
背景画像 ：線形勾配（ 上 、 ＃9AC92C 、 ＃659A22 ） ;
境界線 ： 1px 固体 rgba （ 0、0、0、0.0976563 ） ;
border-bottom-color ： rgba （ 0、0、0、0.246094 ） ;
ボーダートップカラー ： rgba （ 255、255、255、0.148438 ） ;
色 ： #fff ;
font-size ： 13px ;
カーソル ： ポインタ 。
フォントファミリ ： 'Helvetica Neue' 、 Helvetica 、 Arial 、 sans-serif ;
行の高さ ： 16px ;
パディング ： 5px 10px ;
text-shadow ： ＃659A22 1px 1px 0px ;
-webkit-transition ： 0.1sリニアall ;
遷移： 0.1秒線形すべて。
vartical-align ： middle ;
}
ボタン：ホバー 、ボタン+ラベル：ホバー {
テキスト装飾 ： なし ;
背景色 ： ＃659A22 ;
background-position ： 0 -15px ;
-webkit-transition ： バックグラウンド位置 0.1sリニア。
-o-transition ： バックグラウンド位置 0.1sリニア。
-moz-transition ： バックグラウンド位置 0.1sリニア。
遷移： バックグラウンド位置 0.1s線形;
}
ボタン{ border-top-left-radius ： 3px ; border-bottom-left-radius ： 3px ; }
ボタン：アクティブ {
色 ： #fff ;
box-shadow ： インセット 0 2px 4px rgba （ 0、0、0、0.15 ） 、 0 1px 2px rgba （ 0、0、0、0.05 ） ;
}
ボタン+ラベル{
border-top-right-radius ： 3px ;
border-bottom-right-radius ： 3px ;
位置 ： 相対 ;
}
ボタン+ラベル：ホバー > ul {
可視性 ： 目に見える ;
不透明度： 1 ;
マージン ： 0 ;
}
ul {
可視性 ： 隠された ;
位置 ： 絶対 ;
top ： 30px ;
右 ： 0 ;
幅 ： 90px ;
マージン ： 20px 0 0 0 ;
パディング ： 10px 0 ;
z-index ： 9999 ;
border ： 1px solid #ccc ;
border-top-clor ： #cfcfcf ;
border-image ： initial ;
背景 ： #fff ;
色 ： ＃659A22 ;
text-shadow ： なし ;
不透明度： 0 ;
box-shadow ： 1px 2px 4px rgba （ 0、0、0、0.2 ） ;
ボーダー半径： 3px ;
移行：すべての0.2秒のイーズインアウト。
-webkit-transition ：すべての0.2sのイーズインアウト;
-moz-transition ：すべての0.2sのイーズインアウト;
-o-transition ：すべての0.2sのイーズインアウト;
}

ul li {
フロート ： なし ;
表示 ： ブロック ;
ボーダー ： 0 ;
行の高さ ： 20px ;
}
ul li input [ type = "radio" ] { display ： なし ; }
ul li input [ type = "radio" ] + label {
font-size ： 14px ;
幅 ： 70px ;
表示 ： リスト項目 ;
リストスタイル ： なし 。
垂直方向の整列 ： ベースライン ;
パディング ： 2px 10px ;
}
ul li input [ type = "radio" ] + label ：ホバー 、 ul li input [ type = "radio" ] ：チェック + label {
背景色 ： ＃659A22 ;
background-repeat ： repeat-x ;
背景画像 ： -webkit-linear-gradient （ top 、 ＃9AC92C 、 ＃659A22 ） ;
背景画像 ： -moz-linear-gradient （ top 、 ＃9AC92C 、 ＃659A22 ） ;
背景画像 ： -o-linear-gradient （ top 、 ＃9AC92C 、 ＃659A22 ） ;
背景画像 ：線形勾配（ 上 、 ＃9AC92C 、 ＃659A22 ） ;
色 ： #fff ;
text-shadow ： なし ;
}
ul li input [ type = "radio" ] + label ：ホバー {
box-shadow ： インセット 0 2px 4px rgba （ 0、0、0、0.15 ） 、 0 1px 2px rgba （ 0、0、0、0.05 ） ;
}


フォームとjsを追加して送信をキャッチするデモを次に示します。このデモでは、アクション値を含むアラートが表示されます： Demo 。 したがって、まったく同じ方法で、ラジオボタンの代わりにチェックボックスを使用して複数のアクションを送信できます。

最後に

それで、何が起きて何が起きなかったのか

それは判明した：


うまくいきませんでした：



最後の段落については、明確にします。 javascriptを使用してイベントをキャッチする必要なく、ラジオボタンをクリックしてフォームの送信を実装することを望んでいました。 より正確には、 ラベルと同じ方法と「ポップアップ」効果を使用して、ボタン自体でクリックが発生するはずです。 ただし、この方法はOperaでのみ機能しました。 彼女は、 ラジオボタンに添付されたラベルのクリックと、ボタンに添付されたラベルのクリックの両方を正常に処理し、実際にフォームを送信します。 他のすべてのブラウザは面白いことをします-ボタンが押されたままで、それはbutton：activeの効果のために見ることができますが、フォームは送信されません。

実際、私には理由がわかりません。 これらは、ブラウザーによる仕様の解釈の違いでもありますが、どこかで調整しました。 誰でもアイデアがあれば、コメントで共有してください。

UPD： ibnteoからのこのような制御の実装オプションは、 ここで表示できます 。 jsのないリストアイテムをクリックしてフォームを送信する必要があり、クリックしてリストを展開する必要があるが、実際にはマークアップを心配する必要がない場合、このオプションはうまく機能します。 ibnteoに感謝します。

Source: https://habr.com/ru/post/J144469/

More articles:


All Articles