QuickWire 表單顯示隱藏開發 jQuery 套件

QuickWire 是一個能夠讓開發者簡單容易的顯示或隱藏表單元素的內容，使用簡單的程式配置方式節省開發者的時間。不用再重複的撰寫繁雜的程式碼片段，當您有很多相互作用的網頁需要建立時，你可以讓他們可以單一的產生作用，輕鬆且容易地採用同樣的動作讓表單元素能夠顯示或者是隱藏，讓您的用戶有全部一致的使用介面。

使用方法：
第一步 載入 QuickWire 需要使用到的 CSS 和 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 Ideal Forms 的主程式碼-->
<script src="quickwire.js"></script>

第二步 設計表單元件
<table border="0" cellspacing="0" cellpadding="6">
<tr bgcolor="#cccccc">
<td colspan="2" class="darkrow"><strong>Example A: Simple show/hide - uses default action - slideDown(300) / slideUp(150) </strong></td>
</tr>
<tr valign="top" bgcolor="#cccccc">
<td> <input name="check_a" type="checkbox" id="check_a" value="1">
check_a<br>
<div class="qwbox" id="div_a">This is div_a.</div></td>
<td width="70%">
<pre class="code">
var conf = { check_a: '#div_a' }
$.quickwire( 'bindandrun', conf );
</pre>
</td>
</tr>
<tr bgcolor="#bbbbbb">
<td colspan="2" class="darkrow"><strong>Example B: Checkbox show/hide - custom global action (fadeIn/fadeOut) </strong></td>
</tr>
<tr valign="top" bgcolor="#bbbbbb">
<td><input name="check_b" type="checkbox" id="check_b" value="1">
check_b<br>
<div id="div_b" class="qwbox">This is div_b.</div>
</td>
<td><pre class="code">
var conf = { check_b : '#div_b' };
var opts = { showAction: 'fadeIn',
hideAction: 'fadeOut',
showParams: 1000,
hideParams: 200 };
$.quickwire( 'bindandrun', conf, opts );
</pre>
</td>
</tr>
<tr bgcolor="#cccccc">
<td colspan="2" class="darkrow"><strong>Example C: Radio Button Show/Hide</strong><br>
The divs to show are mapped to the radios via the &quot;showValues&quot; array. Pass in the values which correspond to a show condition.</td>
</tr>
<tr bgcolor="#cccccc">
<td valign="top"><p>
<input name="radio_c" type="radio" value="1">
radio_c (value 1) <br>
<input name="radio_c" type="radio" value="2">
radio_c (value 2) <br>
<input name="radio_c" type="radio" value="0" checked>
radio_c (value 3) <br>
</p>
<div class="qwbox" id="div_c">This is div_c.</div></td>
<td valign="top">Code:
<pre class="code">
var conf = { radio_c:
{ block: '#div_c',
showValues: [ 1, 2 ] }
};
$.quickwire( 'bindandrun', conf );
</pre>
</td>
</tr>
<tr bgcolor="#bbbbbb">
<td colspan="2" class="darkrow"><strong>Example D: Select Menu Multi Show/Hide</strong><br>
Multi to multi: The divs to show are mapped to the value of the selected option.</td>
</tr>
<tr valign="top" bgcolor="#bbbbbb">
<td><p>select_d:
<select name="select_d" id="select_d">
<option value="dog" selected>Value Dog</option>
<option value="cat">Value Cat</option>
<option value="bus">Value Bus</option>
</select>
<br>
</p>
<div id="div_dog" class="qwbox">This is div_dog.</div>
<div id="div_cat" class="qwbox">This is div_cat.</div>
<div id="div_bus" class="qwbox">This is div_bus.</div>
</td>
<td>
<pre class="code">
var conf = { select_d:
{ block:
{ 'cat': '#div_cat',
'dog': '#div_dog',
'bus': '#div_bus'
}
}
};
$.quickwire( 'bindandrun', conf );
</pre>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

第三步 寫入 JavaScript 讓 QuickWire 初始化
$(document).ready(function() {
var conf = { check_a: '#div_a' };
$.quickwire( 'bindandrun', conf );
var conf = { check_b: '#div_b' };
var opts = { showMethod: 'fadeIn',
hideMethod: 'fadeOut',
showParams: 1000,
hideParams: 200 };
$.quickwire( 'bindandrun', conf, opts );
var conf = { radio_c: { block: '#div_c',
showValues: [ 1, 2 ]
}
};
$.quickwire( 'bindandrun', conf );
var conf = { select_d:
{
block: { 'cat': '#div_cat',
'dog': '#div_dog',
'bus': '#div_bus'
}
}
};
$.quickwire( 'bindandrun', conf );
});

作者網站：http://www.jnathanson.com/
檔案大小：3 KB
檔案下載：http://www.jnathanson.com/pages/jquery/quickwire/quickwire.js
備份下載：下載