jQuery リストの順番を入れ替える


Lorem Ipsum

“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”

  • What is Lorem Ipsum?
  • Why do we use it?
  • Where does it come from?
  • Where can I get some?
  • The standard Lorem Ipsum passage, used since the 1500s
  • Section 1.10.32 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC
  • 1914 translation by H. Rackham
  • Section 1.10.33 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC


今回はリストの順番を入れ替える動きをjQueryで実装しました。
jQuery-uiのサイトを見れば、ある程度自由にサンプルを実装できそうです。

コードは以下の通りです。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<h2>Lorem Ipsum</h2>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
<ul id="sortable">
<li>What is Lorem Ipsum?</li>
<li>Why do we use it?</li>
<li>Where does it come from?</li>
<li>Where can I get some?</li>
<li>The standard Lorem Ipsum passage, used since the 1500s</li>
<li>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</li>
<li>1914 translation by H. Rackham</li>
<li>Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</li>
</ul>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>

jQuery オブジェクトを掴んで拡大、縮小させる

サイズが変わるよ

シンクロもするよ


今回はWordpressにjQuery-uiのcssを取り込むことに苦労しました。結局、jQueryのcdnからリンクさせることでうまくゆきました。
テーマエディタのhedder.phpに下記のコードを追加することでCSSを反映させることができました。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

コードは以下の通りです。


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
</script>
<div id="resizable" class="ui-widget-header">
<p class="ui-state-active">Resize</p>
</div>
<div id="also" class="ui-widget-content">
<p class="ui-widget-header">will also resize</p>
</div>
<script>
$( function() {
$( "#resizable" ).resizable({
alsoResize: "#also"
});
$( "#also" ).resizable();
} );
</script>

jQuery オブジェクトを掴んで(ドラッグして)自由に動かす


自由自在にドラッグすることができます。

自由に動きます

今回は、オブジェクトを掴んで自由に動かす機能をjQueryで実装しました。

jQueryの公式サイトだけを見て実装することができたので、自分としては成長を感じています。只、このオブジェクトを掴んで動かす機能ですが実際のウェブサービスでの利用シーンが浮かばないので今一つ「覚えてやったぜ!」感がありません。まぁ、User Interfaceの使い方を覚えたというだけで十瓶な進歩かと。

コードは以下の通りです。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
<h3>自由自在にドラッグすることができます。</h3>
<div id="draggable" class="ui-widget-content">
<p class="draggText">自由に動きます</p>

jQuery ボタンをクリックしたらテキストをフェードイン、フェードアウトさせる

このテキストはフェードインしたりフェードアウトしたりします。

jQueryでボタンを押下したらテキストがフェイドインしたりフェイドアウトしたりする動きを実装しました。

コードは以下の通りです。


<h3 id="text">このテキストはフェードインしたりフェードアウトしたりします。</h3>
<button id="toggle">トグルします</button>

<script>
$("#toggle").click( function() {
if($("#text").css("display") == "none") {
$("#text").fadeIn("slow");
} else {
$("#text").fadeOut("slow");
}
})
</script>

jQuery クリックしたらオブジェクトを変化させる

WordPressではjQueryが最初から使えると聞いたので、本当に使えるのか試してみました。四角を消すのと円を大きくするのはjQueryで実装しましたが、「元に戻す」ボタンだけはjQueryでどうして良いか分からなかったのでJavaScriptで実装しました。

この四角をクリックしたら消えます。

この円をクリックしたら大きくなります。

元に戻す