jquery 工具你好世界模板答案

【问题标题】：jquery tools hello world templatejquery 工具你好世界模板
【发布时间】：2013-07-20 12:18:48
【问题描述】：

这是一组非常有前途的工具，但似乎没有在任何地方描述最初的步骤。论坛返回501错误，没有准备好启动html模板。

以下是我开始的尝试，但显然有问题。你能更正它以使其显示一些基本功能吗？

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"> </script>
</head>

<body style="text-align:center">

<%-- :mode=jsp: get handle to demo area --%>
<%@ page import="org.flowplayer.demo.*" %>
<c:set var="demoArea" value="${context.toolDemos2}"/>
<% DemoArea area = (DemoArea)pageContext.getAttribute("demoArea"); %>


<style>
#demos {
    background:#fff url(/img/global/gradient/h150_reverse.png) repeat-x scroll 0 -95px;     
    padding:30px 0 30px 40px;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.col {
    margin-right:0;  
    width:280px; 
    border-right:1px dotted #ccc;
    float:left;
}

#col1, #col2 {
    padding-left:30px;      
}

#col2 {
    border-right:0px;       
    width:310px;
}


.cat {
    width:230px;
    margin-top:25px;
}

.cat a {
    display:block;
    text-decoration:none;
    font-size:11px;
    color:#999; 
    margin:2px 0;
}

.cat a:hover {
    color:#333;
}

.cat h3 {
    font-size:14px;
    margin-bottom:2px;
}

.combinations h3 {
    font-weight:bold;
}

.col h2 {
    font-size:20px;
    text-shadow:0 0 3px #fff;
    text-transform:uppercase;
    font-weight:bold;
}

.col h2 strong {
    color:#5A57AB;
}

.pic {
    background:url(${cdn}${jqt}/img/jqt_sprite_medium.png) no-repeat 0 10px;
    height:200px;
    margin:-10px 0 -50px;   
}

#pic-form {
    background-position:0 -200px;       
}

#pic-toolbox {
    background-position:0 -400px;
}
</style>


<script>
$("#jqt3").addClass("active");
</script>

<div id="demos">
    <c:forTokens items="ui,form,toolbox" var="main" delims="," varStatus="j">

        <div class="col" id="col${j.index}">

            <h2>${main} ${j.index < 2 ? '<strong>TOOLS</strong>' : ''}</h2>

            <div class="pic" id="pic-${main}"></div>

            <c:forEach items='<%= area.getCategories((String)pageContext.getAttribute("main")) %>' var="cat" varStatus="i">

                <div class="cat ${cat.title == 'Combinations' ? 'combinations' : ''}">
                    <h3 title="${cat.description}">${cat.title}</h3>

                    <c:forEach items="${cat.demos}" var="demo">
                        <a href="${demo.path}">${demo.title}</a>
                    </c:forEach>
                </div>

                <c:if test="${i.index == 3}"><br clear="all" /></c:if>

            </c:forEach>

        </div> 

    </c:forTokens>

    <div class="clear"></div>
</div>
</body>
</html>

【问题讨论】：

你想达到什么目的？ id="jqt3" 没有元素，我找不到你在哪里创建它。此外，我建议在 DOM 准备好后尝试添加类 $(document).ready(function(){$("#jqt3").addClass("active");});
跟随你的 cmets，这里是第 2 版：jsfiddle.net/tearex/Q5nQs
将其剥离为 jsfiddle.net/EwhzW 并在左侧菜单中添加 jQuery 作为库
谢谢。有一个区别 - 按钮被一个红色方块包围。不过，它已经失去了它的 jquery。 clipular.com/c?11036009=hlmHoX9oNVlJToneA82BgqvakBg&f=.png 预期效果如何？当我将鼠标悬停在按钮上时，没有任何反应......
我的意思是你可以让脚本在悬停在按钮上时显示一个气泡吗？在我看来，这个小提琴似乎没有在 jqtools 上使用的功能。易于检查：当我删除对 jquery.tools.min.js 的外部资源引用时，小提琴也会这样做。

标签： jquery-templates jquery-tools

【解决方案1】：

这是使用 jquery-tools 工具提示的基本示例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>    

<style type='text/css'>
.form {
    margin: 50px;
}

.tooltip {
    display:none;
    background:gray;
    font-size:12px;
    height:30px;
    width:100px;
    padding:5px;
    color:#eee;
}
</style>

<script type='text/javascript'>//<![CDATA[ 

$(document).ready(function(){
    $('form input[type="radio"]').tooltip();
});
//]]>  

</script>
</head>

<body>
<form name="form1" method="post" class="form" action="">
    <input type="radio" name="radio" id="jqt1" value="jqt1" title="Tooltip text 1"><label for="jqt1">label 1</label><br>
    <input type="radio" name="radio" id="jqt2" value="jqt2" title="Tooltip text 2"><label for="jqt2">label 2</label><br>
    <input type="radio" name="radio" id="jqt3" value="jqt3" title="Tooltip text 3"><label for="jqt3">label 3</label><br>
</form>

</body>
</html>

http://jsfiddle.net/79rHK/

在您的小提琴中，指向 jquery 工具的链接已损坏。

【讨论】：

好吧，你想用 jquery mobile 做什么？ jquery.tools.tooltips？您如何模拟触摸屏上的悬停？
你是对的。气泡必须始终可见。
对我而言，手动显示它们比使用某些特定库更容易
view.jquerymobile.com/master/demos/… jqm 中似乎没有气泡功能。不使用外部库在兼容性方面肯定会更好，但是我想将教程模式添加到我正在完成的应用程序中，而 jqm 在视觉效果上似乎不足。
您可以创建这样的功能。看看jquery.tools.tooltip.js。主要部分是trigger，它显示或隐藏工具提示和show/hide methods。