jquery input选择弹框

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery.plugin.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.plugin.css" />

<script type="text/javascript">

    jQuery.fn.selectCity = function(targetId) {

        var _seft = this;

        var targetId = $(targetId);

        this.click(function() {

            var A_top = $(this).offset().top + $(this).outerHeight(true);

            var A_left = $(this).offset().left;

            targetId.bgiframe();

            targetId.show().css({

                "position" : "absolute",

                "top" : A_top + "px",

                "left" : A_left + "px"

            });

        });

        targetId.find("#selectItemClose").click(function() {

            targetId.hide();

        });

        targetId.find("#selectSub :checkbox").click(function() {

            targetId.find(":checkbox").attr("checked", false);

            $(this).attr("checked", true);

            _seft.val($(this).val());

            targetId.hide();

        });

        $(document).click(function(event) {

            if (event.target.id != _seft.selector.substring(1)) {

                targetId.hide();

            }

        });

        targetId.click(function(e) {

            e.stopPropagation();

        });

        return this;

    };

    $(function() {

        $("#address").selectCity("#selectItem");

        $("#address2").selectCity("#selectItem2");

    });

</script>

</head>

<body>

    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="text" name="address" id="address" size="33"><br>

    <div id="selectItem" class="selectItemhidden">

        <div id="selectItemAd" class="selectItemtit bgc_ccc">

            <h2 id="selectItemTitle" class="selectItemleft">请选择城市</h2>

            <div id="selectItemClose" class="selectItemright">关闭</div>

        </div>

        <div id="selectItemCount" class="selectItemcont">

            <div id="selectSub">

                <input type="checkbox" name="cr01" id="cr01" value="北京1" />

                <label for="cr01">北京1</label>

                <input type="checkbox" name="cr02" id="cr02" value="北京2" />

                <label for="cr02">北京2</label>

                <input type="checkbox" name="cr03" id="cr03" value="北京3" />

                <label for="cr03">北京3</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

            </div>

        </div>

    </div>

<!--

    <input type="text" name="address2" id="address2" size="20">

    <div id="selectItem2" class="selectItemhidden">

        <div id="selectItemAd" class="selectItemtit bgc_ccc">

            <h2 id="selectItemTitle" class="selectItemleft">请选择城市</h2>

            <div id="selectItemClose" class="selectItemright">关闭</div>

        </div>

        <div id="selectItemCount" class="selectItemcont">

            <div id="selectSub">

                <input type="checkbox" name="cr04" id="cr04" value="北京1" />

                <label for="cr04">北京1</label>

                <input type="checkbox" name="cr05" id="cr05" value="北京2" />

                <label for="cr05">北京2</label>

                <input type="checkbox" name="cr06" id="cr06" value="北京3" />

                <label for="cr06">北京3</label>

                <input type="checkbox" name="cr07" id="cr07" value="北京4" />

                <label for="cr07">北京4</label>

            </div>

        </div>

    </div>

 -->

</body>

</html>

jquery.plugin.css

body{font-size:12px;}

#selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;width:240px;z-index:;}

.selectItemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;}

.bgc_ccc{background:#E88E22;}

.selectItemleft{float:left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;}

.selectItemright{float:right;cursor:pointer;color:#fff;}

.selectItemhidden{display:none;}

.selectItemcont{padding:8px;}

/*.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;}*/

/*#selectItem2{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;width:240px;z-index:1000;}*/

jquery.plugin.js

(function($){

$.fn.bgIframe = $.fn.bgiframe = function(s) {

    // This is only for IE6

    if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {

        s = $.extend({

            top     : 'auto', // auto == .currentStyle.borderTopWidth

            left    : 'auto', // auto == .currentStyle.borderLeftWidth

            width   : 'auto', // auto == offsetWidth

            height  : 'auto', // auto == offsetHeight

            opacity : true,

            src     : 'javascript:false;'

        }, s || {});

        var prop = function(n){return n&&n.constructor==Number?n+'px':n;},

            html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+

                       'style="display:block;position:absolute;z-index:-1;'+

                           (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+

                           'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+

                           'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+

                           'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+

                           'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+

                    '"/>';

        return this.each(function() {

            if ( $('> iframe.bgiframe', this).length == 0 )

                this.insertBefore( document.createElement(html), this.firstChild );

        });

    }

    return this;

};

})(jQuery);

构建的js

var selectItemhidden = jQuery("<div></div>").addClass("selectItemhidden").attr("id","selectItem");

var selectItemtit = jQuery("<div></div>").addClass("selectItemtit bgc_ccc").attr("id","selectItemAd");

var selectItemleft = jQuery("<h2></h2>").addClass("selectItemleft").attr("id","selectItemTitle");

var selectItemright = jQuery("<div></div>").addClass("selectItemright").attr("id","selectItemClose");

var selectItemcont = jQuery("<div></div>").addClass("selectItemcont").attr("id","selectItemCount");

var selectSub = jQuery("<div></div>").attr("id","selectSub");

var checkbox = jQuery("<input>").attr("type","checkbox").attr("name","cr01").attr("id","cr01").val("北京1");

var label = jQuery("<label>").attr("for","cr01").html("北京");

var title = selectItemtit.append(selectItemleft).append(selectItemright);

var content = selectItemcont.append(selectSub.append(checkbox).append(label));

selectItemhidden.append(title).append(content);

jquery input选择弹框的更多相关文章

jquery 点击弹框
<a href="#" class="big-link" data-reveal-id="myModal" data-animatio ...
jquery点击弹框外层关闭弹框
$(document).bind("click",function(e){ if($( e.target ).closest(".game-cont ...
jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于需要多添加一个属性: ...
H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错
ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...
jquery mobile将页面内容当成弹框进行显示
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...
jquery EsayUi 里一个小弹框
网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...

随机推荐

UVA 12950 ： Even Obsession（最短路Dijkstra）
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
yii2 批量插入or更新
$sql1 = 'insert into business_ip (gid, name, area, belongName, belongArea, destIPv4, created, update ...
c# UDP
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
使用工具创建Ribbon的按钮
来自为知笔记(Wiz)
LTE切换与TAU问题
假如有两个LTE基站A B(同频组网) AB TAC不同且添加了双向邻区关系现终端开机重选至A然后往B方向移动是先切换呢?还是先进性TAU更新这个没有影响,,TAU并非需要在IDLE状态下才能 ...
SharePoint自动化系列——Add content type to list.
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 将创建好的content type(若是跨web application需要事先publish c ...
在 Server 端存取 Excel 檔案的利器：NPOI Library
转处 http://msdn.microsoft.com/zh-tw/ee818993.aspx Codeplex 軟體套件(Package)資訊套件名稱 NPOI 作者 tonyqus, huse ...
Redis的WEB界面管理工具phpRedisAdmin
下载地址:http://down.admin5.com/php/75024.html 官方网址:https://github.com/ErikDubbelboer/phpRedisAdmin
Android BroadcastReceiver广播接受者
静态注册配置清单表注册:只要曾经注册过哪怕关闭也能调用方式一:sendBroadCastReceive 广播的步骤: 发送无序广播,普通广播 (1).发送方 ...
windows下的mysql客户端mysqlworkbench链接虚拟机上CentOS的mysql服务器
本人在虚拟机上CentOS的Linux环境下安装了mysql服务器,在本地Windows下安装了mysql的客户端mysqlworkbench ,所以就想让windows下的mysql客户端mysql ...

jquery input选择弹框

jquery input选择弹框的更多相关文章

随机推荐

热门专题