所属分类:网页特效-悬浮层/弹出层,输入/选择框/联动
<link href="big-window.css" rel="stylesheet" type="text/css" />
1、引用jquery库,jquery-1.7.1.min.js及以上稳定版本。
2、引用基础数据文件,position.data.min.js。
3、引用依赖库,jquery.position.select.js。
$(document).ready(function () {
$("#result").bind("click", function () {
$("#result").positionSelect({
containerId: "positionDiv",
className: "big-window",
nameId: "result"
});
});
});
<textarea id="result" cols="80" rows="10">点我,狠狠地点我。</textarea>
<div id="positionDiv">
</div>
<!-- 职位-->
<div class="big-window bg-f0" id="position">
<div class="title">
<b>选择职位</b><span class="tip">(最多选择5项)</span> <a href="#" onclick="javascript:closeposition()">
</a>
</div>
<div class="sele-tag">
<dl>
<dt>已选择:</dt>
<dd>
<a href="#">已选择的职位1</a><a href="#">已选择的职已选择的职位位2</a><a href="#">已选择已选择的职位的职位3</a><a
href="#">已已选择的职位选择的职位4</a><a href="#">已已选择的职位选择的职位5</a><a href="#" class="btn">确 定</a>
</dd>
</dl>
</div>
<div class="position-menu">
<div class="menu">
<ul>
<li>销售|客服|市场</li>
<li>财务|人力资源|行政</li>
<li class="sele">项目|质量|高级管理</li>
<li>IT|互联网|通信</li>
<li>房产|建筑|物业管理</li>
<li>金融</li>
<li>采购|贸易|交通|物流</li>
<li>生产|制造</li>
<li>传媒|印刷|艺术|设计</li>
<li>咨询|法律|教育|翻译</li>
<li>服务业</li>
<li>能源|环保|农业|科研</li>
<li>兼职|实习|社工|其他</li>
</ul>
</div>
<div class="sub-menu">
<dl>
<dt>电信/通信技术开发及应用</dt>
<dd>
<a href="#">互联网/电子商务 </a><a href="#">计算机软件 </a><a href="#">IT服务(系统/数据/维护) </a><a
href="#">电子技术/半导体/集成电路 </a><a href="#">计算机硬件 </a><a href="#">通信/电信/网络设备 </a>
<a href="#">通信/电信运营、增值服务 </a><a href="#">网络游戏</a>
</dd>
</dl>
<dl>
<dt>财务/审计/税务</dt>
<dd>
<a href="#">快速消费品(食品/饮料/烟酒/日化) </a><a href="#">耐用消费品(服饰/纺织/皮革/家具/家电) </a><a href="#">
贸易/进出口 </a><a href="#">零售/批发 </a><a href="#">租赁服务 </a>
</dd>
</dl>
<dl>
<dt>交通运输服务</dt>
<dd>
<a href="#">互联网/电子商务 </a><a href="#">计算机软件 </a><a href="#">IT服务(系统/数据/维护) </a><a
href="#">电子技术/半导体/集成电路 </a><a href="#">计算机硬件 </a><a href="#">通信/电信/网络设备 </a>
<a href="#">通信/电信运营、增值服务 </a><a href="#">网络游戏</a>
</dd>
</dl>
<dl>
<dt>生物/制药/医疗器械</dt>
<dd>
<a href="#">快速消费品(食品/饮料/烟酒/日化) </a><a href="#">耐用消费品(服饰/纺织/皮革/家具/家电) </a><a href="#">
贸易/进出口 </a><a href="#">零售/批发 </a><a href="#">租赁服务 </a>
</dd>
</dl>
<dl>
<dt>互联网产品/运营管理</dt>
<dd>
<a href="#">汽车/摩托车</a> <a href="#">大型设备/机电设备/重工业 </a><a href="#">加工制造(原料加工/模具) </a>
<a href="#">仪器仪表及工业自动化 </a><a href="#">印刷/包装/造纸 </a><a href="#">办公用品及设备 </a><a href="#">
医药/生物工程 </a><a href="#">医疗设备/器械 </a><a href="#">航空/航天研究与制造</a>
</dd>
</dl>
<dl>
<dt>房地产|建筑业</dt>
<dd>
<a href="#">房地产/建筑/建材/工程 </a><a href="#">家居/室内设计/装饰装潢 </a><a href="#">物业管理/商业中心</a>
</dd>
</dl>
</div>
</div>
</div>