代碼編輯器使用

編輯器裡點選 javascript 、 CSS 、 html 可切換代碼,Result 展示效果
顯示具有 JQuery 標籤的文章。 顯示所有文章
顯示具有 JQuery 標籤的文章。 顯示所有文章

2014年10月7日 星期二

jQuery 到網頁頂部按鈕

有時候網頁太長的時候,常常會覺得要一直推滑鼠滾輪回到最上方覺得麻煩,這裡要分享一鍵回到頂部的方法

下面是程式的代碼


HTML 的部份可隨意放在任何地方,只需複製 id="gotop" 那段即可
CSS 一樣只要複製 #gotop 就可以了
提醒重要一點,使用前必須先載入 jQuery Library

2014年6月13日 星期五

Jquery Javascript Submit HTML5 屬性無效的處裡

HTML5 多出了很多實用性很高的屬性,例如:required
但是使用 javascript 送出表單後屬性會沒有反應,以下連結是處理的範例程式


2014年5月29日 星期四

JQuery 顯示隱藏密碼

相信很多人在打密碼都會有個頭痛的問題,當密碼少的時候還好,但密碼多起來的時候很難確定自己是不是打正確

以下是程式代碼,在使用代碼前記得要先載入 JQuery Library

2014年5月15日 星期四

jQuery 文字編輯器

首先先下載這份檔案解壓縮後放置在網站中
點我下載

先載入 JQuery Library
再來引入裡面的檔案 ckeditor.js
最後再 body 中加入 html 代碼

2014年4月18日 星期五

jQuery 摺疊選單

首先下載下列檔案

接下來在 head 中引入下列檔案(注意檔案路徑要正確),還有 JQuery Library
jquery-ui.css
jquery.min.js
jquery-ui.js
jquery.ui.touch-punch.min.js

2014年3月27日 星期四

JQuery 圖片 Loading 效果

有時候因為圖片解析度太高所以圖片會讀取比較久,但又不想讓人在等待的時候太無聊就需要用到這個效果。

首先對於 JQuery 有些瞭解的人都知道第一步要先插入下面行程式碼在 <head> 標籤中

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
再來這部分就是關鍵,以下是執行程式的代碼,請將它放入 <script> 標籤中或是建立一個 .js 檔引入它

$(function() {
  $.fn.LoadingImg = function() {
    return this.each(function() {
      var that = this;
      var src = $(this).attr("src2");        //取得當前src2的屬性
      var img = new Image();        //建立新的圖片
      img.src = src;
      var loading = $("<img src='loading.gif' >");        //讀取的圖片
      $(this).after(loading);        //加入讀取的圖片
      $(this).hide();        //隱藏目前的圖片
      $(img).load(function() {        //讀取完畢後
        loading.remove();
        $(that).attr("src", src);
        $(that).show();
      });
    });
  };
  $("img").LoadingImg();
});

最後就是在 HTML 中對應的圖片代碼

<img src2="demo.jpg">
這樣一來當圖片在還沒讀取完畢之前會先用讀取動畫替代,等到圖片讀取完畢後就會將讀取動畫替換掉。