设置spinbox位置JQuery Mobile（css）

Question

无法弄清楚如何将此旋转框放置在右上角，其边距与te左上角相同。这是我可以得到的，但标题似乎已经消失了这种方法。还尝试在DOM加载后使用jQuery设置属性，放置在内部等等。有人可以帮我这个，将置于深灰色标题中，与“terug”具有相同的边距按钮？我目前的HTML代码如下，目前的情况以及我想要的方式也在下面。

<div data-role="page" id="RoomList">
<div data-role="header" data-position="fixed">
    <%--<h1>Ruimten</h1>--%>
    <a href="#InventoryDetails" data-icon="back" class="ui-btn-left">Terug</a>

    <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right">
        <input id="PageNavigator" type="number" data-role="spinbox" value="1" data-mini="true" style="text-align:center; width:40px;" />
    </div>

</div>
<div data-role="content">
    <div class="scrollable">
        <table data-role="table" class="ui-responsive ui-table ui-table-reflow"><tbody></tbody></table>
    </div>
</div>

现状：

我希望如何：

非常感谢提前！

Answer 1

我相信您的标题标题存在问题。如果您开始使用空标题，因为您需要动态设置它，您可能需要设置占位符文本，添加范围并填充它，或使用ui-title类。

这是一个例子。关于SpinBox，我刚删除了你的双controlgroup嵌套

＆＃13;

＆＃13;

/*
 * ahaith/jquery-mobile-spinbox
 * forked from jtsage/jquery-mobile-spinbox
 * https://github.com/ahaith/jquery-mobile-spinbox
*/

/*
 * jQuery Mobile Framework : plugin to provide number spinbox.
 * Copyright (c) JTSage
 * CC 3.0 Attribution.  May be relicensed without permission/notification.
 * https://github.com/jtsage/jquery-mobile-spinbox
 */

