【jQuery】入門7. jQueryで新しいWindowを開く
こんにちは(・∀・)
今回はjQueryで新しくウィンドウを開く方法についてご紹介します。jQuery関数にwindow.open()メソッドで新しいWindowを開きます。
ポップアップウィンドウを無効にしている場合正しく動作しません。
Contents
新しいWindowを開く際の設定
window.open()メソッドを使用して新しいWindowを開く設定をします。
$(function() {
$(".demo1").click(function(){
window.open(①url,②name,③詳細);
④return false;
});
});
- urlを記述
- 名前を記述(_blankや_selfなどのターゲット属性値かウィンドウ名を指定)
- 新しいWindowを開く際に表示するスタイルを指定(カンマで区切って複数指定できます)
- a要素に直接記述する場合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
1. 新しいウィンドウを開く
通常の新しいウィンドウの開き方。
HTML
<button id="demo1">Demo1</button>
JavaScript
$(function() {
$("#demo1").click(function(){
window.open("index.html","_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
2. 新しいウィンドウを画面中央に開く
画面中央に新しいウィンドウを開く方法
HTML
<button id="demo2">Demo2</button>
JavaScript
$(function() {
$('#demo2').click(function(){
window.open('index.html','_blank','width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1,left='+(window.screen.width-500)/2+',top='+(window.screen.height-500)/2);
return false;
});
});
Result
window.open()メソッドのパラメータで表示させたいWindowの詳細を調整します。
いかがでしたでしょうか、新しいWindowを開くjQuery、これも特に難しいところはなかったと思います。Native JavaScriptでできることもjQuery化で練習してドンドンjQueryに慣れていきましょう。