一个漂亮的表单页面-插件特效-星河码客

使用方法引用js和css文件HTML

How to a stylish setting page

Param 1:

Param 2:

Show basic settings:

Show advanced settings:

你可以看到下一个表单元素:文本字段、开关选择器、滑块,多个复选框、单选按钮、选择器和按钮。现在,请注意,我所有字段分成两部分:hidden_basic_settings hidden_advanced_settings。部分都是无形的默认(display:none)。我将使用开关选择器显示/隐藏我们的隐藏部分。这是非常attractice。你可以点击或拖动这些转换器以幻灯片我们的程式。当然,这让我不得不处理选择的事件。看看这个JS代码:JS$(document).ready(function() { $('#basic_settings').change(function(event, ui) { if ($(this).attr('value') == 'on') { $('.hidden_basic_settings').slideDown(500); } else { $('.hidden_basic_settings').slideUp(500); } }); $('#advanced_settings').change(function(event, ui) { if ($(this).attr('value') == 'on') { $('.hidden_advanced_settings').slideDown(500); } else { $('.hidden_advanced_settings').slideUp(500); } });});

一个漂亮的表单页面

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»