使用Bootstraps输入字段样式和JQuery功能

时间：2017-04-03 22:00:05

标签： jquery html css bootstrap-modal

我正在使用 Bootstrap 和 JQuery UI ，我似乎偶然发现了一个问题。我在Bootstrap中设计了大部分代码。我正在尝试实施一个年龄验证对话框＆＃34; 验证：如果一个人不到18岁就做某事......＆＃34;。我设法用JQuery实现了年龄检查验证。接下来，我想让输入字段看起来像bootstraps输入字段，因为我的主窗体中的所有输入字段看起来都像bootstraps输入字段。我怎么能做到这一点？

＆＃13;
＆＃13; 
      $(document).ready(function () {
        $("#age").datepicker({
            onSelect: function(value, ui) {
                var current = new Date().getTime(), 
                    dateSelect = new Date(value).getTime();
                    age = current - dateSelect;
                    ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
                if(ageGet < 18){
                    less_than_18(ageGet);
                }
            },
            yearRange: '1900:+0d',//base year:current year
            changeMonth: true,
            changeYear: true,
            defaultDate: '-18yr',
        }).attr("readonly", "readonly"); //prevent manual changes


        function less_than_18(theAge){
          $( function() {
            $('<div></div>').dialog({
              modal: true,
              title: "Age Check?",
              open: function () {
                var markup = 'Applicant is not 18 years old. Do you wish to continue?';
                $(this).html(markup);
              },
              buttons: {
                'Confirm': function() {
                   $(this).dialog('close');
                },
                'Change': function() {
                   $('#age').val('');
                   $(this).dialog('close');
                }
              }
            });
          } );  
        }

    });
＆＃13; 
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>




    <div class="container">
        <div class="form-group">

     <input type="text" class="form-control" placeholder="Select your age" id="age">
     
        </div> 
    </div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：4)

要从JQuery-UI获得引导程序的外观和日期选择器的功能，我必须重新安排我的引用。

$(document).ready(function () {
        $("#age").datepicker({
            onSelect: function(value, ui) {
                var current = new Date().getTime(), 
                    dateSelect = new Date(value).getTime();
                    age = current - dateSelect;
                    ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
                if(ageGet < 18){
                    less_than_18(ageGet);
                }
            },
            yearRange: '1900:+0d',//base year:current year
            changeMonth: true,
            changeYear: true,
            defaultDate: '-18yr',
        }).attr("readonly", "readonly"); //prevent manual changes


        function less_than_18(theAge){
          $( function() {
            $('<div></div>').dialog({
              modal: true,
              title: "Age Check?",
              open: function () {
                var markup = 'Applicant is not 18 years old. Do you wish to continue?';
                $(this).html(markup);
              },
              buttons: {
                'Confirm': function() {
                   $(this).dialog('close');
                },
                'Change': function() {
                   $('#age').val('');
                   $(this).dialog('close');
                }
              }
            });
          } );  
        }

    });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>




    <div class="container">
        <div class="form-group">

     <input type="text" class="form-control" placeholder="Select your age" id="age">
     
        </div> 
    </div>

答案 1 :(得分：1)

您所要做的就是摆脱jquery UI css和任何相关文件。 查看我的 fiddle 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Select your age" id="age">
        </div> 
    </div>

答案 2 :(得分：1)

内心：

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {
        $("#age").datepicker({
            onSelect: function (value, ui) {
                var current = new Date().getTime(),
                        dateSelect = new Date(value).getTime();
                age = current - dateSelect;
                ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
                if (ageGet < 18) {
                    less_than_18(ageGet);
                }
            },
            yearRange: '1900:+0d', //base year:current year
            changeMonth: true,
            changeYear: true,
            defaultDate: '-18yr',
        }).attr("readonly", "readonly"); //prevent manual changes


        function less_than_18(theAge) {
            $(function () {
                $('<div></div>').dialog({
                    modal: true,
                    title: "Age Check?",
                    open: function () {
                        var markup = 'Applicant is not 18 years old. Do you wish to continue?';
                        $(this).html(markup);
                    },
                    buttons: {
                        'Confirm': function () {
                            $(this).dialog('close');
                        },
                        'Change': function () {
                            $('#age').val('');
                            $(this).dialog('close');
                        }
                    }
                });
            });
        }

    });
</script>

体内：

<div class="container">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">Age</div>
                    <input type="text" class="form-control" placeholder="Select your age" id="age">
                </div>

            </div> 
        </div>

答案 3 :(得分：1)

如果您只想从引导表单元素进行样式设置，则可以向input添加自定义类并覆盖其所有css属性，并使其与引导程序表单组件相同。

$(document).ready(function () {
        $("#age").datepicker({
            onSelect: function(value, ui) {
                var current = new Date().getTime(), 
                    dateSelect = new Date(value).getTime();
                    age = current - dateSelect;
                    ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
                if(ageGet < 18){
                    less_than_18(ageGet);
                }
            },
            yearRange: '1900:+0d',//base year:current year
            changeMonth: true,
            changeYear: true,
            defaultDate: '-18yr',
        }).attr("readonly", "readonly"); //prevent manual changes


        function less_than_18(theAge){
          $( function() {
            $('<div></div>').dialog({
              modal: true,
              title: "Age Check?",
              open: function () {
                var markup = 'Applicant is not 18 years old. Do you wish to continue?';
                $(this).html(markup);
              },
              buttons: {
                'Confirm': function() {
                   $(this).dialog('close');
                },
                'Change': function() {
                   $('#age').val('');
                   $(this).dialog('close');
                }
              }
            });
          } );  
        }

    });
.ageValidation{
display: block;
    width: 50%;
    height: 20px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>




    <div class="container">
        <div class="form-group">

     <input type="text" class="form-control ageValidation" placeholder="Select your age" id="age">
     
        </div> 
    </div>

相关问题
最新问题