宮仔的家: jQuery

顯示具有 jQuery 標籤的文章。顯示所有文章

2018年2月7日星期三

輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛

最近的案子處理行動版的表格效果時，發現以前的「Blogger 插入表格最佳流程 + 自適應寬度」，這個方式若用在商業網站，將沒有任何質感可言，甚至可以用簡陋來形容。

於是找了一下自適應 RWD 表格有沒有比較美觀，而且又簡便的處理方式。有發現幾個功能強大的外掛，但操作稍嫌複雜。

本篇要介紹的方案，比較能夠無腦套用，且現成的樣式、配色就很美觀，不用另外修改或研究 CSS 語法。

點此看範例網頁

簡易外掛 Basic Table
本篇要介紹的 jQuery 超輕量外掛 Basic Table，檔案很小，其實不必找外連空間，js/css 直接塞範本就好：

官網頁面：Basic Responsive Table Plugin For jQuery
Demo 頁面：JQUERY BASIC TABLE PLUGIN DEMOS

原始介紹文章出自於此

2017年10月6日星期五

自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus

所有網站架設要處理的區塊中，導覽列的下拉選單是最麻煩的一部份，如果需要「多層下拉選單」的話，難度就比較高，可參考「Blogger 多層下拉選單實作」。

而行動裝置使用率大幅攀升後，導覽列非常需要有自適應 RWD 效果，手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 RWD 導覽列含多層下拉選單，我認為是架設網站的過程，難度最高的一部份。

所以在這篇「如何從 Blogger 範本網站挑到理想的版型，且不會出錯」，我強烈建議挑選範本時，導覽列的功能要放最高權重。

而如果你熟悉 HTML/CSS 的話，有機會可以自製 RWD 多層下拉選單，不用跟別人撞衫，而且並不困難，因為國外已經開發了非常完整的免費外掛，以下就來看如何實作。

原始介紹文章出自於此

2017年8月25日星期五

jQuery日期選擇

過去網頁表單要輸入日期不容易，往往得另外裝個外掛，例如基於 jQuery 的套件 datepicker。

而現在的瀏覽器使用 HTML5 已成為標準，Input 標籤內建就有簡易的選擇日期功能，只要加入屬性 type="date" 就可使用，不必另裝外掛。

不過最近處理一個需求，需要輸入一段日期區間，也就是要選取頭尾 2 個日期，例如 2017/8/1 ~ 2017/9/1。不用外掛的話要做到這件事挺麻煩，版面效果也不佳。

本篇就來介紹一下這個強大的 Date Range Picker 外掛，以 jQuery、Bootstrap 為基礎而發展出來，不但功能完善，介面也十分美觀。

http://www.daterangepicker.com/

原始介紹文章出自於此

2017年7月2日星期日

「Dowebok 做好網站」免註冊！各種jQuery網頁特效外掛免費下載

而今天要來分享另一個，jQuery外掛集合的平台，裡面與先前分享的jQuery插件庫差不多，也是以jQuery外掛為主，一樣也有瀏覽器支援度清單，以及使用說明和設定的參數，但在這平台中，有一個最大的好處就是，裡面看的到外掛，不但不可註冊為會員，就可將外掛給下載回來，雖然說這個平台裡的外掛不多，但卻相當的實用，同時裡面的外掛，先前在jQuery插件庫也有所不同，因此要讓網頁動起來的朋友，現在也一塊來看看囉！

網站名稱：Dowebok 做好網站　
網站連結：http://www.dowebok.com/

原始介紹文章出自於此

2015年7月13日星期一

jQuery 文章懶人包

jQuery設計思想

http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html

jQuery最佳實踐

http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html

Coding Standards & Best Practices - 會更新
http://lab.abhinayrathore.com/jquery-standards/

2014年11月20日星期四

jQuery EasyUI DEMO

Datebox 日期選擇器

之前測過 jQuery UI 的日期選擇器, 發現看似簡單的元件, 要操控它還真需要不少的設定. EasyUI 號稱 Easy, 是否較容易設定呢? 今天就來測試看看 How easy it is :

# jQuery EasyUI 參考文件
# jQuery EasyUI datebox
# jQuery UI 的日期選擇器

jQuery EasyUI 的日期選擇器 datebox 是 combo 與 calendar 物件的組合, 它與 jQueryUI 的 Datepicker 元件一樣都是用一個文字欄位來承載, 但不同的地方是, datebox 只要指定樣式類別為 easyui-datebox 即可, 不須呼叫 datebox() 方法來將其初始化 :

<input id="datebox1" type="text" class="easyui-datebox" >

如果沒有指定樣式類別, 則必須呼叫 datebox() 方法才行 :

<input id="datebox2" type="text" >
<script language="javascript" >
$(document).ready(function(){
$("#datebox2").datebox({required:true});
});
</script >

其他詳細內容請參考原始出處

Panel

jQuery EasyUI 的 Panel 是一種容器, 用來存放網頁內容, 也是其他容器如 layout, tab, accordion 的父容器. 其說明文件參考 :

# http://www.jeasyui.com/documentation/panel.php

與其他 EasyUI 元件一樣, 建立一個 Panel 容器有兩個方法, 一個是用 HTML5 標籤語法 (主要是 data-options 屬性), 其二是使用 Javascript 語法, 用程式來設定.

首先來看最簡單的 HTML 方式. Panel 容器只要用一個 div 元素, 並設定樣式類別為 easyui-panel 即可

其他詳細內容請參考原始出處

Accordion 摺疊選單

Accordion 是手風琴的意思, 亦即此 UI 可以像手風琴那樣展開與縮合, 它的每一個選項都是一個 Panel, 所以 Panel 的屬性與方法皆可用來操控每一個選項. 其 API 文件參考 :

# EasyUI Accordion

EasyUI 的折疊選單是用兩層 div 元素做的, 而 jQueryUI 則是用 ul-li 來做. EasyUI 只要在第一層的 div 指定樣式類別為 easyui-aaacordion, 第二層的 div 加上 title 屬性即可

其他詳細內容請參考原始出處

Tabs 頁籤面板

每一種 Javascript 框架或桌面程式語言都會提供頁籤面板這種常用的容器, 之前玩 ExtJS 時與 Java Swing 時曾詳細地做過測試, 詳見 :

# ExtJS 4 測試 : 頁籤面板 TabPanel
# Java Swing 測試 : 頁籤面板 JTabbedPane

jQuery UI 的頁籤我沒測試過, 但之前使用 jQuery UI 寫了一個簡易架站軟體, 使用的容器就是 Tabs. EasyUI 的頁籤面板跟摺疊選單一樣都是利用兩層 div 元素建構的 (其實兩個很像), 跟 jQuery UI 基本上相同, 不同的是, jQuery UI 的頁籤標題需另外使用 ul-li 來做, 而 EasyUI 則直接在內層 div 元素的 title 屬性裡

原始介紹文章出自於此

Layouy 排版

測試完 Panel, Accordion, 以及 Tabs 後, 網頁的基本容器用法大致熟悉了, 接下來就是重頭戲 : 網頁排版, EasyUI 提供了 Layout 元件來處理版面問題, 其實 Layout 元件跟 Java Swing 的 BorderLayout 是同樣的東西啦! 都是用來排版, 只不過 Java Swing 常用在桌面程式 (也可以用在網頁!), 而 EasyUI 純粹用在網頁排版而已, 都是將一個版面分成東西南北中五個區域, 分別放置適當的內容. 北方通常用作 Banner, 例如網站的 Logo 或搜尋列; 南方通常當作 Footer, 例如版權宣告, 來站人數等等; 西方通常是導覽列; 東方則常用來做其他訊息如外部連結, 廣告行銷等等. 關於 Java 的排版請參考 :

# Java Swing 測試 : JButton 與排版

而 EasyUI 的 Layout 元件 API 參見 :

# http://www.jeasyui.com/documentation/layout.php

原始介紹文章出自於此

Tree 樹

Tree 適合用來表達從屬結構, 例如組織架構, 檔案系統等等, 是非常好用的使用者介面. EasyUI 提供的 tree 元件 API 如下 :

