發表文章

製作AJAX讀取條的方法-教學撰寫:徐嘉裕Neil hsu

圖片
如果要做一個AJAX讀取條,像是用在瀑布流讀取資料這樣的特效,方法如下:

使用JQuery AJAX 中的complete,beforeSend這兩個參數。

complete:請求完成時執行的函式(不論結果是success或error)。
beforeSend:發送請求之前會執行的函式。

//AJAX-CODE
$.ajax({
url: xoopsjsurl + '/modules/neilwenchuang/ajax.php',
type: 'POST',
data: { id: $id,
sortid:$sortid,
number:$number
},
cache:false,
ifModified :true,
async:false,
success: function(response) {

if(response=="") return false; //空值終止程式
$("#waterfallsflowformboxajax").before("<div id='waterfallsflowformboxajax"+$number+"'>"+response+"</div>");
},
beforeSend:function(){  //發送請求之前會執行的函式
$('#allrecordsimg').show();
},
complete:function(){ //請求完成時執行的函式
$('#allrecordsimg').hide();
}, 
error: function() {
console.log('ajax error!');
}
})

//HTML-CODE
<p id='allrecordsimg'></p>


//CSS-CODE

#allrecordsimg{
position: relative;
display: n…

AJAX+jQuery瀑布流作法-教學撰寫:徐嘉裕Neil hsu

圖片
客戶剛好需要做一個瀑布流功能的介面,瀑布流主要功能就是當捲軸拉到瀏覽器底時觸發資料,像是下圖這樣。


詳細程式結構就不描述了,這裡主要是說明透過jQuery觸發ajax讀取資料及控制顯示數量的操作方式,之後如果有需要可以再做其他延伸開發,code如下:


HTML結構

<div id='centerbox'>
<div class="row customrow">
<{foreach item=boxArr from=$wenchuangshow.neilwenchuangbox}>
<div class="col-md-6 customrowcol-md-6">
<div id='contentbox'>
<{$boxArr.contentbox}>
</div>
</div>
<{/foreach}>

<div id='waterfallsflowbox' name='1,<{$wenchuangshow.sortidDB}>'></div> //瀑布流取值
<div id='waterfallsflowformboxajax' name='0'></div> //建構瀑布流區 //備註:name='0'為預設值,到時候會透過AJAX回傳數量然後JS在讀取數量來控制顯示筆數

</div>
</div>

JS結構


