zoukankan      html  css  js  c++  java
  • 手写胶囊式导航和下拉切换效果

    <h1>下拉切换效果</h1>
    <div id="dropdown">
      <button >添加商品</button>
      <ul>
        <li>生活家居</li>
        <li>生活用品</li>
        <li>数码电器</li>
        <li>生活超市</li>
        <li>衣服鞋帽</li>
      </ul>
    </div>

    手写插件最终实现的效果是 当调用此函数就可以实现下拉切换菜单效果:【$('#dropdown').dropdown();】

    注意:因为写的是jQuery对象插件 必须引入jQuery

    首先声明函数:

    jQuery.fn.dropdown=function(){

    //用一个变量接住找到的button  

     var jqbtn=this.children('button')

    //给button添加简单样式

      jqbtn.css({border:'1px solid #aaa',borderRadius:'6px',padding:'8px 16px',outline:'none',background:'#fff',cursor:'pointer'});

    //找到‘ul’

      var jqul=this.children('ul');

    //给添加样式,先要隐藏ul当鼠标点击button时在显示

      jqul.css({border:'1px solid   #aaa',listStyle:'none',padding:'0',margin:'0','100px',display:'none'   ,textAlign:'center'});

    //给按钮添加点击事件

      jqbtn.click(functioan(){

      //当鼠标点击按钮时 ,菜单显示,在点击时菜单隐藏

        jqul.toggle();

      });

    };

    到这里一个简单的下拉插件就完成了

    下面是胶囊式导航

    <h1>胶囊式导航</h1>
    <ul class="pills">
    <li><a href="#">生活家居</a></li>
    <li><a href="#">衣服鞋帽</a></li>
    <li><a href="#">户外用品</a></li>
    <li><a href="#">生活用品</a></li>
    <li><a href="#">家居用品</a></li>
    </ul>

    首先声明函数:

    jquery.fn.fill=function(){

      //找到il

      var jqlis=this.children('li');

      //给li添加简单的样式

      jqlis.css({display:'inline-block',padding:'4px',listStyle:'none','80px',margin:'0 auto'});

    //找到a 添加样式

      var jqa=this.children('li').children('a');
      jqa.css({padding:'4px',textDecoration:'none',color:'#0f0'});

    //有两种方法可以实现

    1.给li 绑定点击事件

    2.给a 绑定点击事件

    1.给li 绑定点击事件

    jqlis.click(function(){

     给点击的li添加新样式,兄弟删除新样式。这样当你点击哪个li 哪个li 就是你改变后的样式,没点击的li 不会改变样式
      $(this).addClass('active').siblings('.active').removeClass('active');

    }

    2.给a 绑定点击事件

     jqa.click(function(event){

    //因为a 是个跳转链接,所以要阻止它跳转
      event.preventDefault();

    //给点击的a 添加新样式,同样删除兄弟添加的新样式
      $(this).parent().addClass('active').siblings('.active').removeClass('active');

    }) 

  • 相关阅读:
    Unable To Open Database After ASM Upgrade From Release 11.1 To Release 11.2
    11g Understanding Automatic Diagnostic Repository.
    How to perform Rolling UpgradeDowngrade in 11g ASM
    Oracle 11.2.0.2 Patch 说明
    Pattern Matching Metacharacters For asm_diskstring
    Steps To MigrateMove a Database From NonASM to ASM And ViceVersa
    Upgrading ASM instance from Oracle 10.1 to Oracle 10.2. (Single Instance)
    OCSSD.BIN Process is Running in a NonRAC Environment
    Steps To MigrateMove a Database From NonASM to ASM And ViceVersa
    On RAC, expdp Removes the Service Name [ID 1269319.1]
  • 原文地址:https://www.cnblogs.com/suriz/p/6509062.html
Copyright © 2011-2022 走看看