海淀企业网站制作：带有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

实时下载源代码