Question

我正在寻找一个在我的网络项目中使用的字体选择器工具，它允许用户选择列出的任何字体。我用单选按钮创建了一个小代码，实际上可以工作：

<label style="font-family: Courier;">
    <input type="radio" name="font" value="Courier" />Courier</label>
<label style="font-family: Verdana;">
    <input type="radio" name="font" value="Verdana" />Verdana</label>
<label style="font-family: Arial;">
    <input type="radio" name="font" value="Arial" />Arial</label>
<label style="font-family: Papyrus;">
    <input type="radio" name="font" value="Papyrus" />Papyrus</label>
<label style="font-family: Monotype Corsiva;">
    <input type="radio" name="font" value="Monotype Corsiva" />Monotype Corsiva</label>

我需要在显示之前对这些字体进行分类。这可以通过使用两个主单选按钮“font1”和“font2”来完成。当用户检查“font1”单选按钮时，应显示一些字体，当用户检查“font1”单选按钮时，应显示其他一些字体。有没有办法做到这一点？

OR

替代解决方案可能是创建类似于flametext和cooltext.com的字体数据库。有没有办法设计这种类型的字体选择工具？

我已经使用了你的代码，但仍然没有工作它只会创建组但不隐藏“subradio”按钮所有单选按钮都显示在一个表中，就是这样....但它没有隐藏..我猜功能不起作用......

<a href="#" id="fonts_group_1b">Show font group 1</a>  <a href="#" id="fonts_group_2b">Show font group 2</a>

<fieldset class="groups" id="fonts_group_1" style="dispaly:none">
    <label style="font-family: Courier;">
        <input type="radio" name="font" value="Courier" />Courier</label>
    <label style="font-family: Verdana;">
        <input type="radio" name="font" value="Verdana" />Verdana</label>
</fieldset>
<fieldset class="groups" id="fonts_group_2" style="dispaly:none">
    <label style="font-family: Arial;">
        <input type="radio" name="font" value="Arial" />Arial</label>
    <label style="font-family: Papyrus;">
        <input type="radio" name="font" value="Papyrus" />Papyrus</label>
</fieldset>
<script type="text/javascript">
    $(function() {

        $('a#fonts_group_1b').click(function() {
            $('.groups').hide();
            $('#fonts_group_1').show();
        }
        $('a#fonts_group_2b').click(function() {
            $('.groups').hide();
            $('#fonts_group_2').show();
        }

    });
</script>

Answer 1

其中一个应该引导你走正确的道路。

Answer 2

尝试将单选按钮分组到字段集中：

<fieldset id="fonts_group_1" style="dispaly:none">
    //your radiobuttons
</fieldset>
<fieldset id="fonts_group_2" style="dispaly:none">
    //your radiobuttons
</fieldset>

您可以在正确的jquery脚本中使用$('#fonts_group_1').show();（例如，在检查其他单选按钮的情况下）。

- 编辑：

以下是完整的代码：

HTML：

<a href="#" id="fonts_group_1b">Show font group 1</a> <a href="#" id="fonts_group_2b">Show font group 2</a>

<fieldset class="groups" id="fonts_group_1" style="dispaly:none">
    <label style="font-family: Courier;">
        <input type="radio" name="font" value="Courier"/>Courier</label>
<label style="font-family: Verdana;">
        <input type="radio" name="font" value="Verdana"/>Verdana</label>
</fieldset>

<fieldset class="groups" id="fonts_group_2" style="dispaly:none">
    <label style="font-family: Arial;">
        <input type="radio" name="font" value="Arial"/>Arial</label>
    <label style="font-family: Papyrus;">
        <input type="radio" name="font" value="Papyrus"/>Papyrus</label>
</fieldset>

脚本：

$(function() {

    $('a#fonts_group_1b').click(function() {
        $('.groups').hide();
        $('#fonts_group_1').show();
    });
    $('a#fonts_group_2b').click(function() {
        $('.groups').hide();
        $('#fonts_group_2').show();
    });

});

Answer 3

这样的事情怎么样？如果您愿意，可以重构HTML以使用单选按钮。

http://www.fullfatcode.com/2011/04/10/jquery-font-selector-version-2/

以下是它的演示。

http://www.fullfatcode.com/examples/jqfontselector/

是否有字体选择器工具在用户输入表单中使用它？

3 个答案: