Vue.jsでコンポーネント親子間の値の受け渡し | webOpixel
Vue.jsでコンポーネント親子間の値の受け渡し Vueの初歩的なことになりますが、親子関係のコンポーネントで値の受け渡しをやってみます。 投稿日2017年03月28日 更新日2017年04月10日 ※Vue 2.2 を使用します。 親から子にデータ渡す 親の方では子のコンポーネントを読み込みテンプレートで配置するだけです。 後で子コンポーネントで設定する「message」に値を入れます。 parent.vue <template> <div> <child message="Hello Vue!!"></child> </div> </template> <script> import Child from './child.vue'; export default { components: { Child } } </script> 子コンポーネントではpropsに「message」
自作のjQueryスクリプトをプラグイン化しよう
Posted: 2011.06.13 / Category: javascript / Tag: jQuery, Plugin 自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。 そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。 外部ファイル化 たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。 jQuery script $(function() { $('#hide-btn').click(function(){ $('#view').fadeOut(1000); }); }); まずは外部ファイル化しましょう。 jQueryプラグインは「jquery.プラ
PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件
Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲
WordPressでプラグインによって読み込まれる外部スタイルシート&javascriptを削除する
WordPressでプラグインによって読み込まれる外部スタイルシート&javascriptを削除する Wordpressには便利なプラグインがたくさんあってついつい多く入れてしまいがちですが、画面に表示させるタイプのプラグインは独自にスタイルシートを読み込んだりしています。 プラグインごとにファイルを別けた方がメンテナンスはしやすいかもしれませんが、外部ファイルはなるべくまとめた方がリクエスト数を減らすことができてパフォーマンスが良いらしいです。 プラグインによって自動的に読み込まれたスタイルシートを削除する方法をご紹介します。 投稿日2011年02月05日 更新日2011年04月02日 「wp-pagenavi」プラグインのCSSを削除する。 よく使用されるプラグインとして、「wp-pagenavi」なんかがありますね。 これを使用すると以下のCSSがheadに追加されます。 <link
WordPressのカテゴリーにカスタムフィールドを追加する
WordPressのカテゴリーにカスタムフィールドを追加する カテゴリーごとに独自の画像やテキストを表示させたい場合、テンプレートで条件分岐を使用すれば簡単ですが、それだとカテゴリーが増える度にテンプレートを編集しなくてはいけないので不便ですね。 ここではカテゴリー編集画面にカスタムフィールドを追加して、管理画面で画像や新たなテキストを追加できるようにしてみます。 投稿日2011年08月18日 更新日2012年08月07日 カテゴリー編集に項目を追加 さっそくですがカテゴリー編集画面に項目を追加してみましょう。 現在使用している「functions.php」に以下を追加します。 functions.php add_action ( 'edit_category_form_fields', 'extra_category_fields'); function extra_category_f
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」 「jQuery-URL-Parser」は現在のURLや指定したURLをパースして簡単にパラメータやディレクトリ名などを取り出せるjQueryプラグインです。 投稿日2011年07月05日 更新日2011年07月05日 プラグインのダウンロードとインクルード 「jQuery-URL-Parser」は下記URLからダウンロードできます。 jQuery-URL-Parser – GitHub jQueryプラグインですのでjQueryも忘れず読み込みます。 html <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script type
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
CSS3で作るシンプルなマウスオーバーアニメーション5種
Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名 時間 アニメーション方法 ;
jQueryでTwitterの自分のつぶやきを表示する
jQueryでTwitterの自分のつぶやきを表示する すでに多くのTwitterライブラリがあるので必要があるかは微妙なところですが、jQueryを使用してTwitterの自分のタイムラインを表示してみます。 文字情報だけを取得することができれば、自由にスタイルが設定できるのでデザインとかも統一できるじゃないですか！？ 投稿日2010年07月04日 更新日2012年10月12日 ※2012.10.11現在Twitter API変更によりこの方法は使用できなくなりました。 新API（var1）に対応した方法は下記をご覧ください。 2012年10月 Twitter APIの変更によりjQueryでつぶやきが表示できなくなったので解決策 まずは読み込むべきデータの確認をしてみましょう。 下記のURIで自分のタイムラインの情報を見ることができます。[USERNAME]には自分のアカウント名に置き
jQueryでTwitterのトップページのように一定のタイミングでコンテンツをスライドさせる
Posted: 2011.02.25 / Category: javascript / Tag: jQuery, Twitter Twitterのトップページは人気のツイートが次々とスライドして表示されてますね。 この記事ではjQueryを使用して見た目のスライドするだけの部分を再現してみたいと思います。 ベースとなるhtml+css Twitterの場合は裏でajax的なことを色々やっているのだと思いますが、見た目しか再現しないのでプレーンなhtmlを使用します。 html <div id="slide"> <ul> <li> <strong>2011.02.01</strong> 最初です。最初だけどむしろ最後です。 </li> <li> <strong>2011.02.12</strong> Twitterのトップページのようにコンテンツを一定の時間でスライドさせてみます。<br /
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
可変グリッドレイアウトなWebデザイン集めてみました