script google appgoogle spreadsheetをデータの保存に利用してこれからメニューバーを作る
このスプレッドシートのURLは https://spreadsheets.google.com/ccc?key=0Ahx8FrCtx3TOdHlvOHdibUhHdkdkNnc2VXlGLXRtQ2c&hl=en (public on the webリンクをクリックするとsharing settingという窓が出て選択できる) このようなjavascriptを作る function名はmainmenu()とした function mainmenu(){
var query = new google.visualization.Query(
"https://spreadsheets.google.com/ccc?key=0Ahx8FrCtx3TOdHlvOHdibUhHdkdkNnc2VXlGLXRtQ2c&hl=en");
query.setQuery("select A,B");
query.send(handleQueryResponsemainmenu);
}
function handleQueryResponsemainmenu(response) {
var data = response.getDataTable();
for (var row = 1 ; row < data.getNumberOfRows() ; row++) { //ここでは1行目はのぞく
var li = $("<li />");
var href = $("<a />");
href.text(data.getFormattedValue(row, 0));
var attr = (data.getFormattedValue(row, 1)=='')?data.getFormattedValue(row, 0):data.getFormattedValue(row, 1);
href.attr("href",attr);
li.append(href);
$("ul#mainmenu").append(li);
}
}
このページの列1,2を取得して、最上段の行は抜かし、それ以降の行を反復して<li><a></a></li>を作成、最後にページの<ul id="mainmenu"></ul>内にdomで書き加える。以上。このコードは外部に置いて<head>で読み込んでもいいし、中にいれてもいい なお、 var attr = (data.getFormattedValue(row, 1)=='')?data.getFormattedValue(row, 0):data.getFormattedValue(row, 1); で仮に右列の値がなかった場合は左列の表示名をそのままurlとするようにしている 一方でhtml側ではgoogleのjs apiをロードして実行させ、そのmainmenu() function処理を行わせる <head>
<title>algae catalog</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
...
...
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
...
...
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1");
google.setOnLoadCallback(init);
function init() {
mainmenu();
}
</script>
</head>
<body>
<header>
<nav>
<ul id="mainmenu">
</ul>
</nav>
</header>
事例:
土, 4 30, '11
Leave your comments |
|
