• A-Fu Design
  • 前端設計
    • jQuery 套件
    • HTML 5
  • 關於A-Fu
  • 隱私權政策
  • 聯絡A-Fu
Google+ facebook twitter

A-Fu Design

A-Fu Design



 Strength.js 套件能用在註冊時就先檢查密碼的強度,現在很多網站都有會員機制,很多人怕密碼會忘記或是偷懶都會用一些很簡短簡單的密碼,這樣就讓其它惡意的使用者就有機可趁,這也讓網站的管理者很頭大。

此套件主要的標準分數為:
密碼必須包含8個字符以上
密碼必須包含1個小寫字母
密碼必須包含1個大寫字母
密碼必須包含1個數字
當然有特殊的字元也是加分的關鍵

使用方法:
第一步 載入 JavaScripts 和 CSS 的樣式檔案
<!-- 樣式檔案 -->
<link href='strength.css' rel='stylesheet' type='text/css'>
<!-- 使用 Google 的 API 取得 jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Strength.js 的主程式檔案-->
<script type="text/javascript" src="strength.js"></script>

第二步 在您要使用密碼檢查的欄位加上 ID
<input id="myPassword" type="password" name="" value="">

第三步 使用 jQuery 的載入完成後執行 Strength.js
$('#myPassword').strength({
     strengthClass: 'strength',
     // 輸入框的樣式名稱
     strengthMeterClass: 'strength_meter',
     // 輸入的文字樣式名稱
     strengthButtonClass: 'button_strength',
     // 切換按鈕的樣式名稱
     strengthButtonText: 'Show password',
     // 是否顯示密碼文字
     strengthButtonTextToggle: 'Hide Password'
     // 是否要有切換顯示隱藏
});


作者網站:http://git.aaronlumsden.com/strength.js/
檔案大小:13 KB (包含範例)
檔案下載:https://github.com/aarondo/Strength.js/archive/master.zip
備份下載:下載
Share
Tweet
Pin
Share
No 意見
使用 Google Char API 所產生本站的 QRCode  A-Fu Design
使用 Google Char API 所產生本站的 QRCode

上一篇提到的 QRCode 這裡提供的是下集,使用 POST 方式來取得 QRCode,以三種不同的語法取得,可以使用到基礎的 HTML 也可使用到顯在幾較多人使用的 JavaScript 語法,或者是很方便使用的 PHP 程式碼來取的 QRCode 顯示在您的網頁當中。
Share
Tweet
Pin
Share
No 意見
使用 Google Char API 所產生本站的 QRCode  A-Fu Design
使用 Google Char API 所產生本站的 QRCode
現在手機上網實在是很普遍的一件事情,但是在手機上打字總是有點麻煩,如果要你網站的使用者手動去 KEY 下您要做宣傳的網址應該是不太有可能會有人真的這麼做,那如果換成拍個照片就能夠到達您需要宣傳的網址,哪使用的人數應該是會大大的提升。所以目前很多人都會使用到 QRCode,現在 Google API 中有提供轉換的方式,可使用直接連接或者是以 POST 的方式去取得 QRCode 對開發者和使用者都是極大的方便。
Share
Tweet
Pin
Share
No 意見
jQuery 框架與 CSS3 的結合 A-Fu Design
jQuery 框架與 CSS3 的結合
使用 jQuery 框架和 CSS3 建立的 3D 動態幻燈效果,範例中建立一個三維動態的滑塊效果所帶來新的轉換功能,用於建立滑塊 CSS 動態調整長條圖的大小,可讓使用者自行調整也可用於調整設定時的動態顯示,讓資料修改也變得不無趣。
Share
Tweet
Pin
Share
No 意見
Peity Mini Chart 顯示在文中的小圖表 A-Fu Design
Peity Mini Chart 顯示在文中的小圖表
在寫文章或者在網站的結構上,如過有增加一下圖表或者圖片都可以大大增加瀏覽者對文章或網站的興趣,而如果在網站上有需要統計某些會變動的數值而且又不需要太過詳細的描述統計圖表的話, Peity Mini Chart 就非常適合你。Peity 是一個利用 jQuery 框架轉換一些元素到 HTML5 的 Canvas 元素對象中,可以轉換為圓餅圖、曲線圖和長條圖。因為是用到了 HTML5 的 Canvas 元素,所以並不支援 IE9 以下的版本瀏覽。
Share
Tweet
Pin
Share
No 意見
jQuery Gantt Chart 網頁上顯示甘特圖 A-Fu Design
jQuery Gantt Chart 網頁上顯示甘特圖
要展示甘特圖的時候通常都會遇到一些軟體上的問題,例如:沒有裝軟體或者是畫面太小展示出來看不清楚等等的。 jQuery Gantt Chart 是一個網頁做成就不會有電腦是沒有軟體的問題了。資料主要的數據可以使用 JSON 格式檔案還包含結果分頁、對每個任務使用不同顏色來表示、使用簡短描述作為提示、標註節日等等的功能。
Share
Tweet
Pin
Share
No 意見
Older Posts

About me

還在努力掙扎中的工程師

Follow Us

  • Google+
  • facebook
  • twitter

Categories

Accordion Animation AutoComplete CSS Calendar Canvas Carousel Charts Color DatePicker Effects Facebook API Forms Gallery HTML5 Menu Mootools Prototype React images jQuery javascripts lightbox 前端技術 統計圖表 網頁設計

Recent Posts

  • Security Eye 4.4.1 免費網路攝影機監視系統,多路監視器解決方案
  • PotPlayer 1.7.16291 繁體中文免安裝,新增串流媒體播放的 MP4 格式
  • 微軟推出 Font Maker 製作自己專屬 「手寫字型」
  • jQuery Gantt Chart 在網頁上繪製甘特圖的 jQuery 套件
  • Kalendae 一個不依賴任何框架的日期選擇器

Sponsor


勸敗攻略
勸敗分部

Facebook

Blog Archive

  • 6月 2026 (27)
  • 5月 2026 (60)
  • 4月 2026 (58)
  • 3月 2026 (62)
  • 2月 2026 (55)
  • 1月 2026 (62)
  • 12月 2025 (62)
  • 11月 2025 (58)
  • 10月 2025 (62)
  • 9月 2025 (60)
  • 8月 2025 (62)
  • 7月 2025 (62)
  • 6月 2025 (58)
  • 4月 2025 (48)
  • 3月 2025 (60)
  • 2月 2025 (51)
  • 1月 2025 (56)
  • 12月 2024 (61)
  • 11月 2024 (60)
  • 10月 2024 (54)
  • 9月 2024 (55)
  • 8月 2024 (42)
  • 7月 2024 (40)
  • 6月 2024 (19)
  • 9月 2023 (3)
  • 4月 2023 (2)
  • 2月 2023 (1)
  • 12月 2021 (1)
  • 1月 2019 (11)
  • 12月 2018 (31)
  • 11月 2018 (31)
  • 10月 2018 (31)
  • 9月 2018 (30)
  • 8月 2018 (31)
  • 7月 2018 (3)
  • 2月 2018 (1)
  • 4月 2015 (1)
  • 9月 2014 (1)
  • 2月 2014 (1)
  • 7月 2013 (1)
  • 2月 2013 (2)
  • 1月 2013 (1)
  • 12月 2012 (12)
  • 11月 2012 (81)
  • 10月 2012 (64)

Created with by ThemeXpose | Distributed by Blogger Templates