设置旋转框位置 JQuery 移动 (css)
Set spinbox location JQuery Mobile (css)
只是不知道如何将这个旋转框放置在 top-right 角，与 top-left 按钮具有相同的边距。这是我所能得到的，但是 header 似乎已经用这种方法消失了。还尝试在 DOM 加载后使用 jQuery 设置属性，放置在里面等。有人可以帮我解决这个问题，把它放在 里面 dark-grey header 与 "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>
现状：
我想要的样子：
非常感谢！
我认为您的 header 标题有问题。如果您因为需要动态设置而从空标题开始，您可能需要设置占位符文本、添加跨度并填充它，或者使用 ui-title class.
这是一个例子。关于 SpinBox，我刚刚删除了你的双重 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($) {
$.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( " " );
w.d.down = $( "<div>", {
"class": "ui-btn ui-icon-minus ui-btn-icon-notext"
}).html( " " );
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 );
<!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>
请注意：我使用了 SpinBox 的分叉版本（停止点击传播）。
只是不知道如何将这个旋转框放置在 top-right 角，与 top-left 按钮具有相同的边距。这是我所能得到的，但是 header 似乎已经用这种方法消失了。还尝试在 DOM 加载后使用 jQuery 设置属性，放置在里面等。有人可以帮我解决这个问题，把它放在 里面 dark-grey header 与 "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>
现状：
我想要的样子：
非常感谢！
我认为您的 header 标题有问题。如果您因为需要动态设置而从空标题开始，您可能需要设置占位符文本、添加跨度并填充它，或者使用 ui-title class.
这是一个例子。关于 SpinBox，我刚刚删除了你的双重 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($) {
$.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( " " );
w.d.down = $( "<div>", {
"class": "ui-btn ui-icon-minus ui-btn-icon-notext"
}).html( " " );
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 );
<!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>
请注意：我使用了 SpinBox 的分叉版本（停止点击传播）。