# http://www.jeasyui.com/documentation/tree.php
# Tree Demo

原始介紹文章出自於此

2014年7月8日星期二

jPList - jQuery Data Grid Controls

http://jplist.com/

2014年3月6日星期四

開發中可能會用到的jQuery小技巧

原始文章出自於此

禁止右鍵
$(document).ready(function() {
    //catch the right-click context menu
    $(document).bind("contextmenu",function(e) {
        //warning prompt - optional
        alert("No right-clicking!");

        //delete the default context menu
        return false;
    });
});

文本缩放
$(document).ready(function() {
    //find the current font size
    var originalFontSize = $('html').css('font-size');

    //Increase the text size
    $(".increaseFont").click(function() {
        var currentFontSize = $('html').css('font-size');
        var currentFontSizeNumber = parseFloat(currentFontSize, 10);

        var newFontSize = currentFontSizeNumber*1.2;
        $('html').css('font-size', newFontSize);
        return false;
    });

    //Decrease the Text Size
    $(".decreaseFont").click(function() {
        var currentFontSize = $('html').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);

        var newFontSize = currentFontSizeNum*0.8;
        $('html').css('font-size', newFontSize);
        return false;
    });

    // Reset Font Size
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
});
});

在新視窗開啟超連結
$(document).ready(function() {
    //select all anchor tags that have http in the href
    //and apply the target=_blank
    $("a[href^='http']").attr('target','_blank');
});

css切換方式
$(document).ready(function() {
    $("a.cssSwap").click(function() {
        //swap the link rel attribute with the value in the rel
        $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
    });
});

回到頁頭
$(document).ready(function() {
    //when the id="top" link is clicked
    $('#top').click(function() {
        //scoll the page back to the top
        $(document).scrollTo(0,500);
    }
});

預先載入圖片
jQuery.preloadImagesInWebPage = function() {
    for(var ctr = 0; ctr<arguments.length; ctr++){
        jQuery("").attr("src", arguments[ctr]);
    }
}

$.preloadImages("image1.gif", "image2.gif", "image3.gif");

$('#imageObject').attr('src', 'image1.gif').load(function() {
    alert('The image has been loaded…');
});

2013年12月22日星期日

jQuery教學－記憶型滑動式展開選單，換頁重整選單不收合

一直以來有不少朋友，遇到這樣子的狀況，當透過jQuery製作出來的，滑動式展開選單，點選了其中的大項後，選單會自動展開，並且切到該類別的頁面外，但這時就會發現到，選單立即就回到原始的縮合狀態，其實這並不是jQuery的問題，而是瀏覽器動態變數的生命週期機制，因此若想要讓選單不收合時，就得透過cookie小餅乾，來將變數暫存在使用者的電腦中，這時就可完成換頁選單可繼續保留，原先所點選的設定值了，至於怎麼作現在就一塊來看看吧！

其他更詳細的教學內容請到原始文章

2013年8月14日星期三

[jQuery Plugin]透過jQuery Translate實現網站多語系翻譯功能

今天，想介紹一款相當好用及容易上手的jQuery Plugin給各位，
或許已有不少人知道，但，在點部落上沒看到有人分享?!
所以，借花獻佛一下，分享給有需要及尚未知道的人了！

jQuery Plugin : jQuery Translate
檔案位置 : https://code.google.com/p/jquery-translate/
說明 : 實現多語翻釋功能

使用範例：
$('p').translate('en');

效果說明：
透過以上語法，HTML內的P標籤中的文字內容，將翻譯成"英文"內容！

原始介紹文章出自於此

[jQuery]挑選日期的好物 jQuery Plugin [dynDateTime]中文化特別處理

剛好同事在輸入日期可以點選的工具，小喵經過那一次【jQuery初體驗】之後，自然而然就想到jQuery的一堆PlugIn
比較著名的是jQuery DatePicker，不過小喵覺得雖然他功能強大，光看說明文件就不得了，而style還得需要透過線上的功能產生css下載。比較麻煩的是中文化的部分，有些網站光這部分就寫了不少Code這讓小喵覺得。還是找找看有沒有其他的。
終於皇天不負苦心喵，讓小喵找到了【dynDateTime】這個PlugIn。小喵覺得她有幾個好處
1.有已經寫好的幾個套版style可以選擇
2.有提供各國語言的套件，可以切換成符合自己適當的語言
經過測試，小喵用big5的版本有些Script的問題，用英文版卻沒問題。打開big5的那個版本看一看，哇~~看到一堆亂碼。難怪不能用，所以只好自己將英文的版本翻譯一下

使用方式很簡單，首先將css , JS, lang的相關檔案放相關位置上，接著引用即可
範例的程式如下：
<HTML>
<HEAD>
    <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <TITLE></TITLE>
    <link rel="stylesheet" type="text/css" media="all" href="css/calendar-blue2.css" />
    <script type="text/javascript" src="JS/jquery.js"></script>
    <script type="text/javascript" src="JS/jquery.dynDateTime.js"></script>
    <script type="text/javascript" src="lang/calendar-big5.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#text1").dynDateTime({
                ifFormat:"%Y%m%d"
            });
        });
    </script>

