jquery树形复选框菜单_使用jQuery滑动复选框动作菜单

jquery树形复选框菜单

View demo 查看演示 Download Source 下载源

In this tutorial we will create an actions menu with jQuery that appears when checkboxes are selected. This can be a very helpful UI property since we don’t force the user to scroll to the place where the actions are – they just appear whenever the user needs them.

在本教程中，我们将使用jQuery创建一个动作菜单，当选中复选框时，该菜单将出现。 这可能是一个非常有用的UI属性，因为我们不会强迫用户滚动到动作所在的地方–它们只会在用户需要时显示。

Additionally, the user can drag the actions box to the place that is more practical for him, and the box will always follow when the user scrolls the page. It will also show a count of how many checkboxes were selected.

此外，用户可以将动作框拖动到对他更实际的位置，并且当用户滚动页面时，该框将始终跟随。 它还将显示选中了多少个复选框的计数。

We will use a table as an example. Usually, actions are placed at the top and the bottom of a table, and that’s OK if the table is not too big. But since we cannot control the size of the user’s viewport, it is not guaranteed that the actions are close to the users focus. With this solution we make it very easy for the user to perform certain actions on selected items.

我们将以表格为例。 通常，将动作放在表的顶部和底部，如果表不太大，则可以。 但是，由于我们无法控制用户视口的大小，因此不能保证动作接近用户焦点。 使用此解决方案，我们使用户可以非常轻松地对所选项目执行某些操作。

This tutorial got inspired by a similar feature in the mobile version of Gmail. If you open your Gmail account in the Safari browser on the iPhone or iPod Touch, you will notice this little helpful menu.

本教程的灵感来自移动版Gmail中的类似功能。 如果您在iPhone或iPod Touch上的Safari浏览器中打开Gmail帐户，您会注意到这个有用的菜单。

Let’s get started.

让我们开始吧。

标记 (The Markup)

For the markup we will simply create a table with an ID and some checkboxes in the cells:

对于标记，我们只需在单元格中创建一个带有ID和一些复选框的表：

<table id="mytable">
	<tr>
		<td class="check">
			<input id="check_1" name="check_1" type="checkbox" value="1" />
		</td>
		<td>Some Content</td>
	</tr>
	<tr>
		<td class="check">
			<input id="check_2" name="check_2" type="checkbox" value="2" />
		</td>
		<td>Some Content</td>	
	</tr>
</table>

For the actions menu we will have the following markup:

对于动作菜