2013-01-01から1年間の記事一覧
簡単なページ内リンクのプラグインを作成しました。 The Link In A PageHTML <body> <div id="container"> <header> <h1>The Link In A Page</h1> </header> <nav> <ul> <li class="ex01 link_button" data-from="ex01"> <p><a href="#ex01">ex01</a></p> </li> <li class="ex02 link_button" data-from="ex02"> <p><a href="#ex02">ex02</a></p> </li></ul></nav></div></body>
簡単なプラグインを作成しました。 OmitjQuery ;(function($){ $.fn.omit = function(cnt){ var elem = $(this); var mark = '...'; elem.each(function(){ var str_origin = $(this).text(); //文字数でカット var str = str_origin.slice(0,cnt); //タイト…
参考リンク → http://monopocket.jp/blog/css/2866/指定の要素のスタイルに例えばp要素であれば p{ width: 200px; margin: 0 auto; //以下３つのcssを適用する text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } これで、幅200px以上の分…
tooltip簡単なツールチップのプラグインを作成してみました。 data-tooltipで対象の要素を指定し、ホバーしている最中にマウス付近に表示されます。 ;(function($){ $.fn.toolTip = function(options){ var elem = $(this); var opts = $.extend({},$.fn.too…
Manipulation append() 要素内部にコンテンツを追加する appendTo() 要素の中身を他の要素に追加する prepend() 要素内部の先頭にコンテンツを追加する prependTo() 要素の中身を他の要素に追加する after() 各要素の後ろにコンテンツを追加する before() 各…
Traversing prev() 一つ前の要素 prevAll() 前の要素すべて siblings() 要素の兄弟すべて返す andSelf() 現在の要素に加え、一つ前の要素を選択する end() 現在の選択から、一つ前の状態に戻す
RSSの練習でいくつかのRSSをまとめたページを作りました。http://yuto-m.sakura.ne.jp/admin/assignment/php/rss/以下コードです。 channel->item as $item) { if($i++ > 4) { break; } $suntry[$i]['link'] = $item->link; $…
Traversing next() 要素のひとつ次の要素を取得 nextAll() 現在の要素の次以降の兄弟要素をすべて取得 parent() 要素の親要素を取得 parents() 要素の先祖要素をすべて取得
Traversing add() 現在の要素集合にさらに指定した要素を追加出来る children() 条件を指定し、直下の子要素を取得できる。条件はなしでも可 closet() 条件に合う最も近い親要素を取得出来る ない場合はnoneが返る contents() テキストも含めた全子要素を取…
Traversing filter() 条件に合う要素を抽出する セレクタなどはカンマ区切りで複数指定できる セレクタではなく、関数を指定することも出来る is() 条件に合う場合はtrueを返す 逆の場合はfalseを返す map() jQueryオブジェクトが持つ要素集合を、elementな…
Attribute html() HTMLを文字列として取得する html(val) 要素にvalをセットする text() 要素がもつテキストを取得 test(val) 要素にテキストをセット val() 要素がもつvalue値を取得 val(val) 要素no valueにvalをセット
Attribute addClass() クラスを追加する removeClass() クラスを削除する toggleClass() クラスがなければ追加し、あれば削除する toggleClass(name,switch) switchがtrueであれば追加する。falseであれば削除する
Attributes attr(name) 属性の値を返す <div id="test" class="test"></div> $(function(){ $('#test').attr('class');//testを返す }) attr(key,value) 属性名と、値を指定し、要素に設定する <div class="test"></div> $(function(){ $('#test').attr('id','test');//id="test"が設定される }) 複数指定の場合は以下の…
Selector :hidden 非表示の要素 :visible 表示されている要素 :animated アニメーション中の要素使う頻度は高いと思います。
プラグイン jQuery.fn.extend() プラグイン作成の時によく使います。 <ul> <li>test</li> <li>test</li> <li>test</li> </ul> jQuery.fn.extend({ color:function(color){ return this.css('color',color); } }); $(function(){ $("ul li").color("red"); }); liの文字がすべて赤になります。プラ…
オブジェクト操作 eq() エレメントの集合から、指定したポジションのエレメントだけを取り出す。 <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> </ul> li.eq(2).css('color','red'); この場合は「test3」だけが赤くなります。これも良く使いますねー！
復習を兼ねて、jQueryのリファレンスを参考に命令などをメモ オブジェクト操作 each() 合致するすべての要素に対して関数を実行する。 関数内で戻り値にfalseを設定した場合、ループは終了する。 <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> </ul> $(function(){ $('li').eac…
web fontにもある、Adobe Source Code Pro 無料でダウンロードも出来るので、お使いのエディターに指定することが出来ます。自分はsublime textなので、今回はsublime textでの設定方法！ フォントをダウンロード→FAQs about fonts | Adobe Typeフォントをイ…
スライドさせたい画像を一枚の横長の画像にします。 これを、cssで背景画像に指定し、css3のanimationで画像の横幅分、スライドさせるように 指定するし、infiniteの指定をすると、無限にループしてスライドできます！画像のクローンを作って、繋げてとかい…
プログラミングの練習も兼ねて、iPhoneアプリの開発を学び始めようと思っています。 今すぐではなく、サイト制作などが終わってからですが。今気になっているサイトがこちらです→Cloud-Powered HTML5 Hybrid Mobile App Development Tools | MonacaiPhoneア…
とても簡単だったのでメモ 今回はchrome向けのみのコードですので 他のブラウザの場合はベンダープレフィックスを付けてください。デモ｜http://yuto-m.sakura.ne.jp/admin/assignment/css/animation_slideshow/index.htmlHTML <div id="slideshow"></div> CSS #slideshow{ width: 800p…
関数 オリジナルテーマでウィジェットを表示する際は、functions.phpを作成し、テーマフォルダに保存。内容に ウィジェットを表示。複数の設定をしている場合は引数に数値を入れることで差別可できる ~…
これから、少しづつ慣れていこうと思っているので、vimにemmetを入れて便利にしてみました。GitHub - mattn/emmet-vim: emmet for vim: http://emmet.io/でemmetをダウンロード。 今回はDesktopに回答しました。フォルダ名は「emmet-vim-master」です。まず…
osはmac エディターはsublime text です。 ホント便利なEmmet。その中でもよく使うコマンドを紹介例えば #header>h1+p^#content+#footer と入力してctrl + e と打つと、なんと <div id="header"> <h1></h1> <p></p> </div> <div id="content"></div> <div id="footer"></div> と表示されます！もっと便利な方法は ul>li.num$*5 と入力して、ctrl + e …
さくらインターネットや、macのローカル開発環境であるmampであればデータベースをいじる際、phpmyadminを使用すれば簡単に設定できるが、ターミナルからいじれるようになれると、何かと便利かと思うので、さくらインターネットのデータベースにssh接続して…
就職用のポートフォリオサイトはWordPressで作ろうと思っていたので、頑張って勉強していきたいと思う。 また、忘備録として頻繁にブログを更新出来たらなと思っている。（たぶん） 設定 設定での、パーマリンク設定はSEO的にとても重要だということなので、…
軽量なテキスト・エディターがあったのでご紹介します。 たまたま、知ったのですが、sublime textのようなエディターです。Brackets - A modern, open source code editor that understands web design. sublime textと違うところは、日本語対応ということで…
jQueryのアニメーションではなく、CSS3のtransitionで作成しました。 プラグインになっています。 画像サイズに合わせて、スライドショーの幅、その他のサイズの調整をします。 オプションでその他指定出来ます。 アップロードしました → http://yuto-m.saku…
アコーディオンパネルをjQueryとCSS3で作成しました。 今回はプラグインにしてみました。 動きをCSS3で作ったりしているので、オプション指定はあまり出来ません。 CSSのクラス名、HTMLを変えなければ、CSSをいじるだけで、見た目を変えることはできます。 …
以下、練習問題の回答です。 Q01 for(var i = 1; i <= 3; i++){ alert(i); } Q02 var point = prompt('何点ですか？'); (point < 70)? alert('不合格！') : alert('合格！'); Q03 var messages = new Array('今日はラッキーデー！','ボチボチ頑張っていきま…
