使用jquery格式更新html

一个独立的html页面，里面有一些jquery。这个jquery代码有一个窗体（有elemts来捕捉字幕文本，速度，颜色，重复等）
在上面捕获了所有表单元素之后，我需要创建一个滚动文字框。

我无法弄清楚什么：

如何每当有任何形式的字段值的更改HTML元素（DIV CLASS =“滚动条”）进行更新？

下面是我到目前为止有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Simple jQuery scrolling function by Max Vergelli</title> 
<style type="text/css"> 
    div.scroller, #fast_scroller{ 
     position:relative; 
     height:24px; 
     width:500px; 
     display:block; 
     overflow:hidden; 
     border:#CCCCCC 1px solid; 
    } 
    div.scrollingtext{ 
     position:absolute; 
     white-space:nowrap; 
     font-family:'Trebuchet MS',Arial; 
     font-size:18px; 
     font-weight:bold; 
     color:#000000; 
    } 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" /> 
    <link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/> 

    <script src="http://jquerymobile.com/test/js/jquery.js"></script> 
    <script src="http://jquerymobile.com/test/docs/_assets/js/jqm-docs.js"></script> 
    <script src="http://jquerymobile.com/test/js/jquery.mobile.docs.js"></script> 
    <script src="http://www.vegabit.com/jquery_scroller/jquery.Scroller-1.0.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    //this is the useful function to scroll a text inside an element... 

    function startScrolling(scroller_obj, velocity, start_from){ 
     //bind animation to the children inside the scroller element 
     scroller_obj.children().bind('marquee', function(event,c) { 
      //text to scroll 
      var ob = $(this); 
      //scroller width 
      var sw = parseInt(ob.parent().width()); 
      //text width 
      var tw = parseInt(ob.width()); 
      //text left position relative to the offset parent 
      var tl = parseInt(ob.position().left); 
      //velocity converted to calculate duration 
      var v = velocity>0 && velocity<100 ? (100-velocity)*100 : 5000; 
      //same velocity for different text's length in relation with duration 
      var dr = (v*tw/sw)+v; 
      //is it scrolling from right or left? 
      switch(start_from){ 
      case 'right': 
       //is it the first time? 
       if(typeof c == 'undefined'){ 
        //if yes, start from the absolute right 
        ob.css({ left: sw }); 
        sw = -tw; 
       }else{ 
        //else calculate destination position 
        sw = tl - (tw + sw); 
       }; 
       break; 
      default: 
       if(typeof c == 'undefined'){ 
        //start from the absolute left 
        ob.css({ left: -tw }); 
       }else{ 
        //else calculate destination position 
        sw += tl + tw; 
       }; 
      } 
      //attach animation to scroller element and start it by a trigger 
      ob.animate({left:sw}, 
         { duration:dr, 
          easing:'linear', 
          complete:function(){ob.trigger('marquee');}, 
          step:function(){  
           //check if scroller limits are reached 
           if(start_from == 'right'){ 
            if(parseInt(ob.position().left) < -parseInt(ob.width())){ 
             //we need to stop and restart animation 
             ob.stop(); 
             ob.trigger('marquee'); 
            }; 
           }else{ 
            if(parseInt(ob.position().left) > parseInt(ob.parent().width())){ 
             ob.stop(); 
             ob.trigger('marquee'); 
            }; 
           }; 
          } 
         }); 
     }).trigger('marquee'); 
     //pause scrolling animation on mouse over 
     scroller_obj.mouseover(function(){ 
      $(this).children().stop(); 
     }); 
     //resume scrolling animation on mouse out 
     scroller_obj.mouseout(function(){ 
      $(this).children().trigger('marquee',['resume']); 
     }); 
    }; 

    //the main app starts here... 

    //change the cursor type for each scroller 
    $('.scroller').css("cursor","pointer"); 

    //settings to pass to function 
    var scroller   = $('.scroller'); // element(s) to scroll 
    var scrolling_velocity = 40;    // 1-99 
    var scrolling_from  = 'right';   // 'right' or 'left' 

    //call the function and start to scroll.. 
    startScrolling(scroller, scrolling_velocity, scrolling_from); 

    //create a new scroller but it starts from left... 
    $('#fast_scroller').css("cursor","pointer"); 
    startScrolling($('#fast_scroller'), 75, 'left'); 

}); 
</script> 
</head> 
<body> 

