menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

jQueryで新しいWindowを開く【実践でjQuery入門】

  • Guide

jQuery

こんにちは(・∀・)

実践でjQuery入門です。今回はjQueryで新しくウィンドウを開く方法です。JavaScriptを使って新しくウィンドウを開くというスクリプトをjQuery化してみました。jQuery関数にwindow.open()メソッドで新しいWindowを開きます。

ポップアップウィンドウを無効にしている場合正しく動作しません。

新しいWindowを開く際の設定

$(function() {
	$(".demo1").click(function(){
	window.open(①url,②name,③詳細);
	④return false;
	});
});
  1. urlを記述します。
  2. 名前を記述します。_blankや_selfなどのターゲット属性値か、ウィンドウ名を指定します。
  3. 詳細、新しいWindowを開く際に表示するスタイルを指定します。カンマで区切って複数指定できます。
  4. return falseを記述してa要素を無効化。

新しいWindowを開く際に③詳細で指定できる設定は次の通りです。

ウィンドウの位置

Topから50px、Leftから50pxの位置に表示したい場合はtop=50、left=50と記述。

top=50
left=50

ウィンドウのサイズ

width500px、height500pxにしたい場合はwidth=500、height=500と記述。

width=500
height=500

ツールバーやメニューバーの有無

0で無し、1で有り、またはnoで無し、yesで有り。

toolbar=0
location=0
directories=0
status=1
menubar=0
scrollbars=1

ウィンドウのサイズ変更

0で不可、1で可、またはnoで不可、yesで可。

resizable=0

HTML

<a href="index.html" class="demo1">Demo1</a>
JavaScript

$(function() {
$(".demo1").click(function(){
window.open(this.href,"_blank","top=50,left=50,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1");
return false;
});
});
Result

window.open()メソッドのパラメータで表示させたいWindowの詳細を調整します。


いかがでしたでしょうか、新しいWindowを開くjQueryに関しては以上になります。これも特に難しいところはなかったと思います。Native JavaScriptでできることもjQuery化で練習してドンドンjQueryに慣れていきましょう。また、a要素以外にもinput要素やbutton要素で新しいWindowを開くサンプルや、画面の中央に新しいWindowを開く等のサンプルは、こちらのjQueryで新しいウィンドウを開くをご覧ください。

関連リンク

jQuery入門目次
jQueryで新しいウィンドウを開く

  • カテゴリー:Guide