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

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年6月22日 星期四

Bootstrap3完整中文化


Bootstrap完整中文資訊

https://kkbruce.tw/bs3
張貼者： 於 沒有留言:
標籤： , , ,

2015年3月16日 星期一

Web前端開發人員必讀文章

張貼者： 於 沒有留言:
標籤： ,

HTML5 UP! 免費 HTML5 + CSS3 響應式設計網頁模版下載

還記得去年底找到一個很棒的 HTML5 網站模版下載網站 Templated，真的是網站開發者的好朋友，至少我們不用從無到有、從頭到尾來打造一個網站，而是直接就現有的樣版去做修改或調整，讓建置網站難度降低許多，也減少花費的時間和開支。

之前網友推薦我一個名為 HTML5 UP! 的網頁設計下載網站，提供大量 HTML5 模版，而且這些模版都支援響應式網頁設計（Responsive Web Design, 簡稱 RWD），也是俗稱的「自適應網頁設計」，透過自動彈性調整畫面設計，以改變佈局方式來使不同大小螢幕皆能正常瀏覽，達到最好的使用體驗。
因為自適應網頁設計在開發上較為繁瑣，一般很少免費提供下載的網站，但 HTML5 UP! 收錄一系列共 28 種網頁設計，通通都是 HTML5+CSS3 並有響應式設計功能，網站採用的授權方式為 Creative Commons 姓名標示 3.0，也就是說你可以自由分享、修改這些模版，唯獨需要保留網頁裡的姓名標示（Attribution）。
如果你喜歡這位設計師的作品，那可在 Pixelarity 網站找到更多模版下載，不過這網站是採用訂閱計費方式，最便宜方案為每三個月 $19 美元，可自由下載所有的網頁設計。

網站名稱：HTML5 UP!
網站鏈結：http://html5up.net/


其他內容請到原始文章閱讀
張貼者： 於 沒有留言:
標籤： ,

2014年3月9日 星期日

HTML5檔案上傳進度條


要掌握上傳進度有一個關鍵: Client Script必須掌握檔案大小以及已上傳資料量，才可能計算上傳百分比回報狀態。傳統使用<input type="file">選取檔案配合<input type="submit">送出鈕的做法，一來無法得知所選取檔案大小，二來在按下POST鈕後Script即失去主導權，一切交由瀏覽器主控， 更別奢談得知上傳進度。在從桌面拖拉檔案到網頁一 文提到的HTML5 File API，一舉突破JavaScript無從得知檔案大小的盲點，邁進一大步。而透過XHR(XMLHttpRequest)，改用 jQuery.ajax()非同步上傳檔案，便能在上傳過程繼續更新網頁回報進度。這樣子只剩下一個挑戰 -- 如何得知已上傳資料量?

好消息! 隨著瀏覽器日新月異，XHR也跟著進化，HTML5世代瀏覽器(IE需為IE10+，IE9又哭哭了...)已內建XMLHttpRequest Level 2(XHR2)，增加不少新功能，包含直接處理ArrayBuffer/Blob等二進位資料的能力，也多了onprogress事件，能在傳輸過程中持續觸發回報上傳進度! 有了新武器，要實現上傳進度回報就簡單多了。


原始介紹文章出自於此


@{
    Layout = null;
}
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Ajax Upload Lab</title>
    <style>
        .item {
            background-color: #6699CC; border: 1px solid gray;
            font-family: 'Courier New'; font-size: 8.5pt;
            margin-bottom: 6px; padding: 3px; color: yellow;
            box-shadow: 3px 3px 3px 1px rgba(128, 128, 128, 0.7);
        }
            .item .name { text-shadow: 1px 1px gray;  }
 
        .prg-zone { margin-top: 10px; }
 
        .bar {
            background-color: #666666;
            height: 15px; position: relative;
            margin: 3px; margin-top: 6px;
            margin-bottom: 6px; border: 1px solid #ccc;
            border-top-color: #444; border-left-color: #444;
        }
            .bar > div {
                position: absolute; color: white; font-size: 8pt;
            }
            .bar .color-bar {
                background-color: #99bb33; top: 0px; bottom: 0px;
                left: 0px;
            }
            .bar .status { top: 0px; left: 6px; }
            .bar .progress { top: 0px; right: 4px; }
    </style>
