当前位置:网站首页>Drop down menu dropdown yyds dry inventory of semantic UI

Drop down menu dropdown yyds dry inventory of semantic UI

2022-06-12 03:28:00 Liangyunliang

First step : Create project

add to JQuery and Semantic UI package 、 establish dropdown.html page :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ Insert a picture

The second step :dropdown.html page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> piecewise </title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>
        
    </body>
</html>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

The simplest drop-down menu : Unwanted JavaScript Can be pulled down

<H2 id="h0"> The simplest drop-down menu : Unwanted JavaScript Can be pulled down </H2>
<div class="ui simple dropdown">
     Course 
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

effect :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ Insert a picture _02

Normal drop down menu

<h2 id="h1"> Normal drop down menu </h2>
<div class="ui dropdown">
     Course  <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

This menu and the following menus need the help of JavaScript The code can be displayed

<script type="text/javascript">
    $(".ui.dropdown").dropdown({
        on:'hover' ,// Mouse hover display , The default value is click
        transition:'swing right', // Animate 
        allowAdditions:true // Allow adding new menu items 
    });
</script>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

effect :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_html_03

Drop down menu that can be selected

<h2 id="h2"> Drop down menu that can be selected </h2>
<div class="ui selection dropdown">
    <div class="default text"> Course </div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

effect :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _04

Other drop-down menus

<h2 id="h3"> Other drop-down menus </h2>
<div class="ui floating selection dropdown">
     Course  <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>
<div class="ui pointing selection dropdown">
     Course  <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>
<div class="ui left pointing selection dropdown">
     Course  <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

effect :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _05
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_html_06
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_html_07

Text box drop-down menu that can be selected : The drop-down menu automatically sets the value of the hidden field

<h2 id="h4"> Text box drop-down menu that can be selected : The drop-down menu automatically sets the value of the hidden field </h2>
<div class="ui selection dropdown">
    <input type="hidden" name="course">
    <div class="default text"> Course </div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="11"> Chinese language and literature </div>
        <div class="item" data-value="22"> English </div>
        <div class="item" data-value="33"> mathematics </div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

effect :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _08
You can use the browser's console to view the values of hidden fields :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _09

Drop down menus that can be searched

<h2 id="h5"> Drop down menus that can be searched </h2>
<div class="ui search selection dropdown">
    <div class="default text"> Course </div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

effect :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_html_10

Icon button pull-down menu with label

<h2 id="h6"> Icon button pull-down menu with label </h2>
<div class="ui dropdown labeled icon button">
    <i class="dropdown icon"></i>
    <div class="text"> Course </div>
    <div class="menu">
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

effect :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ Insert a picture _11

Icon button pull-down menu with label

<h2 id="h7"> Icon button pull-down menu with label </h2>
<div class="ui dropdown labeled icon button">
    <i class="dropdown icon"></i>
    <div class="text"> Course </div>
    <div class="menu">
        <div class="ui icon search input">
            <i class="search icon"></i>
            <input type="text" placeholder=" Search for ">
        </div>
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _12

Multi choice drop-down menu

 <label for="language"> Country </label>
    <div id="language" class="ui selection multiple search dropdown">
    <input type="hidden" name="lang">
    <i class="dropdown icon"></i>
    <div class="default text"> Please choose a language </div>
    <div class="menu">
        <div class="item" data-value="2">JavaScript</div>
        <div class="item" data-value="1">Java</div>
        <div class="item" data-value="2">Python</div>
        <div class="item" data-value="2">Cshap</div>
    </div>
</div>

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

effect :
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _13

原网站

版权声明
本文为[Liangyunliang]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/03/202203011046132731.html