JQuery Cycle Plugin顯示頁數

可以在after加上以下的代碼就可以了

[javascript]
$(function() {
$('#slideshow').cycle({
fx:      'scrollHorz',
timeout:  2000,
prev:    '#prev',
next:    '#next',
pager:   '#nav',
after:     onAfter
});
});

function onAfter(curr,next,opts) {
var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#counter').html(caption);
}
[/javascript]

SMARTY模板中CSS及JavaScript問題

SMARTY算是歷史久遠且強大的template engine(模板引擎),不過最常遇到的問題就是SMARTY引擎將{} 大括號區塊中視為它的解析語法。因此與CSS及JavaScript語法產生衝突,解決的方式有以下幾種:

1.使用{literal} {/literal}

在CSS或JavaScript語法區塊前後加上{literal} {/literal},Smarty 就不會進行解析,不過注意的是裡面就不能再增加任何變數囉。

[php]
{literal}

<style type="text/css"><!– body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}

–></style>{/literal}
[/php]

2.利用 {ldelim} {rdelim} 取代左右大括號

[php]
<style type="text/css"><!–
body {ldelim}
padding-bottom: 40px;
{rdelim}
.sidebar-nav {ldelim}
padding: 9px 0;
{rdelim}
–></style>
[/php]

3.重新定義delimiters

[php]
<?php
$smarty->left_delimiter = ‘<!–{‘;
$smarty->right_delimiter = ‘}–>’;
?>
[/php]

4.獨立成檔案

[html]
<link id="bs-css" href="css/base.css" rel="stylesheet">
<script src="js/base.js"></script>
[/html]

這樣一來就可以讓SMARTY與CSS/JavaScript和平共存!

快速建構網站雛型架構-HTML5 Boilerplate

HTML5 Boilerplate是一套由大師們共同維護的前端模版,主要是可以很快速的開發web app或網站。可以省去許多麻煩~而Initializr又是它的進階版本,可以透過點選的方式,產生HTML樣版,甚至已經把專案中需要的目錄或檔案都 配置好(robot.txt,jquery…..)。
如果選擇Responsive的話,產生的樣版是可以隨視窗大小縮放的,只要以這個網頁當基礎,再修改成想要的樣子就ok了!
HTML5 ★ BOILERPLATE

http://html5boilerplate.com/

MOBILE ★ BOILERPLATE

http://html5boilerplate.com/mobile/

Initializr

http://www.initializr.com/

前端攻城師不可錯過的網站-前端工程開發實務

擁有非常深厚功力的啊嗚(蔣定宇),將他一系列「Web前端程式開發實務」的講議及資料無私的分享出來,目的是為了讓F2E(Front -End Engineer)的產業能更加成長。這真的是佛心來的,因為Joseph在Yahoo!期間就擔任多年的前端工程師,後期更是YDN的傳教士,協助推廣YUI。目前也是miiicasa的前端工程部門主管,所以對前端工程真的是有相當的專業在。推薦給各位!

網站: http://f2eclass.com/
投影片: http://www.slideshare.net/josephj/presentations
原始碼 : https://github.com/josephj/f2e-class/tree/master/slide