设置旋转箱位置JQuery Mobile（css）

Question

只是无法弄清楚如何将此旋转箱放在右上角，与左上角按钮具有相同的边距。这是尽我所能，但标题似乎已经消失了这种方法。也尝试着在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类。

这里是一个例子。对于纺纱器，我只是删除你的双controlgroup筑巢

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

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

请注意：我使用的纺纱器的分支版本（停止点击传播）。