jQueryを使って外部のhtmlを読み込むTips
jQueryを使ってヘッダ、フッタなど共通部分のhtmlを本体のページに読み込むカンタンTipsです 共通で使いたいhtmlと、読み込む側のhtmlを用意する。共通部分にはheadタグとかbodyタグとかは不要です。 ほんとに部分的に抜き出したhtmlだけを用意します。 例えばヘッダ、フッタを共通にする場合は3つのファイルができることになります。 index.html 本体 header.html ヘッダー footer.html フッター jQueryを使うので、htmlの文字コードはUTF-8にしておきます。 jQueryをダウンロードするhttp://jquery.com/ 特に理由がなければ「Production」を使用します。 htmlでjQueryを呼び出し、共通htmlを読み込むまずjQueryを呼び出します。ふつーに。 ＜script type="text/javascri
【JavaScript】ヘッダーなど共通部分を外部化してメンテナンス性を高めよう | affiliate.ks-product
affiliate.ks-product アフィ収入月10万円以下の初心者を対象に、アフィリエイト、SEO、セールスライティング、マーケティングなどネットで安定して稼ぐ方法を分かりやすくまとめています！関連書籍のレビューも書いています 近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上の為にヘッダー、フッター、グローバルナビゲーション等、各ページの共通部分は外部ファイル化してインクルード（読み込み）することが多いと思います。 しかし、WordPressやMovableTypeが使えない、ましてやPHPなどのサーバーサイド言語が使えない案件も多いかと思います。そこで紹介するのが今回のテクニックです。 サーバーサイド言語が使えなくてもJavaScriptがあるじゃない 共通部分の外部化・インクルードはサーバーサイ
jQuery UIのsortableを使ってドラッグアンドドロップで並び替え - kamegu's memo
よく一覧表示させておいてそれを並び替えさせたいときがあります。 今回はソート項目を指定して一括して並び替える方法ではなく、ある要素をドラッグアンドドロップで指定の位置に挿入しなおすということを容易にしてくれるjQuery UIのsortableというものを使います。 http://jqueryui.com/sortable/ jQueryとjQuery UIのライブラリを読み込む必要があります。 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <scr
PC
注目のデジタルガジェット11 電子ペーパー端末「QUADERNO」で楽譜管理が手軽に、足でのページ送りやメモも可能 2024.07.22
ドラッグ＆ドロップで新たな項目を並び替えられるリストへ追加
jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスと、jQuery UI の Sortable プラグインを使った、並び替えられるリストとの併用。併用することにより、ドラッグ＆ドロップで、新たな項目を、並び替えられるリストへ、追加できる。 実装例（サンプル） 実装例の動作について 「この項目を追加」と書いてあるリスト項目を、ドラッグして、破線で囲んだリストの「項目 2」の上へ移動すると、「項目 2」が下へ移動し、「項目 1」と「項目 2」の間にスペースができる。そのスペースへドロップすると、破線で囲んだリストへ追加することができる。破線で囲んだリスト項目は、並べ替えることもできる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="styles
ドラッグ＆ドロップで並べ替えた順番を送信
jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えた順番を、送信する方法。 「この並び順を送信」ボタンを押すと、「この順番でよろしいですか？」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。 実装例（サンプル） 項目名 A (項目ID:1) 項目名 B (項目ID:2) 項目名 C (項目ID:3) 項目名 D (項目ID:4) 項目名 E (項目ID:5) 実装例の動作について 「項目名 A」をドラッグして、下へ動かし、「項目名 B」の上に持ってくると、「項目名 B」が上へ移動し、「項目名 B」と「項目名 C」の間にスペースができる。そのスペースへドロップすると、「項目名 A」と「項目名 B」が入れ替わり、「項目名 B」「項目名 A」「項目名 C」…の順番になる。 「この並び順を送信」ボタンを押すと、 項目名 B (項目ID
チェックボックスの一括チェック（全選択）／一括解除（全解除）
チェックボックスの一括チェック（全選択）／一括解除（全解除） jQuery2010年12月22日 親のチェックボックスを選択→子供のチェックボックスを一括チェック・一括解除するスクリプトを作成しましたのでご紹介いたします。 jQueryはこちらからダウンロード 実際のサンプル よく不動産のサイトでみかけるやつですね。Home'sとかYahoo不動産とかで路線を選択する時とかもこの機能を実装しています。色々なところで紹介されていますが、よくある一括チェック・一括解除機能に加え下記も実装しています。 子供をひとつずつチェック→全部チェック→親も自動チェック 複数のグループが同ページ内で出てきても対応可能 inputにクラスつけるだけ といった機能をつけてみました。ソースは下記のようになります。 HTML <div class="parent"> <h3><label for="parent-0
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
緯度・経度から二点間の距離と方向を計算する - それはBooks
ジオ系を触っていて、緯度、経度から二点間の距離とその方向を計算するロジックは色々なところで必要になるので、メモ。 元記事は下で、JavaScript に書き直しただけです。 緯度、経度から距離と向きを算出 緯度、経度から距離と向きを算出 - 中年プログラマblog ※現在リンク切れのため、ページのタイトルのみ記載させていただきます。 緯度・経度から二点間の距離を計算する // // 測地線航海算法の公式 // function geoDistance(lat1, lng1, lat2, lng2, precision) { // 引数 precision は小数点以下の桁数（距離の精度） var distance = 0; if ((Math.abs(lat1 - lat2) < 0.00001) && (Math.abs(lng1 - lng2) < 0.00001)) { distan
twitterのブログパーツ - twitterでつぶやくボタン
最近、ニュースサイトや情報系サイトで「twitterでつぶやく」の様なボタンを目にすることが増えました。 そのボタンをクリックすると、twitterのページにジャンプして、現在見ている記事のタイトルとURLがすでにテキストボックスに入力されている状態になっています。 これは便利！ということで、twitterでつぶやいてもうためのリンクボタンを作成してみました。 あなたのブログやサイトに、下記の設置をhtmlにコピペして下さい。それ以外に特に設定はいりません。貼り付けたページタイトルとURLが引用され、twitterの投稿フォームが開きます。そんなブログパーツです。 ※twitterのロゴ使用に関するガイドラインを受けて、ブログパーツの画像が変更になりました。大変申し訳ございませんが、ご了承下さい。 <script type="text/javascript" src="http://twi
フローティングメニューの使い方（スクロールするメニュー）｜クロノドライブ
今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。 あまり使う機会はありませんが、覚えておくといざというときに便利です。 それでは早速使い方のご紹介 必要なデータを揃える まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。 ここではファイル名を下記の通り保存しました。 jquery.js jquery-ui.js jquery.easing.js jquery.scrollfollow.js ディレクトリはこのようになりました（ jsフォルダの中にダウンロードした jsファイルがすべて入っています）。 HTMLからjsデータを読み込む フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。 {path}の部分はHTMLファイルからのパスにしてください。
Twitter関連のjQueryプラグイン｜Twitter関連｜Web関連特集｜PHP & JavaScript Room
スクロールパネルを実装するjQueryプラグイン「jScrollPanel」を使用して、指定したユーザー（複数指定可）のTLをコンパクトに表示する方法が掲載されています。 マウスホイールイベントをJSで制御するjQueryプラグイン「jquery.mousewheel.js」を使用することで、マウスホイールでスクロールできるようになっています。 鳥アイコンやデザインはCSSで変更できるようになっています。角丸は画像でなく、CSS3を使用して実装されています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた - かちびと.net
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
Highslide JS - JavaScript thumbnail viewer
What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope
親ウィンドウの<TD>～</TD>内の書き換え方法 - OKWAVE
DOMを利用したDHTML的手法については、先の方の回答にある通りでよいと思いますが、この場合、古いブラウザでは動作しないことも考えられます。 できれば、そういったブラウザでも対応できるように仕掛けをしておくのが良いと思いますよ。 具体的には、DOMに対応しているブラウザ向けにはDOMで、layerを採用しているNetscape4.xxではlayerで、そうでないブラウザに関してはフォーム部品で対応するようにするのが良いと思います。 なお、Netscape4.xxのDHTML技術は特殊なものですので、これを除外するのも無理はない対策になると思います。 DOMの方法については、 if (document.getElementById){ window.opener.document.getElementById("AA")="書き換えるHTMLソース"; } という記述でよいでしょう。 これ
JavaScriptを使ってHTMLの指定した画像のみリフレッシュする - 銀の鍵
知恵は自分の家を立て、その七つの柱を立て、 獣をほふり、酒を混ぜ合わせて、ふるまいを備え、 はしためをつかわして、町の高い所で呼ばわり言わせた、 「思慮なき者よ、ここに来たれ」と。また、知恵のない者に言う、 「来て、わたしのパンを食べ、わたしの混ぜ合わせた酒を飲み、 思慮のないわざを捨てて命を得、悟りの道を歩め」と。 箴言 9-1,6
AppleのMobileMeでも使われるJavaScriptライブラリ·SproutCore MOONGIFT
インタフェースはとても重要だ。技術的に優れていても、インタフェースが悪いと触ってもらえない。逆に技術的にそれほどすごいものではなくとも、インタフェースが優れていると流行ったりすることもある。 Welcomeページ 技術とデザイン、両立できれば言うことはない。優れたインタフェースを手軽に作るために、このライブラリを使ってみることをお勧めする。 今回紹介するオープンソース・ソフトウェアはSproutCore、リッチなインタフェースを実現するJavaScriptライブラリだ。 SproutCoreはAppleの提供するサービスである、.Macの次期バージョンMobileMeでも一部で採用されているJavaScriptライブラリだ。JavaScriptながら、gemを使ってインストールするのが特徴だ。 ターミナル上でコードを生成する Rubyを使ってWebサーバを立ち上げることができ、ポート番号4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
