Repository navigation
html5_demo_3
EkispertWebService edited this page Jan 17, 2017
·
2 revisions
駅名入力パーツを追加
今回のプラクティスでは駅名入力パーツの設置と動作確認を行います。
-
駅名入力パーツをインクルードします。
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiStation.css"> <script type="text/javascript" src="expGuiStation.js?key=keycode" charset="UTF-8"></script>
※keycodeにはご契約のアクセスキーを設定してください。
-
パーツのグローバル変数を追加します。
var stationApp1;// 駅名入力パーツ#1 -
初期化用のスクリプトを追加します。
// 駅名入力パーツ#1初期化 stationApp1 = new expGuiStation(document.getElementById("station1")); stationApp1.dispStation(); -
HTMLに駅名入力パーツを表示するdivタグを追加します。
出発地 <div id="station1" style="width:100%;"></div>
サンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>
Webサービスサンプル
</title>
<!-- ヘッダ部分 -->
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiDateTime.css">
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiStation.css">
<script type="text/javascript" src="expGuiDateTime.js?key=keycode" charset="UTF-8"></script>
<script type="text/javascript" src="expGuiStation.js?key=keycode" charset="UTF-8"></script>
<!-- 初期化スクリプト部分 -->
<script type="text/javascript">
<!--
var dateTimeApp;// 日付入力パーツ
var stationApp1;// 駅名入力パーツ#1
/*
* パーツを初期化
*/
function init(){
// 日付入力パーツ初期化
dateTimeApp = new expGuiDateTime(document.getElementById("dateTime"));
dateTimeApp.dispDateTime();
// 駅名入力パーツ#1初期化
stationApp1 = new expGuiStation(document.getElementById("station1"));
stationApp1.dispStation();
}
// -->
</script>
</head>
<body onLoad="Javascript:init();">
<!-- パーツ表示部分 -->
<div id="dateTime"></div>
出発地
<div id="station1" style="width:100%;"></div>
</body>
</html>