</head>
<body>
    <div>
        <input type="file" id="fileSelector" multiple
               data-bind="event: { change: selectorChange }" />
        <input type="button" value="Upload" data-bind="click: upload" />
    </div>
    <div data-bind="foreach: files" class="prg-zone">
        <div class="item">
            <div data-bind="text: name" class="name"></div>
            <div class="bar">
                <div class="color-bar" data-bind="attr: { 'style': widthStyle }"></div>
                <div class="status" data-bind="text: status"></div>
                <div class="progress" data-bind="text: progress"></div>
            </div>
        </div>
    </div>
    <script src="~/Scripts/jquery-2.1.0.js"></script>
    <script src="~/Scripts/knockout-3.1.0.debug.js"></script>
    <script>
        $(function () {
 
            function viewModel() {
                var self = this;
                self.files = ko.observableArray();
                self.selectorChange = function (item, e) {
                    self.files.removeAll();
                    $.each(e.target.files, function (i, file) {
                        //加入額外屬性
                        file.uploadedBytes = ko.observable(0); //已上傳Bytes
                        file.percentage = ko.computed(function () { //上傳百分比
                            return (file.uploadedBytes() * 100 / file.size).toFixed(1);
                        });
                        file.widthStyle = ko.computed(function () {
                            return "right:" + (100 - file.percentage()) + "%";
                        });
                        //上傳進度數字顯示
                        file.progress = ko.computed(function () {
                            var perc = file.percentage();
                            return file.uploadedBytes.peek() + "/" + file.size +
                                "(" + perc + "%)";
                        });
                        file.message = ko.observable();
                        file.status = ko.computed(function () {
                            var msg = file.message(), perc = file.percentage();
                            if (msg) return msg;
                            if (perc == 0) return "Waiting";
                            else if (perc == 100) return "Done";
                            else return "Uploading...";
                        });
                        self.files.push(file);
                    });
                };
 
                self.upload = function () {
                    $.each(self.files(), function (i, file) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var data = e.target.result;
                            //https://gist.github.com/HenrikJoreteg/2502497
                            //以XHR上傳原始格式
                            $.ajax({
                                type: "POST",
                                url: "@Url.Content("~/xhr2/upload")" + "?file=" + file.name,
                                contentType: "application/octect-stream",
                                processData: false, //不做任何處理，只上傳原始資料
                                data: data,
                                xhr: function () {
                                    //建立XHR時，加掛onprogress事件
                                    var xhr = $.ajaxSettings.xhr();
                                    xhr.upload.onprogress = function (evt) {
                                        file.uploadedBytes(evt.loaded);
                                    };
                                    return xhr;
                                }
                            });
                        };
                        reader.readAsArrayBuffer(file);
                    });
                };
            }
            var vm = new viewModel();
            ko.applyBindings(vm);
 
        });
    </script>
</body>
</html>
張貼者： 於 沒有留言:
標籤：

2014年3月8日 星期六

HTML5練習-從桌面拖拉檔案到網頁

【原理解析】
只簡單說明原理，細節請直接看程式碼及註解:
  1. 拖放操作: 在圖檔拖放區元素加掛ondragover、ondragleave、ondrop事件，滑鼠移拉物件進入離開時切換底色，放下物件時透過 transferData.files取得檔案資訊。為避免拖拉操作觸發原有瀏覽器行為，記得要呼叫event.stopPropagation()及 event.preventDefault()。
  2. 檔案資訊: event.transferData.files裡的檔案資訊有name, type, size等資訊，基於安全不包含檔案路徑等資訊，但可當成File API參數讀出內容。
  3. 讀取檔案: 透過HTML5 File API FileReader()，將圖檔讀入轉成Data URI，可直接做為<img> src顯示圖檔。【延伸閱讀: 】
  4. 清單及檢視: 採用Knockout MVVM實作清單、檢視介面。
程式範例如下: Live Demo


原始文章出自於此


