jquery工具hello world模板

這是一個非常有前途的工具集，但第一步似乎沒有在任何地方描述過。論壇返回501錯誤，並且沒有準備好啓動html模板。jquery工具hello world模板

下面是我的入門嘗試，但顯然有些事情是錯誤的。你能糾正它，使其顯示一些基本的功能？

<!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>

來源

2013-07-20 secr

你想達到什麼目的？沒有'id =「jqt3」'的元素，我無法找到你創建它的地方。除此之外，我會建議在DOM準備完畢後嘗試添加類'$（document）.ready（function（）{$（「＃jqt3」）。addClass（「active」）;}）;' – twil

您的評論如下版本2： http://jsfiddle.net/tearex/Q5nQs/ – secr

將其分解爲http://jsfiddle.net/EwhzW/並在左側菜單中添加了jQuery作爲庫 – twil

下面是使用jQuery工具的基本工具提示例子

<!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的工具被打破。

來源

2013-07-21 07:38:04 twil

任何機會，使其與jQuery的移動工作？ – secr

那麼，你想與jQuery的移動工作？ jquery.tools.tooltips？你怎麼模擬懸停在觸摸屏上？ – twil

你是對的。氣泡必須始終可見。 – secr

jquery工具hello world模板

回答

相關問題