• jQuery教程(九)使用java script(jQuery)实现圆角边框


    当我看到这些实现圆角边框的HTML源代码的时候,我发现这很适合用来写一篇jQuery教程–使用wrap()、prepend()、append() 函数。

    这里是原先的HTML代码,我们将从这里开始:

    <div class="dialog"> 
      <div class="hd"> 
        <div class="c"></div> 
      </div> 
      <div class="bd"> 
        <div class="c"> 
          <div class="s"> 
            <main 
              content goes here > 
          </div> 
        </div> 
      </div> 
      <div class="ft"> 
        <div class="c"></div> 
      </div> 
    </div>

    现在我们怎么使用jQuery来精简这段代码呢?

    首先,我们需要一个“钩子”,一个特殊的HTML元素,或者一个id,或者一个对象名–来告诉jQuery处理的目标。

    现在我们改成了这个样子:

    <div class=“roundbox”> <main content goes here > </div> 下一步,我们使用jQuery来将剩下的代码添加进去:

    $(document).ready(function(){ $("div.roundbox") .wrap('<div 
    class="dialog">'+ 
    '<div class="bd">'+ 
    '<div class="c">'+ 
    '<div class="s">'+ 
    '</div>'+ 
    '</div>'+ 
    '</div>'+ 
    '</div>'); });

    其他Div标记去哪里了?

    仔细观察代码,你就会发现它们都跑到了js代码里面,在wrap函数执行时它们将嵌套在“钩子Div”的内部。

    细心的观众会发现我漏掉了部分代码。这是因为jQuery中的wrap()函数要求div标签必须严格对称嵌套才能工作。

    具体的,我去掉了下面两个部分:

    <div class="hd"><div class="c"></div></div> 
    <div class="ft"><div class="c"></div></div>

    添加和预置一体化

    下一步我们将会通过prepend和append函数将这两段代码添加进带有dialog对象名的div标记内部,并且使用“连锁”方法。

    $('div.dialog').prepend('<div class="hd">'+ 
    '<div class="c"></div>'+ 
    '</div>')
    .append('<div class="ft">'+ 
    '<div class="c"></div>'+ 
    '</div>');

    示例及代码

    我已经在网上放置了一个演示页面供大家查看。建议你看一下页面的源代码,体会jQuery给页面代码带来的清爽和便捷。

    这些代码来自 Schillmania的一篇文章,个人推荐大家下载包含点缀图片的zip打包,非常精美。

    不使用图片的圆角边框

    有很多方法可以实现圆角边框–有些方法甚至不需要图片。

    在jQuery的网站上有一个用来制作无图圆角边框的插件。虽然不是适合所有人(或者说所有程序),但也值得学习。

    看看它的漂亮代码吧(使用时):

    $(document).bind("load", function(){ 
    $("#box1").corner()
    });
  • 相关阅读:
    spring 中的@Import注解和@ImportResource注解
    注意@Bean中的initMethod和destroyMethod
    AnnotationConfigApplicationContext.的用法的核心代码
    JSR330的注解和spring的原生注解的比较
    用JSR的@Inject代替@Autowired完成自动装配
    用@Component注解代替@Configuration注解,定义bean
    用filters定制化spring的包扫描
    linux 别名设置
    Vmware workstation 安装解压 vmwaretools 提示只读文件
    linux 基础
  • 原文地址:https://www.cnblogs.com/myssh/p/1497130.html
Copyright © 2020-2023  润新知