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

A-Fu Design

A-Fu Design

首圖

Wise 系列軟體之中,首推應該是 Wise Care 365,不過我有時候清理還是會分別使用 Wise Disk Cleaner 與 Wise Registry Cleaner,總覺得專用軟體會不會比較厲害一點?這次 Wise Registry Cleaner Pro 提供了限時免費,專業版能決定哪個使用者才能使用,其他功能似乎與免費版...

Share
Tweet
Pin
Share
No 意見
首圖

3C軟體 Mac 跨平台Windows、Mac免費實用又穩定的檔案同步備份軟體FreeFilesSync Leo 1 天 前 留言 相信大家手邊都有好幾個USB隨身碟或...

Share
Tweet
Pin
Share
No 意見
form2js 轉換後資料內容
現在的網頁越來越多使用AJAX 的方式來撰寫,目前在網頁上常見的格式以 JSON 、XML 較為常見,而在使用 jQuery 因為它本身對 JSON 格式的資料支援度很好,所以常常被拿來做資料交換或轉換,現在要介紹的這一個 jQuery 套件就是能夠直接把表單的內容和元素個體,先轉為 JSON 格式,讓 JavaScripts 可以先處理內容也可以直接把一整個 JSON 的物件傳送給伺服器端做處理,在程式的處理上就會減少很多的步驟。

使用方法:
第一步 載入  jqIpLocation 的 JavaScript 檔案
<!--form2js 轉換的主程式碼-->
<script type="text/javascript" src="../src/form2object.js"></script>
<!--JSON 的格式內容-->
<script type="text/javascript" src="json2.js"></script>


第二步 寫入表單內容
<form id="testForm" action="javascript:test()">
<dl>
<dt><label for="nameFirst">First name:</label></dt>
<dd><input id="nameFirst" type="text" name="person.name.first"/></dd>
</dl>

<dl>
<dt><label for="nameLast">Last name:</label></dt>
<dd><input id="nameLast" type="text" name="person.name.last"/></dd>
</dl>

<dl>
<dt>Gender:</dt>
<dd><label><input type="radio" name="person.gender" id="genderMale" value="male" /> Male</label></dd>
<dd><label><input type="radio" name="person.gender" id="genderFemale" value="female" /> Female</label></dd>
</dl>

<dl>
<dt>City</dt>
<dd>
<select name="person.city">
<optgroup label="Russia">
<option value="msk">Moscow</option>
<option value="spb">St. Petersburg</option>
<option value="nsk">Novosibirsk</option>
<option value="ekb">Ekaterinburg</option>
</optgroup>
<optgroup label="Europe">
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="madrid">Madrid</option>
</optgroup>
</select>
</dd>
</dl>

<dl>
<dt>Favorite food</dt>
<dd><label><input type="checkbox" name="person.favFood[]" value="steak"/> Steak</label></dd>
<dd><label><input type="checkbox" name="person.favFood[]" value="pizza"/> Pizza</label></dd>
<dd><label><input type="checkbox" name="person.favFood[]" value="chicken"/> Chicken</label></dd>
</dl>

</form>
<pre><code id="testArea">
</code></pre>


第三步 寫入 JavaScript 的動作內容
<script type="text/javascript">
function test()
{
var formData = form2object('testForm', '.', true,
function(node)
{
if (node.id && node.id.match(/callbackTest/))
{
return { name: node.id, value: node.innerHTML };
}
});

document.getElementById('testArea').innerHTML = JSON.stringify(formData, null, '\t');
}
</script>



作者網站:http://maxatwork.github.io/form2js/
檔案大小:23 KB (包含範例)
檔案下載:http://github.com/maxatwork/form2js/zipball/master
備份下載:下載
Share
Tweet
Pin
Share
No 意見
Humane JS  提示訊息可顯示右上方或正上方或者是中間 A-Fu Design
Humane JS  提示訊息可顯示右上方或正上方或者是中間
Humane JS 沒有使用任何 JavaScript 框架開發的提示訊息,簡單、現在化、獨立的程式碼、不占用太大位置的一個提示通知工具,利用 CSS 轉換來製作動畫效果,可支援現在大部分的瀏覽器也包含了現在的移動設備支援。Humane JS 還提供了五種的提示訊息的設計樣式,可在程式進行時隨時的改變提示的外觀設計。

Share
Tweet
Pin
Share
No 意見
AJAX progress bar 實際執行畫面 A-Fu Design
AJAX progress bar 實際執行畫面
AJAX progress bar 程式進度條結合伺服器端傳回的 XML 資料加上客戶端的 JavaScript 和 CSS 實現 AJAX 程式進度條功能,JavaScript 將定期詢問進度值,服務器將回復 XML。進度值應該從XML中提取和顯示的DIV元素的寬度。
Share
Tweet
Pin
Share
No 意見
xmlObjectifier 資料轉換前後 A-Fu 網頁設計
xmlObjectifier 資料轉換前後
尋找一種簡單的方法把XML轉換為JSON對象嗎?xmlObjectifier的目的是協助工作與XML數據的編碼器,能夠快速,輕鬆地處理XML文件,使用熟悉的為JavaScript developpers方法的。這個有用的代碼將提供透明的腸梗阻層到這些應用程序使用JSON和XML數據,它也允許你緩存的數據,以備後用。 xmlObjectifier是寫在客戶端的JavaScript在各種瀏覽器,以減少處理開銷,並提供最佳的兼容性。
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