[HTML]簡易選單製作

首先html部分

<div class="header" style="height:300px;">
</div>
<section class="section section--menu" id="Alonso">
<nav class="menu menu--alonso">
<ul class="menu__list">
<li class="menu__item"><a href="#" class="menu__link">NEWS</a></li>
<li class="menu__item"><a href="#" class="menu__link">PROJECT</a></li>
<li class="menu__item"><a href="#" class="menu__link">RESERVATION</a></li>
<li class="menu__item"><a href="#" class="menu__link">CONTECT</a></li>
</ul>
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li><a href="#">NEWS</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">RESERVATION</a></li>
<li><a href="#">CONTECT</a></li>
</ul>
</div>
</nav>
</section>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>

CSS部分

<style>
body{
padding:0;
margin:0;
}
a {
text-decoration: none;
color: #4e3c3e;
outline: none;
}
a:hover,
a:focus {
color: #f48b95;
}
.section {
}
.menu--alonso{
display:block;
}
.section--menu {
position: relative;
}
.menu {
line-height: 1;
margin: 0 auto 3em;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
-webkit-align-items: center;
        align-items: center;
-webkit-justify-content: center;
        justify-content: center;
background: burlywood;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__list .selected a{
color: #f48b95;
}

.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* mobile style */
#dl-menu{
display: none;
}
.dl-menuwrapper button {
background: #ccc;
border: none;
width: 48px;
height: 45px;
text-indent: -900em;
overflow: hidden;
position: relative;
cursor: pointer;
outline: none;
}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
background: #aaa;
}
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 5px;
background: #fff;
top: 10px;
left: 16%;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
}
.dl-menuwrapper ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.dl-menuwrapper li {
position: relative;
min-width: 300px;
}
.dl-menuwrapper li a {
display: block;
position: relative;
padding: 15px 20px;
font-size: 16px;
line-height: 20px;
font-weight: 300;
color: #fff;
outline: none;
}
.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}
.dl-menuwrapper .dl-menu {
margin: 5px 0 0 0;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
@media screen and (max-width:1025px) {
.menu__list {
display: none;
}
#dl-menu{
display: block;
width: 100%;
text-align: center;
}
}
</style>

javascript部分

<script>
jQuery(document).ready(function(){
jQuery('.menu__item').click(function(){
jQuery(this).addClass('selected');
jQuery(this).siblings('.selected').removeClass('selected');
});

var flag = false;
jQuery('.dl-trigger').click(function(){
if(flag == false){
jQuery(this).parents().find('.dl-menu').addClass('dl-menuopen');
flag = true;
}else{
jQuery(this).parents().find('.dl-menu').removeClass('dl-menuopen');
flag = false;
}
});
});
</script>
<script>
jQuery(document).ready(function(){
var hh = jQuery('.header').height();
var window_height;
jQuery(window).scroll(function() {
window_height = jQuery(document).scrollTop();
if(window_height > hh){
jQuery('.menu__list').css({position: 'fixed',top: '0', width: '100%', 'z-index': '9999', background: 'rgb(255, 255, 255)', left: '0px', height: '120px'});
}else{
jQuery('.menu__list').css({position: "relative"});
}
});
});
</script>

[javascript]簡單製作浮動視窗置底功能

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(window).scroll(function() {
  if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()){
jQuery('#warnings').css("position", "static");
jQuery(window).scrollTop(jQuery(document).height());
}else{
jQuery('#warnings').css("position", "fixed");
}
  });
});
</script>


jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()
// 這段是判斷scrollbar是否已經到最底部，當滑到最底時改為固定在最底下否則以浮動的方式固定在網頁的最下方


CSS部分

#warnings {

1. position: fixed;
2. bottom: 0;
3. z-index: 999;

}

[javacript]偵測螢幕scroll bar 滑動

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(window).scroll(function() {
  var pos = jQuery(window).scrollTop();
  console.log(pos);
  });
});
</script>

[javascript]上傳圖片預覽

html部分:

<div>

<img class="img_preview" style="max-width: 150px; max-height: 150px;" src="xxx.png">

<div class="img_size"></div>

<input type="file" name="img_upload" id="img_upload">

</div>

javascript部分:

jQuery(document).ready(function() {

 

  function img_preview(input){

    if (input.files && input.files[0]) {

      var reader = new FileReader();

      reader.onload = function (e) {

        jQuery('.img_preview').attr('src', e.target.result);

        var kb = format_float(e.total / 1024, 2);

        jQuery('.img_size').text("檔案大小：" + kb + " KB");

      }

      reader.readAsDataURL(input.files[0]);

    }

  }

 

  jQuery("body").on("change", "#img_upload", function (){

   img_preview(this);

  });

});

[jQuery]計算文字框輸入的字數

HTML部分:
<div>
<textarea id="desc" name="desc"></textarea>
<div class="change">您還剩下「<span id="word"></span>」字，即可進行下一步</div>
<div class="next">滿200個字囉！您可以繼續填寫或進行下一步</div>
</div>

javacript部分:
jQuery(document).ready(function() {
jQuery('#word').text('200');
jQuery('.next').hide();
jQuery('#desc').on("keyup", KeyIn).on("keydown", KeyIn).on("change", KeyIn);
});

