
プログラマハック
2019.12.04
プログラマーの仕事はなくならない!プログラマーの需要を徹底解説
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
jQuery
2018.06.12
jQuery UI の accordion を利用すると、必要に応じてコンテンツを開閉することができる アコーディオンを作成することができます。
今回は、accordion の使用方法について紹介します。
1.accordion を使用してアコーディオンを作成
2.accordion のオプション
jQuery UI の accordion を使用して アコーディオンを作成します。
タイトル部分をクリックして コンテンツを開いたり閉じたりしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> <!-- $(function(){ $("#wkAcd").accordion({ header: "h4", collapsible:true, active:true }); }); //--> </script> <div id="wkAcd" style="background-color:#CCC; padding:20px 20px 10px;"> <div> <h4><a href="#">映画・興収ランキング</a></h4> <div> 1位 アバター(27.8億ドル) 2位 タイタニック(21.8億ドル) 3位 スター・ウォーズ/フォースの覚醒(20.6億ドル) 4位 アベンジャーズ/インフィニティ・ウォー(19.6億ドル) 5位 ジュラシック・ワールド(16.6億ドル) </div> </div> <div> <h4><a href="#">アルバムCD・売上枚数ランキング</a></h4> <div> 1位 Michael Jackson「Thriller」(1.1億枚) 2位 Pink Floyd「The Dark Side of the Moon」(4500万枚) 3位 Eagles「Their Greatest Hits (1971–197」(4200万枚) 4位 AC/DC「Back in Black」(4000万枚) 5位 Whitney Houston「The Bodyguard」(4000万枚) </div> </div> <div> <h4><a href="#">小説・売上部数ランキング</a></h4> <div> 1位 ディケンズ「二都物語」(2億部) 2位 J.R.R.トールキン「指輪物語」(1.5億部) 3位 曹 雪芹「紅楼夢」(1億部) 4位 J.R.R.トールキン「ホビットの冒険」(1億部) 5位 アガサ・クリスティー「そして誰もいなくなった」(1億部) </div> </div> </div>
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
上のサンプルでは オプション「 header 」「 collapsible 」「active」を設定しましたが、accordion には、以下のようなオプションがあります。
active | 最初に開いた状態にするコンテンツを指定 true:別途 collapsible を true に指定すると、全てのコンテンツが閉じられた状態となる 数値:数値(0から開始)を指定して、開いておくコンテンツを指定 (マイナスの値を指定すると 最後から遡ってカウント) 初期値:0 |
---|---|
animate | コンテンツの開閉アニメーションの動作を指定 false:アニメーションを無効化 数値:アニメーション時間をミリ秒単位で指定 String:easing の名称を指定 Object:アニメーション時間と easing の名称をオブジェクトのプロパティとして指定 |
collapsible | 全てのコンテンツを閉じることが出来るか否かを指定 初期値:false |
disabled | アコーディオンの無効化を指定 初期値:false |
event | コンテンツを開く際のイベントを指定 (複数指定する場合は イベント名を半角スペース区切りで指定) 初期値:”click” |
header | .find()を介して見出しとなる要素を指定するセレクタを指定 (対象となるコンテンツパネルは見出し要素直後の兄弟要素である必要がある) 初期値:”> li > :first-child,> :not(li):even” |
heightStyle | アコーディオンと各コンテンツパネルの高さについの制御を指定 “auto”:全てのパネルが最も高い状態になる “fill”:親要素に収まる範囲で最も高い状態になる “content”:コンテンツに合わせた高さになる 初期値:”auto” |
icons | 見出し用のアイコンを jQuery UI CSS Framework に定義されているアイコンのクラス名で指定 (false を指定するとアイコンは非表示) 初期値:{“header”: “ui-icon-triangle-1-e”, “activeHeader”: “ui-icon-triangle-1-s”} |
プログラマハック
2019.12.04
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
スキルアップ
2019.11.29
今回は、20代フリーターが正社員面接で採用されるための、面接攻略法をご紹介します。「正社員面接って何を聞かれるの?すごく緊張する」そう感じる20代フリーターは多くいます。正社員面接は、アルバイトでの面接と大きく異なります […]
スキルアップ
2019.11.27
エンジニアを目指してプログラミングスクールを検討中の方で「プログラミングスクールに通っても時間と費用を無駄にするのではないか」と不安のある方はいませんか? もちろん、プログラミングスクールに通いさえすれば誰でもエンジニア […]
プログラマハック
2019.11.22
今回は、未経験でプログラマ転職を成功させるためのおすすめポイントについて、ご紹介します。「手に職を付けたいからプログラマになりたい」と思った時、「未経験で本当にプログラマになれるの?」「プログラマになるためには、どうした […]
スキルアップ
2019.11.20
ITエンジニアの職種別平均年収とITエンジニアが年収を上げる方法を紹介します! IT業界で働く人々は高収入のイメージがありますが、実際はどうなんでしょうか。 今回は、ITエンジニアの職種別の平均年収とITエンジニアが年収 […]
スキルアップ
2019.11.15
「フリーターから正社員になりたい!」と思って、懸命に就職活動しているのに、中々内定がもらえず、「フリーターの就職は難しいな」と悩んでいませんか?今回は、そんなフリーターの方が、自分の長所やフリーター経験を活かして、いち早 […]
INTERNOUS,inc. All rights reserved.