發表文章

目前顯示的是 七月, 2018的文章

兼容修正IE9鎖住外連preventDefault()無效的方法-教學撰寫:徐嘉裕Neil hsu

之前寫了一篇-JS解決submit同時存入AJAX跟POST外部傳參先後順序問題的教學文章,
基本上這方法是沒問題的,程式邏輯沒錯,但是現卻遇到一個問題導致原本鎖住外連的preventDefault()函數無效,就是IE9瀏覽器,IE9完全不支援e.preventDefault();方法,所以就無法形成先讓程式跑AJAX後在POST參數出去的流程,解決的方法只好加上整個preventDefault()兼容判斷流程,CODE如下:



function cancelHandler(event) {

var event = event || window.event;//兼容IE
//取消事件相關的預設行為
if (event.preventDefault) //標準技術
event.preventDefault();
if (event.returnValue) //兼容IE9之前的IE
event.returnValue = false;
return false; //用於處理使用對象屬性註冊的處理程序
}


這樣IE9包含以上的瀏覽器preventDefault()就都能正常運作了,有需要的朋友參考看看!!


教學撰寫:徐嘉裕 Neil hsu

修復tadgallery相片捲軸區塊開啟燈箱效果點選詳細內容sn為空值問題-教學撰寫:徐嘉裕Neil hsu

圖片
tadgallery是一套多功能的相簿模組,為tad老師所開發,也是目前Xoops使用率最高的相簿模組,不過目前發現一個問題,就是開啟相片捲軸區塊啟用燈箱效果時下方的詳細內容按鈕連結失效問題,為了先確認是否為系統環境造成的,我吧以下套件都改成tad的來做測試。



模組:
tadtools => 3.19最新版
tad_themes => 4.9最新版
tadgallery => 3.79最新版

佈景: => school2015最新版

都更換好配置後在測試燈箱效果,結果詳細內容還是一樣sn為空值


點了詳細內容因為sn沒值所以開啟的是空值頁面,沒內容的,初步排除是系統兼容問題。




沒辦法了阿,這樣是無法跟客戶交差的,只好動手來處理了,發現問題是出在blocks/colorbox.tpl這支檔的<{$block.sn}>為空值,相片捲軸既然是跑回圈的,那sn因該也是迴圈產生,所以修改了一下程式即可,

先找到tadgallery_block_carousel.tpl樣板檔,用筆記本打開
(在tadgallery/templates/blocks/tadgallery_block_carousel.tpl)


原本的code


<{if $block.pics}>

<style type="text/css" media="all">

.list_carousel {

position: relative;

}

.list_carousel ul {

margin: 0;

padding: 0;

list-style: none;

display: block;

}

.list_carousel li {

padding: 0;

margin: 0px;

display: block;

float: left;

}

.list_carousel.responsive {

width: auto;

margin-left: 0;

}

.clearfix {

float: none;

clear: both;

}

a.tadgallery_carousel_prev, a.tadgallery_carousel_next {

background: url('<{$xoops_…

用JS計算左右邊距固定position: fixed;位置方法!!-教學撰寫:徐嘉裕Neil hsu

圖片
在使用CSS的position: fixed浮動區塊最常遇到的問題就是無法指定位置,position: fixed的左右邊距是以瀏覽器的總寬度來做計算,所以假使您在1440px解析度設的position: fixed;位置是正確的,但如果吧解析度放大或縮小時,fixed區塊位置就會跑掉,例如下面圖示!

假使瀏覽器解析度為1440px,左右fixed區塊剛好在兩邊!



可是如果吧解析度改成1920,內容區#tpl-content寬度不變還是1280px,可是左右區塊卻是以瀏覽器的總寬度為主,因此就會變成下面這樣:




解決的方法就是用js來計算指定物件對齊左右邊距,方法如下:

js部分

$(window).load(function() {

var position = $('#tpl-content').offset();

var x = position.left;  //取得#tpl-content容器的left位置

var r =$('#tpl-content').width();

$("#leftframe").css("left", x-80+"px");  //計算左區塊位置

$("#righttframe").css("left", x+r+"px");  //計算右區塊位置

});


css部分

//左邊浮動區塊

#leftframe {

position: fixed;

top: 0px;

width: 80px;

height: 800px:

background: url(../../img/frame/01.jpg) repeat-y left top;

}

//右邊浮動區塊
#righttframe {

position: fixed;

top: 0px;

width: 80px;

height: 800px:

background: url(../../img/frame/02.jpg) repeat-y left top;

}

這樣即使瀏覽器設成1920左右浮動物件仍然會貼其#tpl-content容器的邊緣,不會在跑掉了。
有需要的朋友參考看看!

教學撰寫:徐嘉裕 Neil hsu

修改Xoops佈景結構增加一個入口首頁的方法!!-教學撰寫:徐嘉裕Neil hsu

圖片
之所謂客戶百百款,每個客戶對於網站的需求都不一樣,最近就遇到一個客戶需要再Xoops網站的首頁前面再加一層入口首頁,如果用原本的作法是用html做個頁面丟到網站根目錄然後指定伺服器預先讀取html即可,但是這樣做變成是獨立頁面,離開Xoops系統了,如果要使用Xoops的模組或區塊功能就不可行了,所以解決的方法還是修改佈景結構比較實在。

這是修改好之後的佈景樣式,如果輸入網址會出現入口頁面,



點進入網站按鈕則會顯示原本的Xoops預設首頁跟11個區塊!






修改方法如下:

1、先在佈景根目錄建立一個config.php檔
2、於佈景theme.tpl中引入config.php檔
<{include_php file="$xoops_rootpath/themes/$xoops_theme/config.php"}>
3、於config.php檔中增加以下的php code

<?php
$types=isset($_REQUEST['types'])?$_REQUEST['types']:"";

if(!empty(trim($this->_tpl_vars['xoops_contents'])) ){
$contentstrue=true;
}

$this->assign('contentstrue', $contentstrue);
$this->assign('types', $types);

?>

4、然後在佈景的tpl資料夾建立一個index.tpl檔,這個樣板就是用來放入口首頁內容的,包括區塊程式也能在這裡運作,index.tpl檔裡面要做個按鈕連到Xoops預設首頁。

<a title='前往首頁'  href="<{xoAppUrl /}>?types=index" >前往首頁</a>

5、修改佈景的結構樣板檔,加上以下的判斷
<body>


<{if !$types eq index && !$contentstrue}>
<{includeq file="$theme_…