問題 × 解決策

jQuery UIで横にスライド表示する方法

問題

要素を横にスライド表示するには?

解決策

jQuery UIを読み込んだ上で「$("要素のセレクタ").show("slide", {direction: "向き"}, 速度(1秒=1000))」で要素を指定することで、要素を横にスライド表示することができます。

 

要素を横にスライド表示する

要素を横にスライド表示する方法として、jQuery UIを使って実現する方法があります。
jQuery UIで横にスライド表示する方法をご紹介します。

DEMOはこちら

スイッチ

テキスト

テキスト

CDNを利用して、jQuery UIを読み込みます。

CDNを利用して、jQuery UIを読み込みます。

<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
...
</head>

HTML

横スライドさせる要素とそれをコントロールする要素を用意します。

<div class="sideslide-box">
	<div class="label">
		<p class="text">スイッチ</p>
	</div>
	<div class="text-box">
		<p class="text">テキスト</p>
		<p class="text">テキスト</p>
	</div>
</div>

CSS


.sideslide-box{
	display: table;
}
.sideslide-box .label{
	display: table-cell;
	vertical-align: middle;
	width: 60px;
	padding: 10px;
	background-color: #fef5f2;
	border-right: 1px solid #ffffff;
}
.sideslide-box .text-box{
	display: table-cell;
	vertical-align: middle;
	padding: 10px;
	background-color: #fef5f2;
}

javascript

jQuery UIを読み込んだ上で「$(“要素のセレクタ”).show(“slide”, {direction: “向き”}, 速度(1秒=1000))」で要素を指定することで、要素を横にスライド表示することができます。

$(".sideslide-box .text-box").hide("slide", {direction: "left"}, 0);
$(".sideslide-box .label").click(function(event){
    event.preventDefault();
    if( $(this).hasClass('open') ){
        $(this).closest('.sideslide-box').find('.text-box').hide("slide", {direction: "left"}, 100);
    }else{
        $(this).closest('.sideslide-box').find('.text-box').show("slide", {direction: "left"}, 100);
    }
    $(this).toggleClass('open');
});

参照

【[jQuery]jQueryUIで横方向にスライド(上下左右自由自在)】
https://happyquality.com/2012/04/06/2060.htm

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 + 6 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