function KeyIn(evt) {
var maxLength = 200;

var nowContent = jQuery(this).val();
var nowLehgth = nowContent.length;

if (nowLehgth > maxLength){
jQuery('.change').hide("slow");
jQuery('.next').show("slow");
}
else{
jQuery('.next').hide("slow");
jQuery('.change').show("slow");
jQuery("#word").html(maxLength - nowLehgth);
}
}

[javascript]取得螢幕&瀏覽器寬度高度

//取得螢幕寬度
function getScreenWidth() {
return screen.width;
}
//取得螢幕高度
function getScreenHeight() {
return screen.height;
}
//取得瀏覽器視窗寬度
function getBrowserWidth(){
return jQuery(window).width();
}
//取得瀏覽器視窗高度
function getBrowserHeight() {
return jQuery(window).height();
}

[JQuery]滑鼠hover置換圖片

$("selector").mouseover(function() {
$(this).attr("src", src);
})
.mouseout(function() {
$(this).attr("src", src);
});

[jQuery]Html下錨點搭配JQuery做動態滑動功能

Html部分
<ul class="menu">
 <li><a href="#id01">Div01</a></li>
 <li><a href="#id02">Div02</a></li>
</ul>
<div id="id01"></div>
<div id="id02></div>

Javascript部分

$(".menu > li > a").click(function () {
        jQuery("html,body").animate({
            scrollTop: $($(this).attr("href")).offset().top
        }, 1000);
    });





2015/12/11新增
<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('.bottom_menu a').click(function(){
      var target = jQuery(this).context.hash;
      console.log(target);
      if(target != null && target != ''){
        jQuery('html,body').animate({
          scrollTop: jQuery(target).offset().top -80}, 1000);
          return false;
       }
     });
  });
</script>
<ul class="menu">
 <li><a href="http:/homeurl/#id01">Div01</a></li>
 <li><a href="http:/homeurl/#id02">Div02</a></li>
</ul>
<div id="id01"></div>
<div id="id02></div>

[jQuery]偵測按下ENTER鍵所觸發的事件

$("input").keydown(function (event) {
        if (event.which == 13) {
            //do some thing...
        }
    });

[jQuery]html2canvas 網頁轉換成canvas搭配分享至臉書

官方網站: http://html2canvas.hertzen.com/

介紹: 將整張網頁或局部元素轉為HTML5 Canvas

使用方式: 

1. 抓取table並轉成圖片

html2canvas($("table")[0], {

        onrendered: function(canvas) {

          var $div = $("fieldset div");

          $div.empty();

          $("<img />", { src: canvas.toDataURL("image/png") }).appendTo($div);

        }

      });

2. 整個頁面轉成圖片

html2canvas(document.body, {

  onrendered: function(canvas) {

    document.body.appendChild(canvas);

  }

});

搭配分享至臉書

$(".FBShare").click(function () {
        $.ajaxSetup({
            cache: true
        });
        // 取得臉書提供API
        $.getScript('//connect.facebook.net/en_UK/all.js', function () {
            // Load the APP / SDK
            FB.init({
                appId: '你申請的服務ID', // App ID from the App Dashboard
                cookie: true, // set sessions cookies to allow your server to access the session?
                status: true, // check the login status upon init?
                xfbml: true, // parse XFBML tags on this page?
                frictionlessRequests: true,
                oauth: true
            });
            FB.login(function (response) {
                if (response.authResponse) {
                    window.authToken = response.authResponse.accessToken;
                    // 網頁轉圖片分享至臉書
                    PostImageToFacebook(window.authToken);
                } else {
                }
            }, {
                scope: 'publish_actions,publish_stream'
            });
        });
     
    });
});
// 網頁轉圖片分享至臉書
function PostImageToFacebook(authToken) {
    // 網頁轉cnavas圖片
    html2canvas(document.body, {
        onrendered: function (canvas) {
            var imageData = canvas.toDataURL("image/png");
            try {
                // url轉base64
                blob = dataURItoBlob(imageData);
            } catch (e) {
                console.log(e);
            }
            // 分享至臉書
            var fd = new FormData();
            fd.append("access_token", authToken);
            fd.append("source", blob);
            fd.append("message", "這是一個測試臉書分享圖片功能");
            try {
                $.ajax({
                    url: "https://graph.facebook.com/me/photos?access_token=" + authToken,
                    type: "POST",
                    data: fd,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                        console.log("success " + data);
                        $("#poster").html("Posted Canvas Successfully");
                        alert("以分享至臉書，請至臉書查看最新消息!!");
                    },
                    error: function (shr, status, data) {
                        console.log("error " + data + " Status " + shr.status);
                    },
                    complete: function () {
                        console.log("Posted to facebook");
                    }
                });

            } catch (e) {
                console.log(e);
            }
        }
    });
}
// Convert a data URI to blob
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {
        type: 'image/png'
    });
}

[jQuery]checkbox 是否被選取

判斷html checkbox 是否被選取

$(elem).prop("checked")    回傳boolean值    true/false

例

if($('#check').prop("checked")){

   alret("已選取");

}