使用jquery表单更新html

时间:2012-02-26 22:09:59

标签: html ajax jquery-ui jquery-plugins jquery-mobile

所以这就是我想要做的事情。

  • 一个独立的html页面,里面有一些jquery。
  • jquery代码有一个表单(用elemts来捕获Marquee文本,速度,颜色,重复等)
  • 上面捕获了所有表单元素,我需要创建一个滚动文本选框。

我无法弄清楚:

  • 如果任何表单字段值发生更改,HTMl元素(div class =“scroller”)如何更新?

以下是我到目前为止:

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

2 个答案:

答案 0 :(得分:1)

按下提交按钮时调用此方法:

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

答案 1 :(得分:0)

您可以使用onchange事件,例如:

<input onchange="updateMarquee()"/>

以下是快速教程的链接: onchange event