0

今回は助けが必要です。現在、ポーカー クライアントを開発していて、1 つの問題が発生しました。

スライダーのバブルが適切に 10 進数を出力することができません。

スライダー画像: http://norwaydict.com/slider.jpg

Jquery モバイル スライダー プラグインを使用しています。デスクトップ ブラウザでの出力は問題ありませんが、iPad での出力は同じではありません。iPad では 10 進数が正しく出力されますが、数値が 1 または 0.40 の場合は 1.00 または 0.40 と出力されるはずですが、1 または 0.4 と出力され、何らかの形でそれらの数値が丸められます。

役立つ場合のプラグイン コード:

/*!
 * jQuery Mobile v1.0b2
 * http://jquerymobile.com
 * Copyright 2010, jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
/*!
* jQuery UI Widget @VERSION
*
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Widget
*/

/*
* jQuery Mobile Framework : "slider" plugin
* Copyright (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* Forked by Elmundio87 to add vertical orientation
* http://jquery.org/license
*/

( function( $, undefined ) {

$.widget( "mobile.slider", $.mobile.widget, {
options: {
    theme: null,
    trackTheme: null,
    disabled: false,
    initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"
},

_create: function() {

    // TODO: Each of these should have comments explain what they're for
    var self = this,

        control = this.element,

        parentTheme = control.parents( "[class*='ui-bar-'],[class*='ui-body-']" ).eq( 0 ),

        parentTheme = parentTheme.length ? parentTheme.attr( "class" ).match( /ui-(bar|body)-([a-z])/ )[ 2 ] : "c",

        theme = this.options.theme ? this.options.theme : parentTheme,

        trackTheme = this.options.trackTheme ? this.options.trackTheme : parentTheme,

        cType = control[ 0 ].nodeName.toLowerCase(),

        selectClass = ( cType == "select" ) ? "ui-slider-switch" : "",

        controlID = control.attr( "id" ),

        labelID = controlID + "-label",

        label = $( "[for='"+ controlID +"']" ).attr( "id", labelID ),

        val = function() {
            //$('#pool_balance_cashier').html('Slider value3: ' + parseFloat( control.val() ).toFixed(1));

            return  cType == "input"  ? parseFloat( control.val() ).toFixed(2)  : control[0].selectedIndex;
        },

        min =  cType == "input" ? parseFloat( control.attr( "min" ) ) : 0,

        max =  cType == "input" ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length-1,

        sliderOrientation = control.attr( "sliderOrientation") || "horizontal",

        step = window.parseFloat( control.attr( "step" ) || 1 ),     
        //step = (cType === "input") ? parseFloat(control.attr("step")) : 0,


        slider = $( "<div class='ui-slider-" + sliderOrientation + " " + selectClass + " ui-btn-down-" + trackTheme +
                                " ui-btn-corner-all' role='application'></div>" ),

        handle = $( "<a href='#' class='ui-slider-handle-"+sliderOrientation +"'></a>" )
            .appendTo( slider )
            .buttonMarkup({ corners: true, theme: theme, shadow: true })
            .attr({
                "role": "slider",
                "aria-valuemin": min,
                "aria-valuemax": max,
                "aria-valuenow": val(),
                "aria-valuetext": val(),
                "title": val(),
                "aria-labelledby": labelID
            }),
        options;

    $.extend( this, {
        slider: slider,
        handle: handle,
        dragging: false,
        beforeStart: null
    });

    if ( cType == "select" ) {

        slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );

        options = control.find( "option" );

        control.find( "option" ).each(function( i ) {

            var side = !i ? "b":"a",
                corners = !i ? "right" :"left",
                theme = !i ? " ui-btn-down-" + trackTheme :" ui-btn-active";

            $( "<div class='ui-slider-labelbg ui-slider-labelbg-" + side + theme + " ui-btn-corner-" + corners + "'></div>" )
                .prependTo( slider );

            $( "<span class='ui-slider-label ui-slider-label-" + side + theme + " ui-btn-corner-" + corners + "' role='img'>" + $( this ).text() + "</span>" )
                .prependTo( handle );
        });

    }

    label.addClass( "ui-slider" );

    // monitor the input for updated values
    control.addClass( cType === "input" ? "ui-slider-input" : "ui-slider-switch" )
        .change( function() {
            self.refresh( val(), true );
        })
        .keyup( function() { // necessary?
            self.refresh( val(), true, true );
        })
        .blur( function() {
            self.refresh( val(), true );
        });

    // prevent screen drag when slider activated
    $( document ).bind( "vmousemove", function( event ) {
        if ( self.dragging ) {
            self.refresh( event );
            return false;
        }
    });

    slider.bind( "vmousedown", function( event ) {
        self.dragging = true;

        if ( cType === "select" ) {
            self.beforeStart = control[0].selectedIndex;
        }
        self.refresh( event );
        return false;
    });

    slider.add( document )
        .bind( "vmouseup", function() {
            if ( self.dragging ) {

                self.dragging = false;

                if ( cType === "select" ) {

                    if ( self.beforeStart === control[ 0 ].selectedIndex ) {
                        //tap occurred, but value didn't change. flip it!
                        self.refresh( !self.beforeStart ? 1 : 0 );
                    }
                    var curval = val();
                    var snapped = Math.round( curval / ( max - min ) * 100 );
                    handle
                        .addClass( "ui-slider-handle-snapping" )
                        .css( "left", snapped + "%" )
                        .animationComplete( function() {
                            handle.removeClass( "ui-slider-handle-snapping" );
                        });
                }
                return false;
            }
        });

    slider.insertAfter( control );

    // NOTE force focus on handle
    this.handle
        .bind( "vmousedown", function() {
            $( this ).focus();

               //check cashier slider checkboxes off
               $('#addchips_min').removeClass('pool_checkbox_checked').addClass('pool_checkbox');
               $('#addchips_max').removeClass('pool_checkbox_checked').addClass('pool_checkbox');   

               $('#addchipsLobby_min').removeClass('pool_checkbox_checked').addClass('pool_checkbox');
               $('#addchipsLobby_max').removeClass('pool_checkbox_checked').addClass('pool_checkbox');          

        })
        .bind( "vclick", false );

    this.handle
        .bind( "keydown", function( event ) {
            var index = val();      

            if ( self.options.disabled ) {
                return;
            }

            // In all cases prevent the default and mark the handle as active
            switch ( event.keyCode ) {
             case $.mobile.keyCode.HOME:
             case $.mobile.keyCode.END:
             case $.mobile.keyCode.PAGE_UP:
             case $.mobile.keyCode.PAGE_DOWN:
             case $.mobile.keyCode.UP:
             case $.mobile.keyCode.RIGHT:
             case $.mobile.keyCode.DOWN:
             case $.mobile.keyCode.LEFT:
                event.preventDefault();

                if ( !self._keySliding ) {
                    self._keySliding = true;
                    $( this ).addClass( "ui-state-active" );
                }
                break;
            }

            // move the slider according to the keypress
            switch ( event.keyCode ) {
             case $.mobile.keyCode.HOME:
                self.refresh( min );
                break;
             case $.mobile.keyCode.END:
                self.refresh( max );
                break;
             case $.mobile.keyCode.PAGE_UP:
             case $.mobile.keyCode.UP:
             case $.mobile.keyCode.RIGHT:
                self.refresh( index + step );
                break;
             case $.mobile.keyCode.PAGE_DOWN:
             case $.mobile.keyCode.DOWN:
             case $.mobile.keyCode.LEFT:
                self.refresh( index - step );
                break;
            }
        }) // remove active mark
        .keyup( function( event ) {
            if ( self._keySliding ) {
                self._keySliding = false;
                $( this ).removeClass( "ui-state-active" );
            }
        });

    this.refresh(undefined, undefined, true);
},

refresh: function( val, isfromControl, preventInputUpdate ) {

    if ( this.options.disabled ) { return; }

    var control = this.element, percent,
        cType = control[0].nodeName.toLowerCase(),
        min = cType === "input" ? parseFloat( control.attr( "min" ) ) : 0,
        max = cType === "input" ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length - 1;
        sliderOrientation = control.attr( "sliderOrientation") || "horizontal";

    if ( typeof val === "object" ) {
        var data = val,
            // a slight tolerance helped get to the ends of the slider
            tol = 8;

        if(sliderOrientation == "horizontal"){  
            if ( !this.dragging || data.pageX < this.slider.offset().left - tol || data.pageX > this.slider.offset().left + this.slider.width() + tol ) {return;}
        }
        else
        {
            if ( !this.dragging || data.pageY < this.slider.offset().top - tol || data.pageY > this.slider.offset().top + this.slider.height() + tol ) {return;}
        }


        if(sliderOrientation == "horizontal")
        {
          percent = Math.round( ( ( data.pageX - this.slider.offset().left ) / this.slider.width() ) * 100 );
        }
        else
        {
          percent = Math.round( ( ( data.pageY - this.slider.offset().top ) / this.slider.height() ) * 100 );
        }

    } else {
        if ( val == null ) {
            val = cType === "input" ? parseFloat( control.val() ) : control[0].selectedIndex;
        }
        percent = ( parseFloat( val ) - min ) / ( max - min ) * 100;
    }

    if ( isNaN( percent ) ) {
        return;
    }

    if ( percent < 0 ) {
        percent = 0;
    }

    if ( percent > 100 ) {
        percent = 100;
    }



    //var newval = Math.round( ( percent / 100 ) * ( max - min ) ) + min;

    // newval needs to support floating point min / max values, and must round to the step value
    var newval = (percent / 100) * (max - min) + min;
    newval -= (((newval - min) * 100) % (0.01 * 100)) / 100;
    //newval = Math.round(newval * 100 + 0.01) / 100;
    newval = Utils.formatFloatVal((newval * 100 + 0.01) / 100, false, true);
    //$('#pool_balance_cashier').html('Slider value: ' + newval);

    if(canvas != null){
        if(canvas.width < 560){ //only for iphone
          $('#iphone_amountIndicator').html('<br> ' + newval); 
          $('#slider-bet').hide();
          $('#slider-bet .ui-slider-handle').hide();
        }else{
          $('#iphone_amountIndicator').empty();
          $('#slider-bet').show();
        }
    }

    //set div that indicates how much we choose to bet with slider
    //$(".amountIndicator").width(percent * 280 / 100);
    if(control.attr('id') == 'slider-cashier'){
        $("#amountIndicator_settings").width(percent * 280 / 102);
    }
    else if(control.attr('id') == 'slider-lobby-cashier'){
        $("#amountIndicator_lobby").width(percent * 280 / 100);
    }
    else{
        $("#amountIndicator_pool").width(percent * 280 / 100);
    }


    //set label amount to bet/raise button
    //$('#prc_pool_notice').html(' <br><br> ----- Slider value: ' + newval + ' this.id: ' + control.attr( "id" ) + ' ----- <br>');
    if(buttons.btns != null){
        if(buttons.btns[3].active){
            buttons.btns[3].label_amount = GL_CURRENCY_SIGN+newval;   
        }
        else if(buttons.btns[4].active){
            buttons.btns[4].label_amount = '€'+newval;      
        }
    }


    if ( newval < min ) {
        newval = min;
    }

    if ( newval > max ) {
        newval = max;
    }

    // Flip the stack of the bg colors
    if ( percent > 60 && cType === "select" ) {
        // TODO: Dead path?
    }


    if(sliderOrientation == "horizontal")
    {
        //for slider cahsier -> not to very end of slide panel
        if(control.attr('id') != 'slider-bet'){
            this.handle.css( "left", percent / 1.3 + "%" ); 
            if(percent > 50){
                this.handle.css( "left", percent/1.17 + "%" ); 
            }       
        }else{
            this.handle.css( "left", percent + "%" ); 
        }
    }
    else
    {
        this.handle.css( "top", percent + "%" );
    }

    this.handle.attr( {
            "aria-valuenow": cType === "input" ? newval : control.find( "option" ).eq( newval ).attr( "value" ),
            "aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).text(),
            title: newval 
        });

    // add/remove classes for flip toggle switch
    if ( cType === "select" ) {
        if ( newval === 0 ) {
            this.slider.addClass( "ui-slider-switch-a" )
                .removeClass( "ui-slider-switch-b" );
        } else {
            this.slider.addClass( "ui-slider-switch-b" )
                .removeClass( "ui-slider-switch-a" );
        }
    }

    if ( !preventInputUpdate ) {
        // update control"s value
        if ( cType === "input" ) {
            control.val( newval );
        } else {
            control[ 0 ].selectedIndex = newval;
        }
        if ( !isfromControl ) {
            control.trigger( "change" );
        }
    }
},

enable: function() {
    this.element.attr( "disabled", false );
    this.slider.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
    return this._setOption( "disabled", false );
},

disable: function() {
    this.element.attr( "disabled", true );
    this.slider.addClass( "ui-disabled" ).attr( "aria-disabled", true );
    return this._setOption( "disabled", true );
}

});

  //auto self-init widgets
 $( document ).bind( "pagecreate create", function( e ){

$( $.mobile.slider.prototype.options.initSelector, e.target )
    .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
    .slider();

  });

})( jQuery );

感じる

    val = function() {
          //$('#pool_balance_cashier').html('Slider value3: ' + parseFloat( control.val() ).toFixed(1));

          return  cType == "input"  ? parseFloat( control.val() ).toFixed(2)  :   control[0].selectedIndex;
    },

アウトプットに関係するもの。

あなたがこれを手伝ってくれるなら、感謝します。ありがとう！

4

1 に答える 1

0

HTML5データtype="number"が原因である可能性があるのは、それがフィールドのレンダリング方法である場合です。iOSでは、末尾のゼロを削除します。気に障る。一般的な修正は、type="text"フィールドにすることです。

于 2012-08-22T19:13:59.150 に答える