海淀企业网站制作：带有css和jQuery的经典Digg样式单选按钮

2019.05.27 海淀企业网站制作

107

我相信很多互联网用户都会记得以前Digg是一个蓬勃发展的社交新闻社区。虽然该公司在最近几年迅速从轨道上跌落，他们的原始设计模式将永远围绕着灵感。特别是当你在网站设计中考虑到现代HTML 5/CSS 3趋势时。

海淀企业网站制作在本教程中，我想解释如何构建类似于旧Digg类别选择的自定义单选按钮链接。您可以单击任何一组链接，这些链接也将触发相关无线电输入的活动状态。这是使用简单JavaScript来增强用户体验的Web表单样式的最佳方法之一。

海淀企业网站制作

开始

显然，我仍然在使用默认的HTML 5 doctype标记以及一些典型的脚本包含。我正在使用最新的jQuery1.8.0和Google的HTML5shiv库。对于CSS和JS，我创建了两个外部文件，名为Style.css和script.js.

<!doctype html><html lang="en"><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Digg-Style Radio Select Buttons</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script><!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>

现在HTML代码开始变得有趣的地方是我们的表单数据。我创建了一个空白表单，没有提交方法，只有典型的无线电输入字段。这个列表太长了，无法完整复制。但我列举了几个例子，这样你就可以看到我们要做的是什么：

<form name="diggform" id="diggform" method="post" action="index.html">
  <header id="cathead">
    <h2>Choose a Topic</h2>
    <p>Tell us where your submission should be listed. Select a category below which best represents your news.</p>
  </header>
	
  <!-- radio list -->
  <input type="radio" name="category" value="apple">
  <input type="radio" name="category" value="design">
  <input type="radio" name="category" value="gadgets">
  <input type="radio" name="category" value="hardware">
  <input type="radio" name="category" value="technews">
  <input type="radio" name="category" value="linuxunix">
  <input type="radio" name="category" value="microsoft">
  ...

注意名字，姓名这些输入的属性都是相同的。这是如何创建一组单选按钮，这些按钮都是来自同一字段的所有可能的选择。当您提交表单时，您可以按名称类别访问变量(例如：$_POST['category']).

value属性是实际传递给后端脚本的数据。因此，如果我们选择Apple单选按钮并提交表单，则表示正在传递的当前数据。现在，要定制这一点，我想要创建一个表格结构的链接行，您可以点击，以触发选择的任何这些单选按钮。

构建链接

现在，海淀企业网站制作对于文档的这一部分，您可以选择使用表元素。链接被分割成行，所以这是一种可能性。但是，由于行不包含相同数量的链接，所以我只是使用<div>添加的类.row.

<div class="row">
  <h3>Technology</h3>
  <a href="#" class="c" id="apple">Apple</a>
  <a href="#" class="c" id="design">Design</a>
  <a href="#" class="c" id="gadgets">Gadgets</a>
  <a href="#" class="c" id="hardware">Hardware</a>
  <a href="#" class="c" id="technews">Industry News</a>
  <a href="#" class="c" id="linuxunix">Linux/Unix</a>
  <a href="#" class="c" id="microsoft">Microsoft</a>
  <a href="#" class="c" id="mods">Mods</a>
  <a href="#" class="c" id="programming">Programming</a>
  <a href="#" class="c" id="security">Security</a></div>

每个锚链接将表现为inline-block元素在行中相互浮动。ID属性应该与每个单选按钮上的value属性直接关联。这可能是使用jQuery进行直接选择的最快方法。

但是在进入脚本之前，让我们先来看看一些默认的CSS属性。我正在使用块风格的效果，与额外的填充和悬停状态的颜色链接。

#catlinks .row { display: block; border-bottom: 1px solid #dbdbdb; margin-bottom: 5px; padding: 11px 4px; padding-bottom: 18px; font-size: 1.2em; }#catlinks .row h3 { display: inline-block; color: #5c5c5c; font-weight: bold; width: 140px; }#catlinks .row a { font-size: 0.9em; font-weight: bold; padding: 7px 8px; margin-right: 3px; border: 1px solid #fff; }#catlinks .row a:hover { border: 1px solid #dbdbdb; background: #eee; }#catlinks .row a.sel { background: #6b7fdd; color: #fff; border: 1px solid #6470a9; }#catlinks .row a.sel:hover { background: #4964e1; }

我还使用了一个额外的类.sel若要表示任何当前选定的链接，请执行以下操作。重要的是要记住，单选按钮都是集合的一部分，所以一次只能选择一个选项。因此，添加.sel类是一种快速扫描页面并找到当前选定值的方法。

但是在CSS代码中，我们可以添加一行来隐藏页面上的所有单选按钮。使用display: none;从视图中删除“收音机”类型的输入是一个非常简单的过程。但是，如果您需要调试脚本，那么在CSS中注释掉这一行可能是值得的。

input[type=radio] { display: none; /* comment out to display all radio buttons */ }

计算jQuery

关于这个web应用程序的最后一点，让我们看看我扩展的前端脚本。我创建了一个名为script.js它应该包含所有的内部jQuery操作。

我们只需要管理一个事件处理程序，即单击事件到.row元素。我们给锚提供了一个.c类，但这很快就会在jQuery选择器字符串中混淆。下面是我的脚本文件的前几行：

$(document).ready(function(){
  $(".row a").on("click", function(e){
    e.preventDefault();
		
    if($(this).hasClass("sel")) { 
      // already selected 
    } else {

在.之后.on()单击我要将事件传递给一个新函数的事件处理程序。我们可以使用e.preventDefault()若要限制锚链接的任何正常活动，请执行以下操作。这意味着应该完全忽略href值，并且我们不会将该散列字符添加到URL的末尾。

我们还想检查当前链接是否有一个.sel已经加了。如果是这样的话，我们就知道这个单选按钮已经被选中了，我们不需要做任何事情。否则，用户单击要选择的新链接，然后运行以下代码：

      $("a.sel").removeClass("sel");
      $(this).addClass("sel");
			
      var rid = $(this).attr('id');
      var value = '[value="'+rid+'"]';
			
      $('input:radio[name="category"]').filter(value).attr('checked', true);			
    }
  });});

第一行检查类的所有其他锚链接。.sel文件里的任何地方。由于需要选择这个新链接，所以我们删除任何其他类并将其添加到新的选择中。

接下来，我设置了两个变量-第一个变量从所选链接中提取当前ID值。记住，我们需要这个来针对适当的输入元素。我使用jQuery attribute=value selector语法。最后的选择之所以难以理解，是因为我们正在搜索大量的输入元素。

从input:radio[name="category"]我们得到了分组在“类别”下的输入收音机的整个列表。然后jQuery的.filter()方法可以将结果限制为一个具有匹配值属性的唯一无线电输入。这可以在同一个文档中运行多次，您应该始终选择正确的单选按钮！

Digg-style radio buttons with jQuery - preview demo screenshot

实时下载源代码

最后思想

海淀企业网站制作希望本教程能向你展示网页设计的现代时代是多么的可扩展。来自世界各地的开发人员可以从将这些技术集成到动态布局中获益。此外，其中许多趋势也将适用于移动设备，因为移动设备的智能手机和平板电脑的受众迅速增长。

您应该查看现场演示，并随时下载我的源代码副本。您可以将此技术用于任何个人和商业项目。但也看看你是否可以增强任何功能，以更好地满足自己的需要。另外，你也可以在下面的讨论后与我们分享你的想法或问题。

海淀企业网站制作：带有css和jQuery的经典Digg样式单选按钮

开始

构建链接

计算jQuery

最后思想

相关推荐