Tad 教材網 - 線上書籍

:::

XOOPS 新版佈景設計
============

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/contentslider.zip)

### 一、 嵌入自製選單

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，其值如下： ```
    
    //檔案編號
    $slide_var[0]['files_sn']=740;
    
    //排序
    $slide_var[0]['sort']=5;
    
    //主機上真實檔名
    $slide_var[0]['file_name']= 'slide_16_3.jpg';
    
    //描述（含HTML）
    $slide_var[0]['description']='<h3>您可以自己修改這部份內容</h3><p>從佈景管理的後台設定畫面，您除了可以上傳滑動圖片外，也可以自己輸入圖片說明內容。部份佈景都支援HTML語法，您可以試試。</p>';
    
    //描述（不含HTML）
    $slide_var[0]['text_description']='您可以自己修改這部份內容從佈景管理的後台設定畫面，您除了可以上傳滑動圖片外，也可以自己輸入圖片說明內容。部份佈景都支援HTML語法，您可以試試。';
    
    //原始檔名
    $slide_var[0]['original_filename']='2011061111173338.jpg'; 
    
    //放置位置
    $slide_var[0]['sub_dir']='/white/slide';
    
    //檔案絕對路徑
    $slide_var[0]['file_url']='http://user50.myxoops.cyc.edu.tw/uploads/tad_themes/white/slide/slide_16_3.jpg';
    
    //縮圖絕對路徑
    $slide_var[0]['file_thumb_url']='http://user50.myxoops.cyc.edu.tw/uploads/tad_themes/white/slide/thumbs/slide_16_3.jpg';
    ```
2. 不錯的滑動圖文：<http://www.devtrix.net/sliderman/>
3. 請將相關語法（javascript及CSS部份）貼到</head>前，接著參照範例頁，將HTML貼到欲呈現位置並修改參數以及CSS檔的寬度及高度設定。

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fmail.tad0616.cp22.secserverpros.com%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D986

快速登入

書籍目錄

展開 | 闔起

線上使用者

158人線上 (105人在瀏覽線上書籍)

會員: 0

訪客: 158

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者