zoukankan      html  css  js  c++  java
  • bootstrap jq-02

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="bootstrap3/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="custom-theme/jquery-ui-1.10.0.custom.css">
    <link type="text/css" rel="stylesheet" href="assets/css/font-awesome.min.css">
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <!--
    <script type="text/javascript" src="assets/js/google-code-prettify/prettify.js"></script>
    <script type="text/javascript" src="assets/js/docs.js"></script>
    -->
    <script type="text/javascript">
    $(function(){
    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
    $("#tags").autocomplete({
    source: availableTags
    });
    $('#dialog_link').click(function () {
    console.log('aaaas');
    $('#dialog_simple').dialog('open');
    return false;
    });

    $('#modal_box2').click(function () {
    $('#dialog-message').dialog('open');
    return false;
    });

    $('#dialog_simple').dialog({
    autoOpen: false,
    600,
    buttons: {
    "Ok": function () {
    $(this).dialog("close");
    },
    "Cancel": function () {
    $(this).dialog("close");
    }
    }
    });

    $("#dialog-message").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
    Ok: function () {
    $(this).dialog("close");
    }
    }
    });
    $('#tags-div').tabs();
    $( "#draggable" ).draggable();
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();d

    });
    </script>
    <style type="text/css">
    #draggable { 150px; height: 150px; padding: 0.5em; }
    #sortable { list-style-type: none; margin: 0; padding: 0; 60%; }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-sm-6">
    <label for="tags">Tags: </label>
    <input id="tags" class="ui-autocomplete-input" autocomplete="off">
    <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
    </div>
    <div class="col-sm-6">
    <div class="ui-state-error ui-corner-all">
    <p>
    <span class="glyphicon glyphicon-alert"></span>
    错误提示
    </p>
    </div>

    <p class="dialog-button">
    <a href="#" id="dialog_link" class="btn btn-primary">
    对话框
    </a>
    <a href="#" id="modal_box2" class="btn btn-info">
    对话框02
    </a>
    </p>
    <!-- ui-dialog -->
    <div id="dialog_simple" title="Dialog Simple Title">
    <form action="" method="post">
    <div class="form-group">
    <label form="name">用户名:</label>
    <input type="text" class="form-control" id="name" name="uname" placeholder="用户名">
    </div>
    </form>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="" id="dialog-message" title="添加用户">
    <form action="" class="form-inline" method="post">
    <div class="form-group">
    <label form="name">用户名:</label>
    <input type="text" class="form-control" id="name" name="uname" placeholder="用户名">
    </div>
    </form>
    </div>
    </div>
    </div>

    <div class="row">
    <div id="tags-div">
    <ul>
    <li><a href="#tags-a">first</a></li>
    <li><a href="#tags-b">second</a></li>
    <li><a href="#tags-c">third</a></li>
    </ul>
    <div id="tags-a">
    <p>第一页</p>
    </div>
    <div id="tags-b">
    <p>第二页</p>
    </div>
    <div id="tags-c">
    <p>第三页</p>
    </div>
    </div>
    </div>

    <div class="row">
    <div id="draggable" class="ui-widget-content">
    <p>拖动</p>
    </div>
    </div>
    <div class="row">
    <ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    编译nginx时,编译参数注意点
    CentOS7下FTP的安装与配置
    实用的Docker入门
    01背包问题(Java实现)
    常见排序算法及Java实现
    HashSet实现不重复储值原理-附源码解析
    机器学习实战笔记(Python实现)-09-树回归
    机器学习实战笔记(Python实现)-08-线性回归
    SQL面试笔试经典题(Part 2)
    机器学习实战笔记(Python实现)-07-模型评估与分类性能度量
  • 原文地址:https://www.cnblogs.com/suxiaolong/p/6654211.html
Copyright © 2011-2022 走看看