<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>HTML5 拖拉圖檔顯示在網頁上</title>
    <style>
        .drop-zone {
            position: absolute; top: 6px; width: 120px; height: 90px; 
            background-color: green; color: white; text-align: center;
        }
        .drop-zone.hover {
            background-color: blue;
        }
        .img-list {
            position: absolute; height: 90px; background-color: #444;
            top: 6px; left: 135px; right: 6px; overflow-y: hidden;
            overflow-x: auto; white-space: nowrap;
        }
        .thumbnail {
            max-width: 100px; max-width: 75px; vertical-align: top;
            margin: 3px; cursor: pointer;
            border: 1px solid transparent;
        }
        .thumbnail:hover {
            border: 1px solid red;
        }
        .display {
            position: absolute; top: 110px; 
            left: 6px; right: 6px; bottom: 6px;
            padding: 12px;
        }
    </style>
</head>
<body>
    <div class="drop-zone"><span>圖檔拖放區</span></div>
    <div data-bind ="foreach: images" class="img-list">
        <img data-bind="attr: { src: dataUri }, click: $root.currImage" class="thumbnail" />
    </div>
    <fieldset class="display" data-bind="with: currImage">
        <legend>
            <span data-bind="text: name"></span>
            <span data-bind="text: size"></span>
        </legend>
        <div>
            <img data-bind="attr: { src: dataUri }" />
        </div>
    </fieldset>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js "></script>
    <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.core.min.js"></script>
<script>
        $(function () {
            var $drop = $(".drop-zone");
            //抑制瀏覽器原有的拖拉操作效果
            function stopEvent(evt) {
                evt.stopPropagation();
                evt.preventDefault();
            }
            $drop.bind("dragover", function (e) {
                //滑鼠經過上方時加入特效
                stopEvent(e);
                $(e.target).addClass("hover");
            }).bind("dragleave", function (e) {
                //滑鼠移開時移除特效
                stopEvent(e);
                $(e.target).removeClass("hover");
            }).bind("drop", function (e) {
                //拖放操作完成事件
                stopEvent(e);
                $(e.target).removeClass("hover");
                //由dataTransfer.files取得檔案資訊
                var files = e.originalEvent.dataTransfer.files;
                var imageFiles = $.map(files, function (f, i) {
                    //只留下type為image/*者，例如: image/gif, image/jpeg, image/png...
                    return f.type.indexOf("image") == 0 ? f : null;
                });
                //清除ViewModel
                vm.images.removeAll(); vm.currImage(null);
                //逐一讀入各圖檔，取得DataURI，顯示在網頁上
                $.each(imageFiles, function (i, file) {
                    //使用File API讀取圖檔內容轉為DataUri
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        //將檔名、檔案大小、DataURI放入ViewModel
                        vm.images.push({
                            name: file.name,
                            size: kendo.format("{0:n0} bytes", file.size),
                            dataUri: e.target.result
                        })
                    }
                    reader.readAsDataURL(file);
                });
            });
 
            function myViewModel() {
                var self = this;
                self.images = ko.observableArray();
                self.currImage = ko.observable();
            }
            var vm = new myViewModel();
            ko.applyBindings(vm);
        });
    </script>
</body>
</html>
張貼者： 於 沒有留言:
標籤：

2014年1月19日 星期日

黯然銷魂之HTML KickStart套件，太好用了，以後用不到怎麼辦？ --響應式網頁 / 自適應網頁(Responsive Web)設計


今天在社群上面看見一篇介紹文：
http://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/

驚為天人啊！！
http://www.99lime.com/elements/


簡單、直覺、立即上手......不可思議的 HTML KickStart
1. 官方網站，下載一個檔案。解開後放入您的網站
2. 網頁最上方，務必使用 HTML5 DocType  <!DOCTYPE html>
3. 加入HTML表頭的 .js與 .css檔。

開始了，請慢用（太好學了，不用十分鐘。慢不下來啊~）






原始文章出自於此
張貼者： 於 沒有留言:
標籤： ,

2011年11月28日 星期一

HTML5 input type 有新的型態

HTML5 has several new input types for forms. These new features allow for better input control and validation.
This chapter covers the new input types:
  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color


 這邊可以直接線上測試效果

張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)