カテゴリー: jQuery

jQuery によるCSSの操作

今回は、jQuery のライブラリの eachメソッドを使ってループをかけ、DOM(Document Object Model)の Class を操作してリストのバックグラウンドのCSSを変更する方法をご紹介します。

 

<head>
<style type="text/css">
　　.even { background-color: #ffffff; }
　　.odd { background-color: #cccccc; }
　</style>
<script src="./jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
　　(function ($) {
　　　　$(document).ready(function() {
　　　　    $("ul > li").each(function(i) {
　　　　    if (i % 2 ==1) {
　　　　　　　　$(this).addClass("odd");
　　　　　　    }
　　　　　　    else {
　　　　　　　　    $(this).addClass("even");
　　　　　　    }
　　　　    });
　　    });
　　}) (jQuery);
</script>
</head>
<body>
　　<h2>Plainswalker</h2>
　　　　<ul>
　　　　　　<li>Ajani</li>
　　　　　　<li>Jace</li>
　　　　　　<li>Liliana</li>
　　　　　　<li>Chandra</li>
　　　　　　<li>Garruk</li>
　　　　　　<li>Elspeth</li>
　　　　　　<li>Tezzeret</li>
　　　　　　<li>Sorin</li>
　　　　　　<li>Nahiri</li>
　　　　　　<li>Nissa</li>
　　　　</ul>
</body>

jQuery からDOM を操作する方法として応用できるのではと思いました。
訂正）Plainswalker のスペルミスを訂正

jQuery のアコーディオン

今回は、フロントエンドで頻繁に使われる、jQuery のパーツ、アコーディオンのパターンをおさらいしました。

https://stuffy.mydns.jp/~gusachan/javascript/accordion.html

アコーディオンも項目を複数展開できるものから、閉じるボタンが付いたものなどヴァリエーションが豊富なんですね。

まだ、CSS を勉強していない自分は「いや～キツイっす。」

jQueryクックブック 大型本 – 2010/8/18
jQuery Community Experts (著),‎株式会社クイープ (翻訳) -Amazon.co.jp

訂正）アコーディオンの高さを変える、accordion.css のプロパティ、height を訂正して再送しています。

.accordion.dd {
        color: #666;
        font-size: 11px;
        overflow: hidden;
        height: 70px; ← 270pxから70px に

Windows10 ログイン画面の壁紙

Windows10 のログイン画面の壁紙は、

ASCII.jp：Windowsの起動時に表示される「きれいな写真」は何？

にあるとおり、「%USERPROFILE%\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets」に450kB以上のファイルに拡張子なしで .jpg ファイルとして保存されています。[このファイルを開く方法を選んでください。] でInternet Explorerなどのアプリでファイルを開くと綺麗な写真が閲覧できます。

「名古屋城」（画像をクリックするとスライドショーが閲覧できます。）

jQuery の fullcalendar

jQuery カレンダーfullcalendarを使ってみました。

参考URL: 多機能のカレンダーを実装するjQueryプラグインのFullCalendar

リンク先 Download|FullCalender からzip ファイルをダウンロード、解凍。最新版は、fullcalendar-3.2.0.zip （2017年3月7日現在）

カレントディレクトリに./fullcalendar.min.css, ./fullcalender.js, ./lib/moment.min.js, ./lib/jquery.min.js, ./lib/jquery-ui.min.js, ./fullcalendar.js, ./locale/ja.js を以下の配置でindex.html を作ります。

<html>
<head>
<meta charset='utf-8' />
<link href="./fullcalendar.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./lib/moment.min.js"></script>
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="./fullcalendar.min.js"></script>
<script type="text/javascript" src="./locale/ja.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

demos ディレクトリの selectable.html ではイベントを書き加えることができます。しかし、データとして保存するにはPHPと連携してJsonデータの受け渡しを実装しないといけないので難易度高めに感じました。
Google カレンダー、使おう！(直球)

ちなみにシェルスクリプトでは、

$ cal [-y] month year

参考URL: http://webcache.googleusercontent.com/search?q=cache:Ui3UAAmc3nMJ:sookibizviz.blog81.fc2.com/blog-entry-344.html+&cd=3&hl=ja&ct=clnk&gl=jp

jQuery の記述

jQueryを使ったスライダーの作り方とその仕組み

のコピペでスミマセン。センセンシャル。

jQuery はDOMが操作可能になるまで待機させるために、ready()メソッドに入れ子で記述すると良いとのこと。これだけは伝えたかった。

<script type="text/javascript">
$(document).ready(function() {
・・・（jQueryの記述
});
</script>

https://stuffy.mydns.jp/~gusachan/javascript/slider.html