徐嘉裕(Neil Hsu)的工作心得網誌!

發表文章

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

jQuery指定列印範圍與換頁設定方法-教學撰寫:徐嘉裕Neil hsu

有時候列印網站內容不需要連同佈景的頭尾一起列印出來，只要列印指定的內容區，可以用以下的js方法來實現，還能透過CSS做列印換頁設置功能。需要於檔頭引入JS檔 <script src=" http://code.jquery.com/jquery-1.7.2.min.js "></script> 然後於佈景或模組的JS檔中貼上以下的CODE觸發列印 //列印功能 function printHtml(html) { var bodyHtml = document.body.innerHTML; document.body.innerHTML = html; window.print(); document.body.innerHTML = bodyHtml; window.location.reload(); //列印輸出後更新頁面 } function onprint() { //去除超連結設置 $('a').each(function(index) { $(this).replaceWith($(this).html()); }); var html = $("#printArea").html(); printHtml(html); } 其中加上了去除超連結設置，列印內容就不會出現有的沒的連結內容輸出，然後是指定列印範圍的結構 <div id="printArea" style="width: 100%; text-align: left;"> //列印內容輸出區 </div> <button type="button" id="btnPrint" onclick="onprint()" value="print" class="btn btn-info btn-block btn-lg"> 列印訂單</button> 藍字的部分為標定列印區域，紅字的地方就是要列印輸出的內容區，這樣其他...

閱讀完整內容

JQuery複製欄位語法-教學撰寫:徐嘉裕Neil hsu

最近在幫客戶寫訂單資料時，客戶說希望能增加一個複製A單元欄位全部內容到B單元的全部欄位，就是像下面這樣的功能其實方法也很簡單，先做一個核取的選項按鈕 <li class="list-group-item"><label class=' receiverchange checkbox-inline checkboxeach'><input id='checkbox' type='checkbox' name='receiverchange' value='1'>收件人資料與購買者相同</label> </li> 然後在JS檔中加上以下的語法紅字的class必須相同 //訂購者與收件人資料相同設定 $("body").on("change", " .receiverchange ", function (){ //姓名 $("#recipientname").val($("#name").val()); //行動電話 $("#recipientphone").val($("#phone").val()); //連絡電話 $("#recipienttelephone").val($("#telephone").val()); //縣市 $("#recipientcounty").val($("#county").val()); //鄉鎮區 $("#recipienttownshiparea").val($("#townshiparea").val()); //地址 $("#recipientaddress").val($("#addresscolumn").val()); //電子信箱 $("#recipientemail...

閱讀完整內容

jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu

jquery.datepicke是個非常好用的日曆套件，基本樣式是顯示年月日，也能顯示年月日時分秒，修改一下還能只顯示年月，當成月曆來使用，設定方法如下：先在樣板端引入以下的JS與CSS檔 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style type="text/css"> .ui-datepicker-calendar { display: none; //隱藏日期區塊 } </style> 然後貼上 <script> $(function () { $('#datepicker').datepicker({ changeYear: true, // 年下拉選單 changeMonth: true, // 月下拉選單 showButtonPanel: true, // 顯示介面 showMonthAfterYear: true, // 月份顯示在年後面 dateFormat: 'yy-mm-dd', showButtonPanel: true, monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6...

閱讀完整內容

jQuery-E-mail輸入欄位格式驗證-教學撰寫:徐嘉裕Neil hsu

在開發Xoops模組一定會遇到填寫表單的功能，以前都是透過表單post後由後端接受變數再進行PHP正則表達式進行判斷，如正確存入資料表，錯誤則返回頁面，像這樣的code $email = $_POST["email"]; if(!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) { redirect_header(XOOPS_URL,0 , _MD_NOMAIL); } 但這樣user在介面操作上不是很便利也不友善，因為每填錯一個欄位就要返回頁面再從填一次，所以想說寫一個jQuery前端判斷E-mail格式的code來解決的問題，當然後端判斷還是要的，怕有心人關了瀏覽器的js功能存心搗蛋，雙重保險總是好的，以下為前端驗證E-mail格式的code html結構 <input type='text' id='email' class=' form-control' name='email' value='' placeholder='請輸入電子信箱'> 然後再網站佈景或是模組頁面的js檔中輸入以下code $(document).ready(function(){ //E-MAIL格式檢查 $("body").on("change", "#email", function (){ $Emailchecking=IsEmail($("#email").val()); if($Emailchecking==false){ alert("請填寫正確的E-MAIL格式"); $("#email").blur(); //離開焦點 } }) function IsEmail(email) { var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if(!regex.t...

閱讀完整內容

Xoops模組開發->xoops 發送郵件的程式碼架構$xoopsMailer-教學撰寫:徐嘉裕Neil hsu

開發Xoops模組如有寄信功能可以使用Xoops的內建函數$xoopsMailer來寄信，相關的設定數值如下： xoops 發送郵件的程式碼架構 $xoopsMailer =& getMailer(); // 選擇發送方式 // 方案 A - 用 email $xoopsMailer->useMail(); // 方案 B - 用私人訊息 PM $xoopsMailer->usePM(); // 定義郵件樣板路徑 $xoopsMailer->setTemplateDir(XOOPS_ROOT_PATH.'/language/'.$xoopsConfig['language'].'/mail_template/'); // 指定使用的郵件樣板名稱 // 方案 A - 純文字樣板 $xoopsMailer->setTemplate('contact_us.tpl'); // 方案 B - HTML 格式樣板 [註一] $xoopsMailer->setTemplate('contact_us.html'); // 定義郵件樣板中的變數變數要大寫 $xoopsMailer->assign('SITENAME', $xoopsConfig['sitename']); $xoopsMailer->assign('ADMINMAIL', $xoopsConfig['adminmail']); // 以 HTML 格式發送可以順便定義 CSS 路徑 $xoopsMailer->assign('CSS', XOOPS_ROOT_PATH.'/style.css'); // 寄送給哪些信箱 // 方案 A - 寄給指定的會員需給予會員 uid $xoopsMailer->setToUsers(new XoopsUser($user_id)); // 方案 B - 寄給整個群組需給予群組 id $member_handler =& xoops_gethandler('m...

閱讀完整內容

Xoops模組開發->php常數中加入變數的方法-教學撰寫:徐嘉裕Neil hsu

開發Xoops模組最常用到PHP常數因該就是在語系檔中了，如果遇到常數中有變數又有常數，那通常是用.串接起來，例如下面的CODE define("_MA_TEXT01","今天是"); define("_MA_TEXT02","天氣是"); define("_MA_TEXT03","好天氣"); define("_MA_TEXT04","壞天氣"); define("_MA_TEXT05","祝美好的一天"); $weather[0]=_MA_TEXT03; $weather[1]=_MA_TEXT04; echo ""._MA_TEXT01."".date("Y-m-d H:i:s")."".$weather[0].""._MA_TEXT05.""; 輸出結果：今天是2018-01-04 15:38:56好天氣祝美好的一天其實可以在PHP常數中使用 %s 代替變數，再用sprintf()函數吧常數變數組合再一起就好了，程式也精簡很多。以上面的範例改為PHP常數中加入變數的寫法如下： define("_MA_TEXT01","今天是%s天氣是%s祝美好的一天"); // %s是帶入PHP變數 define("_MA_TEXT03","好天氣"); define("_MA_TEXT04","壞天氣"); $weather[0]=_MA_TEXT03; $weather[1]=_MA_TEXT04; echo "".sprintf(_MA_TEXT01,date("Y-m-d H:i:s"),$weather[0]).""; //串接PHP變數與常數 ...

閱讀完整內容