Heim > Web-Frontend > js-Tutorial > BootstrapTable-Ladeschaltflächen-Funktionscode

BootstrapTable-Ladeschaltflächen-Funktionscode

小云云
Freigeben: 2018-02-03 13:58:40
Original
1628 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der detaillierte Beispielcode der BootstrapTable-Ladeschaltflächenfunktion vorgestellt. Ich hoffe, dass er allen helfen kann.

1 HTML

<!--工具栏-->
<p id="toolbar" class="btn-group">
 <p style="float:left;margin-right: 10px">
  <button class="btn btn-danger"onclick="openModal(&#39;add&#39;,0,&#39;&#39;)">增加</button>
 </p>
</p>
<!--工具栏--> 
<p id="toolbar" class="btn-group"> 
 <p style="float:left;margin-right: 10px"> 
  <button class="btn btn-danger" onclick="openModal(&#39;add&#39;,0,&#39;&#39;)">增加</button> 
 </p> 
</p>
Nach dem Login kopieren

2 bootStarp

3 js offenes Popup-Fenster

 //打开新增或者是更新模态框 
 function openModal(type,id,value){ 
  globalType=type; 
  globalId=id; 
  if(type=='add'){ 
//   $('#money').val(''); 
   $('#hotelServiceName').val(''); 
   $('#loginPassword').text("登录密码"); 
   $('#operateHotelServiceModal').modal('show'); 
  } 
//  else if(type=='update'){ 
//   $('#operateHotelServiceType').text("更新酒店设施(若不更新图片则无需选择图片,保持图片为空)"); 
//   //设置设施ID 
//   $('#money').val(id); 
//   //设置设施名称 
//   $('#hotelServiceName').val(value); 
//   //设置图片 
//   $('#operateHotelServiceModal').modal('show'); 
//  } 
 }
Nach dem Login kopieren

4 Pop-ups

<p id="operateHotelServiceModal"class="modal" tabindex="-1"> 
 <p class="modal-dialog"> 
  <p class="modal-content"> 
   <p class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h4 class="blue bigger" id="operateHotelServiceType"></h4> 
   </p> 
   <form id="hotelServiceForm"> 
    <p class="modal-body overflow-visible"> 
     <p class="row"> 
      <p class="col-xs-12"> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankName"> 选择银行:</label> 
        <p class="col-sm-9"> 
         <select class="form-control" id="bankName"> 
          <option value="中国工商银行">中国工商银行</option> 
          <option value="中国银行">中国银行</option> 
          <option value="中国农业银行">中国农业银行</option> 
          <option value="中国邮政银行">中国邮政银行</option> 
          <option value="中国建设银行">中国建设银行</option> 
         </select> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3control-label no-padding-right" for="realName"> 真实姓名: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="realName" placeholder="请输入真实姓名" /> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankIdcard"> 身份证号: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="bankIdcard" /> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankNumber"> 银行卡号: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="bankNumber" /> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankNameZhi"> 开发支行: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="bankNameZhi" /> 
        </p> 
       </p> 
       <p style="height:25px"></p> 
       <p class="form-group"> 
        <label class="col-sm-3 control-labelno-padding-right" for="bankPhone"> 银行卡预留电话: </label> 
        <p class="col-sm-9"> 
         <input type="text" class="col-xs-10col-sm-12" id="bankPhone" /> 
        </p> 
       </p> 
      </p> 
     </p> 
    </p> 
   </form> 
   <p class="modal-footer"> 
    <button class="btn btn-sm" data-dismiss="modal"> 
     <i class="icon-remove"></i> 
     取消 
    </button> 
    <button class="btn btn-sm btn-primary" onclick="saveBank()"> 
     <i class="icon-ok"></i> 
     提交审核 
    </button> 
   </p> 
  </p> 
 </p> 
</p><!-- PAGE CONTENT ENDS -->
Nach dem Login kopieren

Verwandte Empfehlungen:

Die mobile Linke erkennen Seite basierend auf JS Die Löschschaltflächenfunktion erscheint beim Schieben

Untersuchung der Eingabeschaltflächenfunktion von JavaScript-Typ-File_Form-Spezialeffekten

JQuery implementiert die Funktionscode der Countdown-Taste „sharing_jquery“

Das obige ist der detaillierte Inhalt vonBootstrapTable-Ladeschaltflächen-Funktionscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage