:::

8. 進階佈景設計

一、 嵌入自製選單

  1. 不錯的選單網站:http://cssmenumaker.com/
  2. 設定好之後下載解壓縮,並移至佈景下,目錄改為menu
  3. 在樣板中加入相關語法(一般不外乎是CSS以及JS和HTML三個部份而已):
    <link rel="stylesheet" type="text/css" href="<{xoImgUrl menu/styles.css}>" />
    <script type="text/javascript" src="<{xoImgUrl menu/menu_jquery.js}>"></script>
  4. 修改menu/styles.css,將底色及pIndicator、cIndicator的border-top-color改為透明,以便顯示原佈景的底圖。

二、 Smarty的迴圈

  1. 迴圈的資料來源($menu_var)長這樣子(但其實這和佈景開發者無關,看看就好):
  2. $menu_var[0]=array('id'=>"編號1" , 'title'=>"選單1" ,  'url'=>"網址1" , 'target'="目標1" , 'icon'="圖示1" , 'submenu'="子項目1");
  3. 套用迴圈,from是smarty的變數來源,item是自訂一個在迴圈中使用的變數名稱:
    <{foreach from=$menu_var item=m}>
      <li class="active">
        <a href="<{$m.url}>" target="<{$m.target}>">
          <i class="<{$m.icon}> icon-white"></i>
          <span><{$m.title}></span>
        </a>
      </li>
    <{/foreach}>
  4. 若有子選項,需在<li>中加入class="has-sub",並且在<li></li>裡面再加入第二組迴圈:
    <li <{if $m.submenu}>class="has-sub"<{/if}>>
      <a href="<{$m.url}>" target="<{$m.target}>">第一層選項</a>
      <{if $m.submenu}>
        <ul>
          <{foreach from=$m.submenu item=m2}>
            ...略...
          <{/foreach}>
        </ul>
      <{/if}>
    </li>

三、 樣板中使用PHP

  1. Smarty中允許使用PHP,只要用以下語法即可,若要將結果顯示在畫面上,直接用echo即可。
  2. 若需要載入內建物件,記得用global才行。
    <{php}>
    global $xoopsUser;
    echo $xoopsUser->name();
    <{/php}>

四、 套用自製滑動圖文

  1. 滑動圖文的樣板變數為$slider_var,其值如下:
  2. $slide_var[0]=array('files_sn'=>編號 , 'sort'=>排序 , 'file_name'=>真實檔名 , 'description'=>描述 , 'original_filename'=>原始檔名 , 'sub_dir'=>子目錄 , 'file_url'=>完整圖檔位置) ;
  3. 不錯的滑動圖文:http://www.devtrix.net/sliderman/
  4. 請將相關語法(javascript及CSS部份)貼到</head>前,接著參照範例頁,將HTML貼到欲呈現位置並修改參數以及CSS檔的寬度及高度設定。例如:
  5. 若是用demo3,記得到其他範例去將左右方向的圖示複製一份到img下。

:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

18人線上 (5人在瀏覽線上書籍)

會員: 0

訪客: 18

更多…