</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<INPUT type="text" id=text1 name=text1>
</FORM>

</BODY>
</HTML>

原始介紹文章出自於此

2013年5月28日星期二

ASP.NET & jQuery 注意小細節來防止XSS攻擊

防範小技巧

1.一般我們在開發網站過程中，有可能為了專案的需求而暫時關閉基本防護的功能，所以在上線前記得檢查一下 web.config 的設定是不是正常。

1<system.web>

2   <pages validateRequest="true" /> //預設為 ture => 開啟防護

3</system.web>

2.常見的方法可以利用 Server.HtmlEncode 來對內容進行編碼：

1string value = Server.HtmlEncode("<script>alert('XSS 攻擊');</script>");

而如果使用的 .Net Framework 為 4.5的版本可以利用新的方法 AntiXssEncoder.HtmlEncode 來對內容進行編碼：

1// 需引用 System.Web.Security.AntiXss;

2string value = AntiXssEncoder.HtmlEncode("<script>alert('XSS 攻擊');</script>", true);

3.若使用 ASP.NET MVC 進行開發，在 View 裡利用 Html Helper 顯示資料時也已經幫我過處理大部分的安全性問題。

首先我們先故意做一個會造成 XSS 攻擊的惡意程式碼，這是在 ASP.NET MVC 中的 Controller 

1public ActionResult Index()

2{

3    TestModel model = new TestModel();

4    model.XssAtack = "<script>alert('攻擊');</script>";

5    return View(model);

6}

下面示範幾種在 View 中顯示資料的方法，來檢驗各個方法對於 XSS 的防範機制：

1@Html.DisplayFor(p => p.XssAtack) 攻擊失敗，顯示純文字

2 

3@Html.DisplayForModel() 攻擊失敗，顯示純文字

4 

5@Html.EditorFor(P => P.XssAtack) 攻擊失敗，顯示 input 標籤

6 

7@Html.Encode(Model.XssAtack) 攻擊失敗，將內容進行編碼

1@Html.Raw(Model.XssAtack) // 攻擊成功，跳出 alert 視窗

2 

3@Html.DisplayTextFor(P => P.XssAtack)  // 攻擊成功，跳出 alert 視窗

測試結果中顯示 Html.Raw 和 Html.DisplayTextFor 會造成 XSS 攻擊的問題，所以在開發 ASP.NET MVC 時也應該小心使用這些 Html Helper，你防止不必要的問題發生，反觀如果需求就是要跳出一段 alert 來提醒使用者，也可以利用這兩種方法來做資料顯示。

其他更多詳細內容請參考原始文章

訂閱：文章 (Atom)

2018年2月7日 星期三

2017年10月6日 星期五

2017年8月25日 星期五

2017年7月2日 星期日

2015年7月13日 星期一

jQuery設計思想

jQuery最佳實踐

Coding Standards & Best Practices - 會更新 http://lab.abhinayrathore.com/jquery-standards/

jQuery API 中文文檔

分享jQuery的教材(講義、範例程式)

Learn the basic building blocks of jQuery - 影片加實做

Learning Center

2014年11月20日 星期四