Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"UserManager-AddUser"
Bootstrap 3.2.0 Snippet by
haoHu
3.2.0
user
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
3.6K
 
0 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="modal fade account-modal in" id="step1" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号信息</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">用户姓名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class="col-sm-3 control-label">用户备注</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">邮箱地址</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号状态</label> <div class="col-sm-5"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active"> <input type="radio" name="status" autocomplete="off" checked />启用 </label> <label class="btn btn-default"> <input type="radio" name="status" autocomplete="off" checked />停用 </label> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" name="cancel">取消</button> <button type="button" class="btn btn-warning" name="next">下一步</button> </div> </div> </div> </div> <div class="modal fade account-modal in" id="step2" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号密码</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" disabled value="董卓" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">重置密码</label> <div class="col-sm-5"> <input type="password" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label"></label> <div class="col-sm-5"> <input type="checkbox" value="1" />显示明文 </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" name="cancel">取消</button> <button type="button" class="btn btn-info" name="prev">上一步</button> <button type="button" class="btn btn-warning" name="next">下一步</button> </div> </div> </div> </div> <div class="modal fade account-modal in" id="step3" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号角色权限</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" disabled value="董卓" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">请选择角色权限</label> </div> <!-- <div class="form-group has-feedback"> <div class="col-sm-offset-3 col-sm-8"> <dl> <dt><label ><input type="checkbox" value=1 />店长</label></dt> <dd> 可以管理单店的信息和功能 </dd> <dt><label ><input type="checkbox" value=1 />财务</label></dt> <dd> 可以管理多个结算账户 </dd> <dt><label ><input type="checkbox" value=1 />区域经理</label></dt> <dd> 可以开店,并管理多个店铺的基本信息和功能 </dd> <dt><label ><input type="checkbox" value=1 />集团经理</label></dt> <dd> 管理所有店铺信息和功能及结算数据 </dd> <dt><label ><input type="checkbox" value=1 />系统管理员</label></dt> <dd> 超级管理员,全部权限 </dd> </dl> </div> </div> --> <!-- <div class="form-group has-feedback"> <div class="col-sm-offset-1 col-sm-10"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">店长</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"> <div class="panel-body"> <p>可以管理单店的信息和功能</p> <p>选择店长管理店铺</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">财务</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel"> <div class="panel-body"> <p>可以管理多个结算账户能</p> <p>选择结算账户</p> </div> </div> </div> </div> </div> </div> --> <div class="form-group has-feedback"> <div class=" col-sm-offset-1 col-sm-10"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <dl> <dt> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-exanded="true" aria-controls="collapseOne" class="collapsed"> <span class="glyphicon glyphicon-chevron-down"></span> 店长 </a> </dt> <dd> 可以管理单店的信息和功能 </dd> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"> <h6>选择店长管理店铺</h6> <div> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(西直门11店) </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(东直门1111店) </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(朝阳门22222店) </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(正阳门121212店) </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(宣武门2222店) </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(西单121212店) </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(天坛店) </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(世贸天街店) </label> <label class="chosen-item"> <input type="radio" name="shopMgr" value="1" />豆捞坊(blabalbal店) </label> </div> </div> <dt> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-exanded="false" aria-controls="collapseTwo" class="collapsed"> <span class="glyphicon glyphicon-chevron-down"></span> 财务 </a> </dt> <dd> 可以管理多个结算账户 </dd> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"> <h6>选择结算账户</h6> <div> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(blabalbal店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(bla店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(blabalb店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(blabalbalbasdf店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(bla店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(blabalb店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(bl店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(blaba店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(blaba店) </label> <label class="chosen-item"> <input type="checkbox" name="accountMgr" value="1" />豆捞坊(blabalbal店) </label> </div> </div> <dt> <label><input type="checkbox" value="1" /></label> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-exanded="false" aria-controls="collapseThree" class="collapsed"> <span class="glyphicon glyphicon-chevron-down"></span> 区域经理 </a> </dt> <dd> 可以开店,并管理多个店铺的基本信息和功能 </dd> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel"> <h6>选择区域经理管理店铺</h6> <div> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(blabalbal店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(bla店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(blabalb店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(blabalbalbasdf店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(bla店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(blabalb店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(bl店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(blaba店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(blaba店) </label> <label class="chosen-item"> <input type="checkbox" name="account1Mgr" value="1" />豆捞坊(blabalbal店) </label> </div> </div> <dt> <label><input type="checkbox" value="1" /></label> <a class=""> 集团经理 </a> </dt> <dd> 管理所有店铺的基本信息和功能及结算数据 </dd> <dt> <label><input type="checkbox" value="1" /></label> <a class=""> 系统管理员 </a> </dt> <dd> 超级管理员,全部权限 </dd> </dl> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" name="cancel">取消</button> <button type="button" class="btn btn-info" name="prev">上一步</button> <button type="button" class="btn btn-warning" name="save">保存</button> </div> </div> </div> </div>
.main {height : 2000px;} .chosen-item {display:inline-block; margin-right:1rem;}
$('.account-modal').hide(); $('.account-modal[id=step1]').show(); $('.btn').on('click', function (e) { var $this = $(this), act = $this.attr('name'); var $modal = $this.parents('.account-modal'); $('.account-modal').hide(); if ($modal.attr('id') == 'step1' && act == "next") { $('.account-modal[id=step2]').show(); } if ($modal.attr('id') == 'step2' && act == "next") { $('.account-modal[id=step3]').show(); } if ($modal.attr('id') == 'step2' && act == "prev") { $('.account-modal[id=step1]').show(); } if ($modal.attr('id') == 'step3' && act == "prev") { $('.account-modal[id=step2]').show(); } if (act == 'save') { alert("保存成功"); } }); $('.panel-collapse').on('hide.bs.collapse', function () { console.info(this); var $this = $(this), id = $this.attr('id'), toggleEl = $('#accordion').find('[href=#'+ id + ']'); toggleEl.find('.glyphicon').removeClass().addClass('glyphicon glyphicon-chevron-down'); }); $('.panel-collapse').on('show.bs.collapse', function () { console.info(this); var $this = $(this), id = $this.attr('id'), toggleEl = $('#accordion').find('[href=#'+ id + ']'); toggleEl.find('.glyphicon').removeClass().addClass('glyphicon glyphicon-chevron-up'); console.info($('#accordion').find('.panel-collapse[id!=' + id + ']').filter(function () {return !$(this).hasClass('in')})); $('#accordion').find('.panel-collapse[id!=' + id + ']').filter(function ( ) { return $(this).hasClass('in'); }).collapse('hide'); });
Related:
See More
Free Template
Paper Dashboard Angular
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76