//偵測捲軸位置如果到底觸發waterfallsflowboxajax()函數
$(window).scroll(function(){
var scrollint = $(window).scrollTop();
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
$ajaxsetup = $("#waterfallsflowbox").attr("name");
if(type…

jQuery使用修改name值做一個點擊左右滑動css3動畫區塊特效-教學撰寫:徐嘉裕Neil hsu

圖片
最近需要幫客戶做一個jQuery區塊特效,就是點了按鈕左區塊會往左滑出內容區,然後再點一次按鈕左區塊又會往右滑回內容區,



這裡比較特殊工法的是利用修改name值來判斷區塊開啟還是關閉,這樣也能使用.css()來控制區塊的移動特效,方法如下:


//html結構

<div id='leftboxdiv'>

<div id='switchbtn' name='go'></div>  //name值預設是go

內容內容內容內容內容內容內容內容內容內容內容

</div>

//js-code


//滑入滑出左區塊

$(document).ready(function(){
$("#switchbtn").click(function(){
if($(this).attr("name")=="go"){
$("#leftboxdiv").css({"animation-name":"leftboxdivgo","left":"-293px"});
$(this).attr('name','back');  //吧name值改成back
}else{
$("#leftboxdiv").css({"animation-name":"leftboxdivback","left":"0px"});
$(this).attr('name','go');   //吧name值改成go
}
});
});


//css


#leftboxdiv{
position: absolute;
width: 293px;
height: 1076px;
background: url(../../img/blocks/travelerliving-commodity_01.png) repeat left top;
z-index: 100;
animation-duration: 1.5…

好用的jQuery custom content scroller(jQuery自定義內容滾動條)套件-教學撰寫:徐嘉裕Neil hsu

圖片
最近開發Xoops佈景時候需要修改瀏覽器原生的卷軸套件樣式,也就是overflow-Y: scroll,需要透過css自定義捲軸的背景顏色,但搞了半天IE可以Google可以Firefox就是不行,上網估狗過所有方法CSS都定義不起來,最後還是透過萬能的jQuery來解決吧,直接以程式來處理比用css搞半天快多了,效果還更美觀。

jQuery custom content scroller 插件網站
http://manos.malihu.gr/jquery-custom-content-scroller/




jQuery custom content scroller 插件效果演示範例
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html


也可以自行去我的G硬碟中下載已經整理好的套件回去用!!
https://drive.google.com/file/d/1sMrp6Tn2zlgyP1bCYowwHYLpTkcil2C0/view?usp=sharing

下載回來後吧scroller.rar解壓縮scroller資料夾看是放到佈景裡面的js資料夾還是模組裡面都可以!!

css引入

<link href="你的網站網址/js/scroller/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">

js引入

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript" src="你的網站網址/js/scroller/js/jquery.mCustomScrollbar.concat.min.js"></script>

//定義scroller

<script>
    (function($){
     …

Xoops免費佈景:neilambilight2.9正式版釋出-佈景設計開發:徐嘉裕Neil hsu

圖片
neilambilight2.9正式版發佈了,本次更新完成了neothemesadmin佈景管理後台介面全部翻新工作,並增加了許多實用的輔助功能,包括聯絡我們觀看內容表單由後台移往前台,增加連結登入後自動帶入頁面功能及指定會員回覆功能,布景增加將頁面連結快速加入佈景選單功能,頁腳三區塊樣式再開發,及新增加了聯絡我們區塊功能與強化網站表單的防機器人功能,目前neothemesadmin佈景管理後台100%都已翻新完成,各項功能也已開發完善,預計下次改版將針對佈景前台介面樣式作全部翻新設計,所以neilambilight3.0將會以全新的介面全新樣式呈現給大家。

Xoops免費佈景-Neil佈景測試站
http://demoweb.neodw.com/themesdemo/





neilambilight2.9 更新內容
==============================


1、修正neothemesadmin佈景管理模組所有用到分頁功能的排序功能在下一頁輸入數值時會吧其他頁的排序數值歸零問題。
2、修正neilambilight佈景CSS樣式導致作業上傳區塊上傳按鈕無法顯示問題。
3、修正neilambilight佈景meta->og:image讀取圖檔路徑判斷功能失效問題(佈景預設圖檔跟上傳代表圖檔) 。
4、neilambilight佈景聯絡我們表單增加防止外部網站傳參判斷功能,只有在相同網址內聯絡我們送出資料才能寫入資料庫,防止機器人大量外部傳參。
5、修改neilambilight佈景聯絡我們表單防機器人驗證機制。
6、修改neilambilight佈景底三區塊顯示方式,改為樣式1:三區塊全開寬度均分,樣式2:左中區塊開啟,左30%中間70%寬度,樣式3:中右區塊開啟,中間70%右30%寬度,樣式4:只開啟一個區塊,寬度滿版,樣式5:左右區塊開啟寬度各50%。
7、修改聯絡我們說明事項欄位使用base64編碼後儲存及讀取,保留原始格式並防止因特殊字元被防護模組阻擋寫入資料表的問題。
8、neothemesadmin佈景管理模組新增加一個聯絡我們區塊,可由Xoops區塊管理中開啟,建議開啟放置在底區塊中。
9、neilambilight佈景模組頁面增加可傳送頁面連結標題到佈景主選單及佈景區塊選單及佈景圖片播放器的管理中功能。
10、修正佈景主選單及區塊選單PHP兼容data-i…

使用Xoops內建函數$xoopsMailer寄送html格式郵件方法-教學撰寫:徐嘉裕Neil hsu

圖片
關於$xoopsMailer郵件參數的基本說明之前有寫過一篇教學了,有需要的朋友可以參考看看!!
https://neohsuxoops.blogspot.com/2018/01/xoops-xoops-xoopsmailer.html

上次的範例是寄送純文字格式的郵件,本次教學主要是寄送html格式郵件,也就是電子賀卡或廣告DM那樣的功能,但又不使用繁瑣的樣板模式直接用PHP就能寄送內容,簡單便利,CODE如下。


1、需要先建立一個function放置要寄送的html內容

function  boxfunction(){
global $xoopsModule,$xoopsConfig;

//引入CSS檔
$cssbox="
<style type='text/css'>
/* <![CDATA[ */

@charset 'UTF-8';
@import url('".XOOPS_URL."/modules/tadtools/bootstrap3/css/bootstrap.css');
@import url('".XOOPS_URL."/modules/tadtools/smartmenus/addons/bootstrap/jquery.smartmenus.bootstrap.css');
@import url('".XOOPS_URL."/modules/tadtools/css/font-awesome/css/font-awesome.css');
@import url('".XOOPS_URL."/modules/模組ID/css/style.css');

#centerboxbody{
position: relative;
font-family:'Helvetica Neue',Helvetica,Arial,'微軟正黑體',sans-serif;
width: 100% !important;
text-align: center;
}
#center{
position: relati…

Xoops做一個php下載檔案自動壓縮成ZIP格式方法-教學撰寫:徐嘉裕Neil hsu

圖片
通常下載檔案做個按鈕直接路徑指向檔案就能下載了,但現在瀏覽器越來越聰明,像是PDF,WOED或是圖片類型都會直接在瀏覽器開啟,而不會下載,再加上下載檔案會消耗網站上行頻寬,所以最好的方法就是吧要下載的檔案壓縮成ZIP格式再讓USER下載,減少頻寬消耗,這樣就都沒問題了,php5.2後都支援new ZipArchive函數,所以不用再去改什麼php.ini檔了。

方法如下:

PHP-CODE-把以下程式碼放到模組的function.php裡面,於要觸發下載的PHP檔中引入function.php

//下載檔案壓縮ZIP格式function

function  zipArchivefunction($url="",$zipname="",$temp=""){

//$url 檔案原始路徑+檔名
//$zipname 檔案名稱
//$temp 檔案暫存路徑+檔名

/********利用ZipArchive產生壓縮檔************/
$zip = new ZipArchive;

$zip->open($temp, ZipArchive::CREATE);

//$zip->addFile($dir); //添加檔案 (若有大量檔案可使用迴圈)
$new_filename = substr($url, strrpos($url, '/') + 1);  //重新定義壓縮檔路徑
$zip->addFile($url, $new_filename);

$zip->close();
/********使用header命令php下載zip檔************/

header('Content-Type: application/zip');
//指定類型
header("Content-type: ".filetype("$temp"));
//指定下載時的檔名
header("Content-Disposition: attachment; filename=".$zipname."");

//輸出下載的內容。
readfile($temp);
unlink($temp); //刪除…

分享一個好用的PHP單位換算function-教學撰寫:徐嘉裕Neil hsu

圖片
上傳檔案的$_FILES["file"]變數共會產生以下五個陣列內容

$_FILES["file"]["name"]:上傳檔案的原始名稱。
$_FILES["file"]["type"]:上傳的檔案類型。
$_FILES["file"]["size"]:上傳的檔案原始大小。
$_FILES["file"]["tmp_name"]:上傳檔案後的暫存資料夾位置。
$_FILES["file"]["error"]:如果檔案上傳有錯誤,可以顯示錯誤代碼。

如果要取檔案大小值,只要吧$_FILES["file"]["size"]存進資料庫即可,但是$_FILES["file"]["size"]預設解析檔案大小的單位是byte,所以如果是1MB大小的檔案則會取得1048576-byte值,如果能有一個function能吧數值轉換成B/KB/MB/GB/TB該多好,不然一長串數字USER也看不懂,上網Google一下找一個還不錯的單位換算function,測試都沒問題分享給大家。


吧以下的code丟到模組的function.php中,記得在要使用的php檔引入function.php

//單位換算
function formatBytes($size) {
$units = array(' B', ' KB', ' MB', ' GB', ' TB');
for ($i = 0; $size >= 1024 && $i < 4; $i++) $size /= 1024;
return round($size, 2).$units[$i];
}

這樣在需要使用轉換的地方需呼叫涵式即可
echo $filesize= formatBytes($size=$var);
$var數值就是存進資料表的$_FILES["file"]["size"…

Google網頁翻譯套件(官網已關閉申請頁面)需自行修改js設定-教學撰寫:徐嘉裕Neil hsu

圖片
Google網頁翻譯套件是網站建置上常用的功能,點選可以翻譯網站的文字為指定的語言,原本是在Google翻譯頁面中就能申請套件,


但自從11月Google翻譯改版後沒多久,Google網頁翻譯套件的申請頁面也被關閉了,好朋友可以點一下原本申請的網站:

https://translate.google.com/intl/zh-TW/about/website/

因該會看到這個畫面,翻譯套件申請頁面GG了!



不過還好G大神還是有保留原本的JS翻譯程式及功能,但如果要使用就要自己稍作修改了喔!!原始碼如下:

<div id="google_translate_element"></div><script type="text/javascript">

function googleTranslateElementInit() {

new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'en,ja,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');

}

</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

其中需要修改的地方為:

藍字的pageLanguage: 數值,這個是翻譯套件預設的語言。
紅字includedLanguages:數值,這個是可以讓使用者選擇要翻譯的語言,用英文,區隔

問題是如何知道這些語言的編碼參數呢,像是什麼ja,en去哪找?這問題很好處理,進到Google翻譯網頁

https://translate.google.com/?hl=zh-TW&tab=TT

如果我們想知道繁體中文的代碼是多少…

ajax使用FormData物件多檔上傳的方法-教學撰寫:徐嘉裕Neil hsu

之前寫了一篇心得是【ajax使用FormData物件上傳檔案】,那方法只針對單一檔案上傳,如果是多檔要使用FormData物件上傳需要修改一下檔案的取值方式,方法如下。


<input class="form-control" id="blockimg" type="file"  multiple/> <button id="upload">Upload</button>
//$.ajax
 $('#upload').on('click', function() {
    var form_data = new FormData();  //建構new FormData()       for(var i=0; i<$('#blockimg')[0].files.length;i++){                    form_data.append('file[]', $('#blockimg')[0].files[i]);                }     $.ajax({                 url: 'upload.php',                 cache: false,                 contentType: false,                 processData: false,                 data: form_data,     //data只能指定單一物件                                  type: 'post',                success: function(data){                     $('#ajsxboxdhow').html(data);                 }      }); });

這樣在upload.php中使用var_dump($_FILES['file']);觀看變數就會是陣列格式,後…