0
A
回答
1
使用滑塊
更新例如下面是一個例子。
var steps = [
"one",
"two",
"three",
"four",
"five"
];
$(function() {
$(".slider").slider({
value: 0,
min: 0,
max: 4,
step: 1,
slide: function(event, ui) {
$(".b").html(steps[ui.value]);
}
});
$(".b").val(steps[$(".slider").slider("value")]);
});@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
html,body{
font-family: 'Open Sans', sans-serif;
background-color: #fff;
text-align: center;
color: #212121;
}
h1{
text-transform: capitalize;
font-weight: 100;
font-size: 42px;
border-bottom: 1px dashed #ccc;
padding-bottom: 30px;
color: #454545;
}
.container{
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
background-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
background: none;
}
.ui-slider-horizontal .ui-slider-handle{
top: -.5em;
}
.ui-slider-horizontal{
height: .4em;
border: 0;
background-color: #e8e8e8;
}
.b{
margin-top:20px;
font-weight: 100;
text-align: center;
display: inline-block;
background-color: #00CEAF;
color: #fff;
padding: 30px;
border-radius: 3px;
min-width: 200px;
transition: all .3s;
font-size: 20px;
&:hover{
background-color: darken(#00CEAF,5%);
}
}
height: 1.2em;
width: 1.2em;
background-color: #00CEAF ;
&:hover,&:focus,&:active{
background-color: #00CEAF;
}
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{border-color: #a3a3a3;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #a3a3a3;
outline: 0;
&:hover,&:focus,&:active{
outline: 0;
background-color: #00CEAF;
border-color: #00CEAF;
}
&:hover{
background-color: #fff;
&:active{
background-color: #00CEAF;
}
}
}<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="container">
<h1>Current value is : </h1>
<div class="b">one</div>
<div class="slider"></div>
0
你不能用HTML做到這一點。
如果你要使用選項選擇與HTML表單，你可以做這樣的事情：
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
要使用的色彩設計的形式和形狀你喜歡，你可以使用CSS。 你也可以使用一些下拉式插件。
相關問題
- 1. Unabel在SharePoint自定義表單中保存HTML輸入值
- 2. 帶選項的HTML選擇表單輸入自定義值
- 3. jQuery自定義驗證 - 輸入更改
- 4. 使用javascript更改表單輸入值
- 5. 使用Jquery更改表單輸入值
- 6. HTML表單輸入更新
- 7. 自定義輸入表單（Sharepoint）
- 8. Google Checkout自定義表單輸入
- 9. Angular 2自定義表單輸入
- 10. Django：自定義POST的表單輸入
- 11. Symfony2表單 - 自定義輸入名稱
- 12. 檢測已更改的輸入HTML輸入表的值
- 13. 自定義HTML表單中文件輸入的外觀
- 14. 送一頁結帳付款的自定義表單輸入值
- 15. 基於選定的值更改表單輸入
- 16. Angular 4將表單輸入值更改爲＃綁定時
- 17. ＃值不會在自定義Drupal表單中更改
- 18. 用自定義方法更改表單域的值？
- 19. 關於更改值的HTML輸入
- 20. 如何更改HTML輸入多值
- 21. 更改顏色以HTML輸入值
- 22. HTML表單輸入已更改，但後來又改回原始值
- 23. 自定義用戶HTML輸入安全
- 24. 創建自定義HTML輸入
- 25. 更改自定義HTML屬性
- 26. 簡單表單構建器複選框集合自定義html輸入
- 27. 更改輸入值
- 28. HTML - 表單輸入
- 29. Html表單輸入
- 30. jQuery datepicker自動更改輸入值
這是滾動偵聽器的自定義下拉菜單。爲此使用js/jQuery。 – Justinas
這個叫'
任何想法如何製作？ – Phoenix