見出し画像

【ティラノスクリプト】HTMLを呼び出す方法

画像1

①init.ks

[loadjs storage="plugin/show/js/show.js"]
[loadcss file="./data/others/plugin/show/css/show.css"]

[return]

②show.js

function show() {

 TYRANO.kag.stat.is_skip = false;

	//メニューレイヤーを取得
	var layer_menu = TYRANO.kag.layer.getMenuLayer();

	//html読込み
	$.ajax({
		url:"./data/others/plugin/show/html/show.html",
		type:"GET",
		dataType: 'html'
	})

	.done(function(data) {

	  layer_menu.html(data);

		//閉じるボタン

		$('.menu_close').on('click',function(){
			layer_menu.fadeOut(300, function(){
				$(this).empty();
			});
		});


}); //$.ajax.done end

	layer_menu.fadeIn(300);
};

③show.html

<div class="wrap">
<div class="menu_close">BACK</div>
</div>

④show.css

.wrap {
 width:1280px;
 height: 720px;
 background: #ffffff ;
 position: absolute;
 top: 0px;
 left: 0px;
}

.wrap .menu_close {
 position: absolute;
 top: 500px;
 left: 1000px;
 width: 200px;
 height: 200px;
 line-height: 200px;
 background-color: #3aa3f6 ;
 border-radius: 50%;
 color: #fff ;
 text-align: center;
 cursor: pointer;
 z-index: 999999;
 font-size: 30px;
}

.show_btn {
 position: absolute;
 top: 500px;
 left: 1000px;
 width: 200px;
 height: 200px;
 margin: 0;
 padding: 0;
 z-index: 9999999;
 cursor: pointer;
 line-height: 200px;
 background-color: #3aa3f6 ;
 border-radius: 50%;
 color: #fff ;
 text-align: center;
 cursor: pointer;
 z-index: 999999;
 font-size: 30px;
}

⑤first.ks

[plugin name="show"]

⑥HTMLを呼び出すボタン

[iscript]
$(".message0_fore").append("<div class='show_btn' onclick='show()'>HTML</div>");
[endscript]

参考にさせて頂いたプラグイン


この記事が気に入ったらサポートをしてみませんか?