(function($) {
	$.widget( "mobile.spinbox", {
		options: {
			// All widget options
			dmin: false,
			dmax: false,
			step: false,
			theme: false,
			mini: null,
			repButton: true,
			version: "1.4.4-2015092400",
			initSelector: "input[data-role='spinbox']",
			clickEvent: "vclick",
			type: "horizontal", // or vertical
		},
		_decimalPlaces: function (num) {
			var match = (''+num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
			if (!match) { return 0; }
			return Math.max(
				0,
				(match[1] ? match[1].length : 0)
				- (match[2] ? +match[2] : 0)
			);
		},
		_sbox_run: function () {
			var w = this,
				timer = 150;
				
			if ( w.g.cnt > 10 ) { timer = 100; }
			if ( w.g.cnt > 30 ) { timer = 50; }
			if ( w.g.cnt > 60 ) { timer = 20; }
			
			w.g.didRun = true;
			w._offset( this, w.g.delta );
			w.g.cnt++;
			w.runButton = setTimeout( function() { w._sbox_run(); }, timer );
		},
		_offset: function( obj, direction ) {
			var tmp,
				w = this,
				o = this.options;
				
			if ( !w.disabled ) {
				if ( direction < 1 ) {
					tmp = (parseFloat( w.d.input.val() ) - o.step).toFixed(w.places);
					if ( tmp >= o.dmin ) { 
						w.d.input.val( tmp ).trigger( "change" );
					}
				} else {
					tmp = (parseFloat( w.d.input.val() ) + o.step).toFixed(w.places);
					if ( tmp <= o.dmax ) { 
						w.d.input.val( tmp ).trigger( "change" );
					}
				}
			}
		},
		_create: function() {
			var w = this,
				o = $.extend( this.options, this.element.data( "options" ) ),
				d = {
					input: this.element,
					inputWrap: this.element.parent()
				},
				touch = ( typeof window.ontouchstart !== "undefined" ),
				drag =  {
					eStart : (touch ? "touchstart" : "mousedown")+".spinbox",
					eMove  : (touch ? "touchmove" : "mousemove")+".spinbox",
					eEnd   : (touch ? "touchend" : "mouseup")+".spinbox",
					eEndA  : (touch ? 
						"mouseup.spinbox touchend.spinbox touchcancel.spinbox touchmove.spinbox" :
						"mouseup.spinbox"
					),
					move   : false,
					start  : false,
					end    : false,
					pos    : false,
					target : false,
					delta  : false,
					tmp    : false,
					cnt    : 0
				};
				
			w.d = d;
			w.g = drag;
			
			o.theme = ( ( o.theme === false ) ?
					$.mobile.getInheritedTheme( this.element, "a" ) :
					o.theme
				);
			
			if ( w.d.input.prop( "disabled" ) ) {
				o.disabled = true;
			}
			
			if ( o.dmin === false ) { 
				o.dmin = ( typeof w.d.input.attr( "min" ) !== "undefined" ) ?
					parseInt( w.d.input.attr( "min" ), 10 ) :
					Number.MAX_VALUE * -1;
			}
			if ( o.dmax === false ) { 
				o.dmax = ( typeof w.d.input.attr( "max" ) !== "undefined" ) ?
					parseInt(w.d.input.attr( "max" ), 10 ) :
					Number.MAX_VALUE;
			}
			if ( o.step === false) {
				o.step = ( typeof w.d.input.attr( "step") !== "undefined" ) ?
					parseFloat( w.d.input.attr( "step" ) ) :
					1;
				w.places = w._decimalPlaces(o.step);
			}
			
			o.mini = ( o.mini === null ? 
				( w.d.input.data("mini") ? true : false ) :
				o.mini );
				
			
			w.d.wrap = $( "<div>", {
					"data-role": "controlgroup",
					"data-type": o.type,
					"data-mini": o.mini,
					"data-theme": o.theme
				} )
				.insertBefore( w.d.inputWrap )
				.append( w.d.inputWrap );
			
			w.d.inputWrap.addClass( "ui-btn" );
			w.d.input.css( { textAlign: "center" } );
			
			if ( o.type !== "vertical" ) {
				w.d.inputWrap.css( { 
					padding: o.mini ? "1px 0" : "4px 0 3px" 
				} );
				w.d.input.css( { 
					width: o.mini ? "40px" : "50px" 
				} );
			} else {
				w.d.wrap.css( { 
					width: "auto"
				} );
				w.d.inputWrap.css( {
					padding: 0
				} );
			}
			
			w.d.up = $( "<div>", {
				"class": "ui-btn ui-icon-plus ui-btn-icon-notext"
			}).html( "&nbsp;" );
			
			w.d.down = $( "<div>", {
				"class": "ui-btn ui-icon-minus ui-btn-icon-notext"
			}).html( "&nbsp;" );
			
			if ( o.type !== "vertical" ) {
				w.d.wrap.prepend( w.d.down ).append( w.d.up );
			} else {
				w.d.wrap.prepend( w.d.up ).append( w.d.down );
			}
			
			w.d.wrap.controlgroup();
			
			if ( o.repButton === false ) {
				w.d.up.on( o.clickEvent, function(e) { 
					e.preventDefault();
					w._offset( e.currentTarget, 1 ); 
				});
				w.d.down.on( o.clickEvent, function(e) {
					e.preventDefault();
					w._offset( e.currentTarget, -1 );
				});
			} else {
				w.d.up.on( w.g.eStart, function(e) {
					e.stopPropagation();
					w.d.input.blur();
					w._offset( e.currentTarget, 1 );
					w.g.move = true;
					w.g.cnt = 0;
					w.g.delta = 1;
					if ( !w.runButton ) {
						w.g.target = e.currentTarget;
						w.runButton = setTimeout( function() { w._sbox_run(); }, 500 );
					}
				});
				w.d.down.on(w.g.eStart, function(e) {
					e.stopPropagation();
					w.d.input.blur();
					w._offset( e.currentTarget, -1 );
					w.g.move = true;
					w.g.cnt = 0;
					w.g.delta = -1;
					if ( !w.runButton ) {
						w.g.target = e.currentTarget;
						w.runButton = setTimeout( function() { w._sbox_run(); }, 500 );
					}
				});
				w.d.up.on(w.g.eEndA, function(e) {
					if ( w.g.move ) {
						e.preventDefault();
						clearTimeout( w.runButton );
						w.runButton = false;
						w.g.move = false;
					}
				});
				w.d.down.on(w.g.eEndA, function(e) {
					if ( w.g.move ) {
						e.preventDefault();
						clearTimeout( w.runButton );
						w.runButton = false;
						w.g.move = false;
					}
				});
			}
			
			if ( typeof $.event.special.mousewheel !== "undefined" ) { 
				// Mousewheel operation, if plugin is loaded
				w.d.input.on( "mousewheel", function(e,d) {
					e.preventDefault();
					w._offset( e.currentTarget, ( d < 0 ? -1 : 1 ) );
				});
			}
			
			if ( o.disabled ) {
				w.disable();
			}
			
		},
		disable: function(){
			// Disable the element
			var dis = this.d,
				cname = "ui-state-disabled";
			
			dis.input.attr( "disabled", true ).blur();
			dis.inputWrap.addClass( cname );
			dis.up.addClass( cname );
			dis.down.addClass( cname );
			this.options.disabled = true;
		},
		enable: function(){
			// Enable the element
			var dis = this.d,
				cname = "ui-state-disabled";
			
			dis.input.attr( "disabled", false );
			dis.inputWrap.removeClass( cname );
			dis.up.removeClass( cname );
			dis.down.removeClass( cname );
			this.options.disabled = false;
		}
	});
})( jQuery );

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="RoomList">
    <div data-role="header" data-position="fixed">
      <a href="#InventoryDetails" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back">Terug</a>
      <h1 class="ui-title"></h1>
      <div class="ui-btn-right">
        <input id="PageNavigator" data-mini="true" type="number" data-role="spinbox" value="1" />
      </div>
    </div>
    <div data-role="content">
      <div class="scrollable">
        <table data-role="table" class="ui-responsive ui-table ui-table-reflow">
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

请注意：我使用了SpinBox的分叉版本（停止点击传播）。