zoukankan      html  css  js  c++  java
  • m_Orchestrate learning system---八、下拉列表(select标签)如何实现链接功能

    m_Orchestrate learning system---八、下拉列表(select标签)如何实现链接功能

    一、总结

    一句话总结:option的值就是链接地址,选择事件为指向选中的option的值

    1、button如何跳转?

    button执行js函数,然后可以在js函数里面实现跳转

    2、为什么要查看网页源代码?

    多去看网页页面源代码,你就知道你的代码被解析成了什么样子了

    3、表单中textarea和别的input标签不同之处在哪?

    表单中textarea又和别的input标签不同,别的input标签的值使用value控制,而textarea需要写在标签中,也就是innerHTML

    <textarea class="" rows="5" name="brief" id="user-intro" placeholder="Description" >{$dataout.brief}</textarea>

    4、button如何最快最方便的实现跳转功能?

    把页面中的所有要跳转的button标签改成a标签就解决问题了

    把页面中的所有要跳转的button标签改成a标签就解决问题了,并且a标签可以做的和button一模一样,而且a标签页支持button的所有样式,所以从外观上来看是没有任何变化的

    这样改了之后就不会出现边缘点击无法跳转的情况了

    1 <a type="button" class="am-btn am-btn-default am-btn-success" href="{:url('discipline/add')}" style="color:#fff"><span class="am-icon-plus"></span> Add</a>

    5、字符图标可以用什么标签来添加?

    字符图标可以用span标签来添加

    <a type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"  href="{:url('discipline/delete',array('id'=>$vo.id))}"><span class="am-icon-trash-o"></span> Delete</a>

    6、a标签如何实现点上级菜单出现下级菜单列表?

    <a href="javascript:;" class="nav-link tpl-left-nav-link-list">

    7、下拉列表(select标签)如何实现链接功能?

    option的值就是链接地址,选择事件为指向选中的option的值

     代码

    1 <div class="am-form-group">
    2     <select data-am-selected="{btnSize: 'sm'}">
    3       <option value="option1">All Discipline</option>
    4       {volist name="dataout" id="vo"}
    5       <a href="http://www.baidu.com"><option value="{$vo.id}">{$vo.name}</option></a>
    6       {/volist}
    7   </select>
    8 </div>

    这样子要想实现目标得配合js,来判断select的选项改变,js我不熟了

    所以可以换种思路,采用导航栏里面的下拉列表的方式

    这里面都是a标签

    代码如下:

     1 <li class="am-dropdown" data-am-dropdown>
     2     <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
     3         下拉 <span class="am-icon-caret-down"></span>
     4     </a>
     5     <ul class="am-dropdown-content">
     6         <li class="am-dropdown-header">标题</li>
     7         <li><a href="#">1. 去月球</a></li>
     8         <li class="am-active"><a href="#">2. 去火星</a></li>
     9         <li><a href="#">3. 还是回地球</a></li>
    10         <li class="am-disabled"><a href="#">4. 下地狱</a></li>
    11         <li class="am-divider"></li>
    12         <li><a href="#">5. 桥头一回首</a></li>
    13     </ul>
    14 </li>

    所以多看说明文档还是蛮不错的

    最好的方式肯定还是能够直接用select下拉选择框的好

    二、内容在总结中

     

    项目地址

    fry404006308/m_Orchestrate: m_Orchestrate
    https://github.com/fry404006308/m_Orchestrate

  • 相关阅读:
    Delphi实现在数据库中存取图像
    c#后台修改前台DOM的css属性示例代码
    jQuery编程中的一些核心方法简介
    jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
    jQuery实现淡入淡出二级下拉导航菜单的方法
    jQuery实现瀑布流布局详解(PC和移动端)
    jQuery实用技巧必备
    jQuery链式操作实例分析
    谈谈Jquery ajax中success和complete有哪些不同点
    jquery密码强度校验
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8949253.html
Copyright © 2011-2022 走看看