<br /> 
<br /> 


     <div data-role="header" data-theme="f"> 
     <h1>Banner Free*</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 

     <form action="#" method="get"> 

      <div data-role="fieldcontain"> 
      <label for="name">Text Input:</label> 
      <input type="text" name="name" id="name" value="It was nice to meet you :) !!"</input> 
      </div> 

      <div data-role="fieldcontain"> 
       <label for="slider2">Repeat:</label> 
       <select name="slider2" id="slider2" data-role="slider"> 
        <option value="off">Off</option> 
        <option value="on">On</option> 
       </select> 
      </div> 

      <div data-role="fieldcontain"> 
       <label for="slider">Text Speed:</label> 
       <input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" /> 
      </div> 

      <div data-role="fieldcontain"> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <legend>Font styling:</legend> 
       <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" /> 
       <label for="checkbox-6">b</label> 

       <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" /> 
       <label for="checkbox-7"><em>i</em></label> 

       <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" /> 
       <label for="checkbox-8">u</label> 
      </fieldset> 
      </div> 


      <div data-role="fieldcontain"> 
       <fieldset data-role="controlgroup" data-type="horizontal"> 
        <legend>Color:</legend> 
         <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" /> 
         <label for="radio-choice-c">Color1</label> 
         <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" /> 
         <label for="radio-choice-d">Color2</label> 
         <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" /> 
         <label for="radio-choice-e">Color3</label> 
       </fieldset> 
      </div> 

     <div class="ui-body ui-body-b"> 
     <fieldset class="ui-grid-a"> 
       <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div> 
       <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div> 
     </fieldset> 
     </div> 
    </form> 

</div><!-- /content --> 
<div class="scroller"> 
    <div class="scrollingtext"> 
      this is a simple scrolling text! 
    </div> 
</div> 

<div id="fast_scroller"> 
    <div class="scrollingtext"> 
     this is faster! 
    </div> 
</div> 


</body> 
</html>

来源

2012-02-26 gbzygil

调用此当按下提交按钮：

$('form').find(':input').each(function(){ 
    $(this).on('change',function(){ 
     // Manipulate the marquee in here 
     if($(this).val()=='b') { 
      $('.marquee').css('font-weight','bold'); 
     } 
     // etc... 
    }); 
});

来源

2012-02-26 22:17:37 faino

我试过这个，但没有看到任何改变的CSS :(增加了一个警报和弹出显示虽然...（我不得不改变名称=提交到类型= submit）。赞赏您的帮助 – gbzygil 2012-02-26 23:53:58

您需要通过使用条件来查找'input'是否为'checkbox'，'radio'，并且如果它有一个某种形式的“价值”。例如，'if（$（this）.is（'：checkbox'）&& $（this）.is（'：checked'））{/ *在这里处理复选框* /} else if（/ * etc */）{...' – faino 2012-02-27 01:46:32

这是一个不错的主意，thx。但我试图删除if（$（this）.val（）=='b'），但仍然没有看到任何css更改... – gbzygil 2012-02-27 03:39:57

可以使用onchange事件就像这样：

<input onchange="updateMarquee()"/>

这里有一个快速教程的链接： onchange event

来源

2012-02-26 22:18:10 rcplusplus

但我怎样才能得到更新的表单域参数的值传递给它？感谢您的帮助 – gbzygil 2012-02-26 23:54:49

不需要，只需从DOM获取值即可。例如，假设有一个带有“text”标识的文本字段，可以像这样获取它的文本值：var newValue = document.getElementById（“text”）.value'。然后只需更新选取框并用新的值替换新的旧值。 – rcplusplus 2012-02-27 01:06:53

使用jquery格式更新html

回答

相关问题