[EZoApp] 以 Google SpreadSheets 作為資料庫的進階應用 - 成績單應用2 | 進擊的網頁前端技術！ - 點部落

2014-08-26

[EZoApp] 以 Google SpreadSheets 作為資料庫的進階應用 - 成績單應用2

4946
0

這個範例是延續前一篇『切換科目的按鈕在下方，右上方會有成績排序的按鈕』為出發，製作點選左上角按鈕會彈出科目選單，選擇科目後可以看到全班成績，同時也區分出及格和不及格的同學。

這個範例是延續前一篇『切換科目的按鈕在下方，右上方會有成績排序的按鈕』為出發，製作點選左上角按鈕會彈出科目選單，選擇科目後可以看到全班成績，同時也區分出及格和不及格的同學。
點選連結看範例，進入後點擊 preview 可以看實際效果：
http://jqmdesigner.appspot.com/designer.html#&ref=4792917155643392

( 原始資料表長相：https://docs.google.com/spreadsheets/d/1LLpalVcZUIIr0ufGID8UUs1xxSVeYaNdbAaKkpPs61E/edit?usp=sharing )

當然，如果你還沒有看上一篇，建議你先去看一下 (『切換科目的按鈕在下方，右上方會有成績排序的按鈕』)，這樣才能了解 Google Sheets Table 元件的屬性設定用法喔！

在製作前，同樣的我們使用左側的元件，快速的拉出一個操作畫面，最上面擺 header，header 的左側放上一個按鈕，設定為只有 icon，最下面放入 tabbar，並新增一顆按鈕，最後再使用 CSS 做一些美化的動作，出來的程式碼會長這樣：

HTML：

<h3>國文成績單</h3>

<a class="ui-btn ui-btn-left ui-icon-bars ui-corner-all ui-btn-icon-notext">Button</a>

</div>

</div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

CSS：

html,body,div[data-role="page"],.ui-content{

width:100%;

height:100%;

padding:0;

margin:0;

}

div{

box-sizing:border-box;

}

th{

background:#ddd;

}

.ui-content{

padding:10px;

}

div[data-role="header"],div[data-role="footer"]{

box-shadow:0 0 10px #000;

}

li{

margin-bottom:-9px!important;

}

li a{

height:36px;

line-height:28px!important;

margin-top:-1px!important;

}

這時候我們要來使用 jQueryMobile 的 slider panel 功能 ( 可以參考這篇介紹 slider panel 的文章 )，我們在 HTML 程式碼裡頭新增一個 div，並將其屬性設定為 data-role="panel" data-position="left" ，這樣它就會變成一個從左邊滑出來的選單，然後我們只要將科目用 list 的方式放在裡面就完成了。( data-position-fixed="false" 是讓選單不要隨著畫面上下移動， data-display="overlay" 是讓滑出來的選單覆蓋在內容上 )

HTML：

</div>

CSS：

#left-menu span{

width:100%;

text-align:center;

height:50px;

line-height:50px;

display:block;

color:#8cf;

font-size:20px;

font-weight:bold;

}

接著只要在 header 左邊的按鈕，設定 href=”左側面板的 id”，就可以點選按鈕就滑出選單囉！不過從上方我們可以看到，在選單內多加了data-rel="close"，這是讓我們點選按鈕之後，面板就會收起來的選項。

到這時我們已經完成了畫面的編排，與『切換科目的按鈕在下方，右上方會有成績排序的按鈕』同樣的做法，記得在 footer 的按鈕內加上 query 和 range 的屬性設定，可以幫助我們篩選出及格與不及格的同學，然後在滑出來的選單科目內加上 gid 的設定，可以讓我們切換科目，完成的 HTML 如下：

<h3>國文成績單</h3>

<a class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars ui-mini ui-corner-all" href="#left-menu">Button</a>

</div>

</div>

</div>

<li>

</li>

<li>

<a data-theme="b" query="select * where C >= 60 order by C desc" range="B1:C20">及格</a>

</li>

<li>

</li>

</ul>

</div>

最後我們只要使用 javascript 來控制就可以囉！( 可以參考前一篇的說明 )

javascript ：

(function () {

$(document).on('pageshow', '#home', function () {

var table = $('#gk-825p76t').gk();

$('.ui-table-columntoggle-btn').css({

'display': 'none'

});

$('#left-menu a').on('click', function () {

$('#left-menu a,#footerBtn a').removeClass('ui-btn-active');

$('#footerBtn a').eq(0).addClass('ui-btn-active');

$(this).addClass('ui-btn-active');

var title = $(this).text();

$('h3').text(title + '成績單');

var scoreGid = $(this).attr('gid');

table.gid = scoreGid;

table.range = '';

table.query = '';

table.refresh();

});

$('#footerBtn a').on('click', function () {

var tableQuery = $(this).attr('query');

var tableRange = $(this).attr('range');

table.query = tableQuery;

table.range = tableRange;

table.refresh();

});

})();

就這樣，我們完成了第二種成績單的呈現方式！是不是很容易上手呢！^_^

http://jqmdesigner.appspot.com/designer.html#&ref=4792917155643392

回首頁