使用 Jquery 自定义按钮和滑块(大小、位置、标题大小）
Button and Slider customizing (Size, Position, Caption size) with Jquery
我使用c，php和javascript为我的家庭自动化总线系统构建了一个Web界面。该功能工作正常，但我在使用 JQuery 为我的按钮和滑块实现正确的样式时遇到了问题。
我想做的是将按钮和滑块放在彼此相邻的"行"上，并能够调整它们的大小和样式，以便与常规PC浏览器和我的iOS设备一起使用。
- 按钮大小
适用于我的所有设备，但是从iOS设备查看时，更改该部分中的按钮字体大小不会影响字体大小。我通过在 html 正文中设置字体大小来帮助自己解决这个问题。这种行为有明显的原因吗？
有人可以给我指出一个例子，其中有一个按钮与滑块和显示滑块值的数字字段对齐。当然，我已经查看了标准的Jquery滑块示例，但是无论我尝试使用类来操作样式的语法组合，我从未使用过我想要的大小，位置（内联）和标签的内联滑块。
下面是我的代码作为参考。我用 c++ 玩过 Arduinos 和 Raspberry 编码，但显然我或多或少没有任何 html 或 javascript 经验，所以我真的很感激你的帮助！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wipperaller</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body{background-color:white;}
button{
width: 180px;
height: 90px;
font-size: 50px;
padding-top: 5px;
padding-bottom: 5px;
};
myslider{
width: 1em;
height: 1em;
cursor: default;}
</style>
<script>
function handlerName(busCommand)
{
alert(busCommand.data.msg);
}
function SendBusCommand(inputData) {
$.ajax({
type: "POST",
url: "socketclient_01.php",
data: inputData.data,
cache: false,
success: function(html){
$("#results").append(html); // hier wird dann der inhalt,
// den deine datei ausgibt,
//in das element mit der id results eingetragen
}
});
}
$(document).ready(function(){
$("button").button();
$("#SZToggle").bind("click", {destination: "11130", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#SZAn").bind("click", {destination: "11130", com: 0x32, param1: 0x64, param2: 0x00}, SendBusCommand);
$("#SZAus").bind("click", {destination: "11130", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#SZKabuff").bind("click", {destination: "10206", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#WZToggle").bind("click", {destination: "10106", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#WZWToggle").bind("click", {destination: "10102", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#EZToggle").bind("click", {destination: "11030", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#EZAn").bind("click", {destination: "11030", com: 0x32, param1: 0x64, param2: 0x00}, SendBusCommand);
$("#EZAus").bind("click", {destination: "11030", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#EGAus").bind("click", {destination: "32872", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#OGAus").bind("click", {destination: "32882", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#AllesAus").bind("click", {destination: "32868", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#KuToggle").bind("click", {destination: "10104", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#AUELicht").bind("click", {destination: "10403", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#AUTLicht").bind("click", {destination: "10404", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#AUSteck").bind("click", {destination: "10405", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#BADSLicht").bind("click", {destination: "10205", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#BADDLicht").bind("click", {destination: "10302", com: 0x35, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#AlleAuf").bind("click", {destination: "32968", com: 0x32, param1: 0x64, param2: 0x00}, SendBusCommand);
$("#AlleZu").bind("click", {destination: "32968", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#EGAuf").bind("click", {destination: "32970", com: 0x32, param1: 0x64, param2: 0x00}, SendBusCommand);
$("#EGZu").bind("click", {destination: "32970", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#EGAuf").bind("click", {destination: "32972", com: 0x32, param1: 0x64, param2: 0x00}, SendBusCommand);
$("#EGZu").bind("click", {destination: "32972", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#WZJalFrontAuf").bind("click", {destination: "32974", com: 0x32, param1: 0x64, param2: 0x00}, SendBusCommand);
$("#WZJalFrontZu").bind("click", {destination: "32974", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
$("#WZJalSeiteAuf").bind("click", {destination: "32974", com: 0x32, param1: 0x64, param2: 0x00}, SendBusCommand);
$("#WZJalSeiteZu").bind("click", {destination: "32974", com: 0x32, param1: 0x00, param2: 0x00}, SendBusCommand);
});
</script>
</head>
<body>
<div class="gobalwrapper" style="font-size:24px">
<h1>Bus Webfrontend</h1>
<p class="buttons">
<h2>Licht Gesamt</h2>
<button id="EGAus">EG Aus</button>
<button id="OGAus">OG Aus</button>
<button id="AllesAus">Alles Aus</button>
</p>
<p class="buttons">
<td><h2>Jalousie Gesamt</h2></td>
<td><button id="AlleZu">Alle Zu</button></td>
<td><button id="EGZu">EG Zu</button></td>
<td><button id="OGZu">OG Zu</button></td>
</p>
<p class="buttons">
<td><button id="AlleAuf">Alle Auf</button></td>
<td><button id="EGAuf">EG Auf</button></td>
<td><button id="OGAuf">OG Auf</button></td>
</p>
<p class="buttons">
<h2>Licht Wohnzimmer</h2>
<button id="WZToggle">Fluter</button>
<button id="WZWToggle">Wand</button>
</p>
<p class="buttons">
<button id="WZJalFrontZu">Front Zu</button>
<button id="WZJalSeiteZu">Erker Zu</button>
</p>
<p class="buttons">
<button id="WZJalFrontAuf">Front Auf</button>
<button id="WZJalSeiteAuf">Erker Auf</button>
</p>
<p class="buttons">
<h2>Esszimmer</h2>
<button id="EZToggle">Licht</button>
<button id="EZAn">An</button>
<button id="EZAus">Aus</button>
</p>
<p class="buttons">
<h2>Küche</h2>
<button id="KuToggle">Licht</button>
</p>
<p class="buttons">
<h2>Schlafzimmer</h2>
<button id="SZToggle">Licht</button>
<button id="SZAn">An</button>
<button id="SZAus">Aus</button>
<button id="SZKabuff">Kabuff Aus</button>
<input type="range" class="myslider" name="slider-1" id="slider-1" value="60" min="0" max="100" />
</p>
<p class="buttons">
<h2>Bad</h2>
<button id="BADDLicht">Licht</button>
<button id="BADSLicht">Spiegel</button>
</p>
<p class="buttons">
<h2>Außen</h2>
<button id="AUELicht">Eingang</button>
<button id="AUTLicht">Terasse</button>
<button id="AUSteck">Steckdose</button>
</p>
</div>
</body>
</html>
按钮大小适用于我的所有设备，但更改 该部分中的按钮字体大小对 从 iOS 设备查看时的字体大小。我帮助自己解决了这个问题 在 HTML 正文中设置字体大小的问题。有没有 这种行为的明显原因？
调用 .button（） 方法后，JQuery UI 通过应用几个 css 类并在内部添加 span 来更改按钮的 html 代码。如果你想改变字体大小 - 你应该写这样的东西：
<style type="text/css">
.ui-button span {
font-size: 10px;
}
</style>
但是更改 ui 元素外观的更好方法 - 创建自己的主题或选择一些预制 （http://jqueryui.com/themeroller/）。
有人可以给我指出一个有按钮的例子吗 与滑块和显示滑块值的数字字段内联。 当然，我已经看过标准的Jquery滑块示例，但是 无论语法组合如何，我都尝试使用类来操作 样式我从来没有拿出内联滑块的大小，位置 （内联）和我想要的标签。
使用显示：内联块;用于按钮和滑块。
相关文章：
- 如何解析html以删除元素并只返回其位置的标题
- HTML固定标题-将位置th与td在同一级别上对齐
- 使用固定位置固定标题会导致内容在滚动过程中跳到标题下方
- 如何让 .stop 工作并确保标题在我单击时停止，而不是在我单击的位置停止
- 使用 Jquery 自定义按钮和滑块(大小、位置、标题大小）
- 粘性表标题位置绝对无重叠
- 在谷歌地图上添加多个带有标题和位置的标记，并在点击时更改图像
- 基于页面标题/位置的重定向
- 将标题属性添加到现有 HTML 的某个位置
- 滚动时修复网格视图标题的位置
- 激活下拉菜单时动态更改标题的位置
- 在打开(活动）移动下拉菜单时将标题的位置从固定更改为相对
- 将一个标题替换为固定位置，将另一个标题位置替换为固定
- 如何更改默认工具提示的位置和标题
- 如何使用“固定”标题使锚标记直接指向页面上的正确位置
- 固定的表格标题更改位置/不在镀铬中对齐
- WordPress-标题位置顶部，左&正确的
- 如何从定义的位置开始滚动，逐渐调整粘性标题的大小
- 在侧面的固定位置显示当前部分的标题
- js平面选色器-位置:固定标题
