个人中心
gpt4 book ai didi

javascript - YUI 圆形输入框

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:07:48 27 4
gpt4 key购买 nike

是否可以使用 YUI 将我所有的输入框更改为圆 Angular ？我不能使用背景图像，因为输入的宽度是可变的，而且我不能在它们周围添加 div，因为会生成一些输入元素。我也不能使用边框半径或任何 moz/webkit 变体，因为它需要在 IE6 中显示相同。

感谢任何指点，谢谢。

最佳答案

有multiple techniques to make cross-browser rounded corners , YUI 当然可以用来动态转换 input 元素，如果需要，添加包装器 div 以支持您选择使用的方法。

这是一个YUI 3为 text 类型的 input 实现圆 Angular ，使用 Angular 的背景图像:

<html>
  <head>
    <title>Stack Overflow 1471254</title>
    <link rel="stylesheet" type="text/css" href="roundMyCorners.css">
    <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js"></script>
  </head>
  <body>

    <p>Here is an input box: <input type="text" value="type stuff" class="roundMyCorners"> Thanks!</p>

    <script type="text/javascript">
       YUI({combine: true, timeout: 10000}).use("node", function(Y) {
          Y.all('body input.roundMyCorners').each(function(rcInput) {
             var outerDiv = Y.Node.create('<div class="roundMyCornersOuterDiv"></div>');
             outerDiv.appendChild(Y.Node.create('<div class="tl"></div>'));
             outerDiv.appendChild(Y.Node.create('<div class="tr"></div>'));
             outerDiv.appendChild(rcInput.cloneNode());
             outerDiv.appendChild(Y.Node.create('<div class="bl"></div>'));
             outerDiv.appendChild(Y.Node.create('<div class="br"></div>'));
             rcInput.get('parentNode').replaceChild( outerDiv, rcInput );
          });
       });
    </script>
  </body>
</html>

这是 CSS 文件。出于演示目的，我(有点粗鲁地)从 site that has a rounded corner demo 热链接 PNG。在这段代码中。当然，最好为您的网站制作自己的图片。

.roundMyCorners {
   width: 12em;
   border: none;
   font-weight: bold;
   color: white;
   background-color: #3f6daf;
}
.roundMyCornersOuterDiv {
   position: relative;
   display: -moz-inline-stack;  /* inline-block for older Gecko */
   display: inline-block;
   *zoom: 1;  /* force hasLayout for IE */
   *display: inline;  /* rendered as inline-block in IE after hasLayout */
   vertical-align: middle;
   padding: 6px;
   color: white;
   background-color: #3f6daf;
}
.roundMyCornersOuterDiv .tl {
   position: absolute;
   width: 6px;
   height: 6px;
   background: url(http://www.bestinclass.com/images/ui/rounded/colhead-tl.png) top left no-repeat;
   top: 0;
   left: 0;
}
.roundMyCornersOuterDiv .tr {
   position: absolute;
   width: 6px;
   height: 6px;
   background: url(http://www.bestinclass.com/images/ui/rounded/colhead-tr.png) top right no-repeat;
   top: 0;
   right: 0;
}
.roundMyCornersOuterDiv .bl {
   position: absolute;
   width: 6px;
   height: 6px;
   background: url(http://www.bestinclass.com/images/ui/rounded/colhead-bl.png) bottom left no-repeat;
   bottom: 0;
   left: 0;
}
.roundMyCornersOuterDiv .br {
   position: absolute;
   width: 6px;
   height: 6px;
   background: url(http://www.bestinclass.com/images/ui/rounded/colhead-br.png) bottom right no-repeat;
   bottom: 0;
   right: 0;
}

当然，tl、tr、bl、br 甚至 roundMyCornersOuterDiv 类可以通过 JavaScript 设置。为了清楚起见，我将它们留在此处的 CSS 中。

请注意，如果您想更改 所有 input 元素，只需将初始选择器从 'body input.roundMyCorners' 更改为'输入'。但是，我不希望这对 checkbox 和 radio 类型的 input 很好地工作，所以也许 'input[type= "text"]' 是一个更好的选择器，如果你想避免在任何地方标记类名的话。

另一个注意事项:由于 input 是一个内联元素，我希望包装器 div 是 inline-block。这对于 popular techniques for table-free form layouts 是必不可少的.不幸的是，这需要进行一些专有调整。

最后，如果您不想对 CSS 大惊小怪或不想维护自己的 YUI/jQuery/任何代码，您可以尝试 Nifty Corners或 Curvy Corners ，这些 JavaScript 库声称可以自动执行此类操作，至少对于 div 是这样。您的里程可能会有所不同。

关于javascript - YUI 圆形输入框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1471254/

27 4 0
文章推荐： JavaScript 异步竞争条件
文章推荐： javascript - 将当前页面的 HTML 放入新窗口
文章推荐： javascript - 使用javascript获取链接标签的内容？
文章推荐： javascript - 如何将 Google map 标记链接到其他元素？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com