素材牛VIP会员

jQuery职位选择特效

 所属分类:网页特效-悬浮层/弹出层,输入/选择框/联动

 浏览:1385次  评论:0次  更新时间:2016-11-07
牛币素材VIP可免积分下载
jQuery职位选择特效兼容IE8
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jQuery完整的职业选择特效,选择个数可以控制。

详细介绍

使用方法:

引入核心CSS样式文件

<link href="big-window.css" rel="stylesheet" type="text/css" />

引入jQuery库文件、插件JS文件

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"
        });
    });
});

HTML结构

<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>

相关素材 - 悬浮层/弹出层,输入/选择框/联动

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)