zoukankan      html  css  js  c++  java
  • 选择垂直的jQuery 入门教程(39): jQuery UI Slider 示例(二)java教程

    这两天朋友几篇文章介绍了改选择垂直的的文章. 关联文章的地址

        面前的slider 例子Slider都是水平表现的,Slider也可以表现成垂直的,这可以通过置配orientation ,将其值设为“vertical”。

        基本用法

        

    1 <!doctype html>
    2 <html lang="en">
    3 <head>
    4     <meta charset="utf-8" />
    5     <title>jQuery UI Demos</title>
    6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    7     <script src="scripts/jquery-1.9.1.js"></script>
    8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    9     <script>
    10         $(function () {
    11             $("#slider-vertical").slider({
    12                 orientation: "vertical",
    13                 range: "min",
    14                 min: 0,
    15                 max: 100,
    16                 value: 60,
    17                 slide: function (event, ui) {
    18                     $("#amount").val(ui.value);
    19                 }
    20             });
    21             $("#amount").val($("#slider-vertical")
    22                 .slider("value"));
    23         });
    24     </script>
    25 </head>
    26 <body>
    27     <p>
    28         <label for="amount">Volume:</label>
    29         <input type="text" id="amount" style="border: 0;
    30                  color: #f6931f; font-weight: bold;" />
    31     </p>
    32  
    33     <div id="slider-vertical" style="height: 200px;"></div>
    34 </body>
    35 </html>

        20130320015

        垂直选择值域

        一样,Slider垂直表现时也可以用使两个滑块来选择值域。

        每日一道理
    一个安静的夜晚,我独自一人,有些空虚,有些凄凉。坐在星空下,抬头仰望美丽天空,感觉真实却由虚幻,闪闪烁烁,似乎看来还有些跳动。美的一切总在瞬间,如同“海市蜃楼”般,也只是刹那间的一闪而过,当天空变得明亮,而这星星也早已一同退去……

        

    1 <!doctype html>
    2 <html lang="en">
    3 <head>
    4     <meta charset="utf-8" />
    5     <title>jQuery UI Demos</title>
    6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    7     <script src="scripts/jquery-1.9.1.js"></script>
    8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    9     <script>
    10         $(function () {
    11             $("#slider-range").slider({
    12                 orientation: "vertical",
    13                 range: true,
    14                 values: [17, 67],
    15                 slide: function (event, ui) {
    16                     $("#amount").val("$" + ui.values[0]
    17                         + " - $" + ui.values[1]);
    18                 }
    19             });
    20             $("#amount").val("$" + $("#slider-range")
    21                 .slider("values", 0) +
    22               " - $" + $("#slider-range").slider("values", 1));
    23         });
    24     </script>
    25 </head>
    26 <body>
    27  
    28     <p>
    29         <label for="amount">Target sales goal (Millions):</label>
    30         <input type="text" id="amount" style="border: 0;
    31                 color: #f6931f; font-weight: bold;" />
    32     </p>
    33  
    34     <div id="slider-range" style="height: 250px;"></div>
    35  
    36  
    37 </body>
    38 </html>

        20130320016

    文章结束给大家分享下程序员的一些笑话语录: Google事件并不像国内主流媒体普遍误导的那样,它仅仅是中国Z府和美国公司、中国文化和美国文化甚至中国人和美国人之间的关系,是民族主义和帝国主义之间的关系;更重要的是,它就是Z府和公司之间的关系,是权力管制和市场自由之间的关系。从这个意义上说,过度管制下的受害者,主要是国内的企业。Google可以抽身而去,国内的企业只能祈望特区。www.ishuo.cn

  • 相关阅读:
    本地YUM源制作
    VMware虚拟机三种联网方法及原理
    虚拟机安装centos
    Tomcat服务时区设置
    Tomcat的HTTPS配置及HTTP自动跳转配置
    应用程序下载地址汇总
    Centos 7 iptables配置
    JAVA 线程状态
    LeetCode Summary Ranges
    LeetCode Basic Calculator II
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3040007.html
Copyright © 2011-2022 走看看