js 弹出一个选择下拉框
来源:互联网 发布:godaddy 阿里域名 编辑:程序博客网 时间:2024/06/05 16:30
代码来自赖人建站,修改了部分js
html
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery的各种提示框参考 - 懒人建站</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.alerts.js" type="text/javascript"></script><link media="screen" href="js/jquery.alerts.css" type="text/css" rel="stylesheet"><script type="text/javascript">$(document).ready( function() {$("#prompt_button").click( function() {jSelect('请选择:',{'1':'张三','2':'李四'}, '人物', function(inputdata) {alert(inputdata);});});});</script></head><body screen_capture_injected="true"><input id="prompt_button" type="button" value="选择按钮"></body></html>
jquery.alerts.js
(function($) {$.alerts = {// These properties can be read/written by accessing $.alerts.propertyName from your scripts at any timeverticalOffset: -75, // vertical offset of the dialog from center screen, in pixelshorizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/repositionOnResize: true, // re-centers the dialog on window resizeoverlayOpacity: .01, // transparency level of overlayoverlayColor: '#FFF', // base color of overlaydraggable: true, // make the dialogs draggable (requires UI Draggables plugin)okButton: ' OK ', // text for the OK buttoncancelButton: ' Cancel ', // text for the Cancel buttondialogClass: null, // if specified, this class will be applied to all dialogs// Public methodsalert: function(message, title, callback) {if( title == null ) title = 'Alert';$.alerts._show(title, message, null, 'alert', function(result) {if( callback ) callback(result);});},confirm: function(message, title, callback) {if( title == null ) title = 'Confirm';$.alerts._show(title, message, null, 'confirm', function(result) {if( callback ) callback(result);});},prompt: function(message, value, title, callback) {if( title == null ) title = 'Prompt';$.alerts._show(title, message, value, 'prompt', function(result) {if( callback ) callback(result);});},select: function(message, value, title, callback) {if( title == null ) title = 'Select';$.alerts._show(title, message, value, 'select', function(result) {if( callback ) callback(result);});},// Private methods_show: function(title, msg, value, type, callback) {$.alerts._hide();$.alerts._overlay('show');$("BODY").append( '<div id="popup_container">' + '<h1 id="popup_title"></h1>' + '<div id="popup_content">' + '<div id="popup_message"></div>' +'</div>' + '</div>');if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);// IE6 Fixvar pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed'; $("#popup_container").css({position: pos,zIndex: 99999,padding: 0,margin: 0});$("#popup_title").text(title);$("#popup_content").addClass(type);$("#popup_message").text(msg);$("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') );$("#popup_container").css({minWidth: $("#popup_container").outerWidth(),maxWidth: $("#popup_container").outerWidth()});$.alerts._reposition();$.alerts._maintainPosition(true);switch( type ) {case 'alert':$("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');$("#popup_ok").click( function() {$.alerts._hide();callback(true);});$("#popup_ok").focus().keypress( function(e) {if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');});break;case 'confirm':$("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');$("#popup_ok").click( function() {$.alerts._hide();if( callback ) callback(true);});$("#popup_cancel").click( function() {$.alerts._hide();if( callback ) callback(false);});$("#popup_ok").focus();$("#popup_ok, #popup_cancel").keypress( function(e) {if( e.keyCode == 13 ) $("#popup_ok").trigger('click');if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');});break;case 'prompt':$("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');$("#popup_prompt").width( $("#popup_message").width() );$("#popup_ok").click( function() {var val = $("#popup_prompt").val();$.alerts._hide();if( callback ) callback( val );});$("#popup_cancel").click( function() {$.alerts._hide();if( callback ) callback( null );});$("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {if( e.keyCode == 13 ) $("#popup_ok").trigger('click');if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');});if( value ) $("#popup_prompt").val(value);$("#popup_prompt").focus().select();break;case 'select':var result = '';for(var key in value){result+=('<option value="'+value[key].substr(0,value[key].lastIndexOf(','))+'">'+value[key].substr(value[key].lastIndexOf(',')+1,value[key].length)+'</option>');}$("#popup_message").append('<br /><select id="popup_select">'+result+'</select>').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');$("#popup_select").width( $("#popup_message").width() );$("#popup_ok").click( function() {var val = $("#popup_select").val();$.alerts._hide();if( callback ){callback( val );};});$("#popup_cancel").click( function() {$.alerts._hide();if( callback ) callback( null );});$("#popup_select, #popup_ok, #popup_cancel").keypress( function(e) {if( e.keyCode == 13 ) $("#popup_ok").trigger('click');if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');});if( value ) $("#popup_select").val(value);$("#popup_select").focus().select();break;}// Make draggableif( $.alerts.draggable ) {try {$("#popup_container").draggable({ handle: $("#popup_title") });$("#popup_title").css({ cursor: 'move' });} catch(e) { /* requires jQuery UI draggables */ }}},_hide: function() {$("#popup_container").remove();$.alerts._overlay('hide');$.alerts._maintainPosition(false);},_overlay: function(status) {switch( status ) {case 'show':$.alerts._overlay('hide');$("BODY").append('<div id="popup_overlay"></div>');$("#popup_overlay").css({position: 'absolute',zIndex: 99998,top: '0px',left: '0px',width: '100%',height: $(document).height(),background: $.alerts.overlayColor,opacity: $.alerts.overlayOpacity});break;case 'hide':$("#popup_overlay").remove();break;}},_reposition: function() {var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;if( top < 0 ) top = 0;if( left < 0 ) left = 0;// IE6 fixif( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop();$("#popup_container").css({top: top + 'px',left: left + 'px'});$("#popup_overlay").height( $(document).height() );},_maintainPosition: function(status) {if( $.alerts.repositionOnResize ) {switch(status) {case true:$(window).bind('resize', function() {$.alerts._reposition();});break;case false:$(window).unbind('resize');break;}}}}jAlert = function(message, title, callback) {$.alerts.alert(message, title, callback);}jConfirm = function(message, title, callback) {$.alerts.confirm(message, title, callback);};jPrompt = function(message, value, title, callback) {$.alerts.prompt(message, value, title, callback);};jSelect = function(message, value, title, callback) {$.alerts.select(message, value, title, callback);};})(jQuery);
jquery.alerts.css
#popup_container {BORDER-RIGHT: #999 5px solid;BORDER-TOP: #999 5px solid;FONT-SIZE: 12px;BACKGROUND: #fff;MIN-WIDTH: 300px; MAX-WIDTH: 600px;BORDER-LEFT: #999 5px solid;COLOR: #000;BORDER-BOTTOM: #999 5px solid;FONT-FAMILY: Arial, sans-serif;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;line-height:25px;}#popup_title {BORDER-RIGHT: #fff 1px solid;PADDING: 0;BORDER-TOP: #fff 1px solid;FONT-WEIGHT: bold;FONT-SIZE: 14px;BACKGROUND: url(images/title.gif) #ccc repeat-x 50% top;MARGIN: 0em;BORDER-LEFT: #fff 1px solid;CURSOR: default;COLOR: #666;BORDER-BOTTOM: #999 1px solid;TEXT-ALIGN: center}#popup_content {PADDING:13px 20px;BACKGROUND: url(images/info.gif) no-repeat 16px 16px;MARGIN: 0;}.alert#popup_content {BACKGROUND-IMAGE: url(images/info.gif);}.confirm#popup_content {BACKGROUND-IMAGE: url(images/important.gif)}.prompt#popup_content {BACKGROUND-IMAGE: url(images/help.gif)}#popup_panel {MARGIN: 1em 0em 0em 1em;TEXT-ALIGN: center}#popup_prompt {width:400px;height:50px;}
效果图
- js 弹出一个选择下拉框
- 选择下拉框"其他" 弹出一个文本框
- Js下拉框选择
- JS弹出选择框
- 选择下拉框执行一个action(js方法)
- js 自定义下拉选择框
- jquery或者js实现两个下拉列表框只可以选择其中一个
- js 新版自定义下拉选择框
- js实现select下拉框选择
- JS实现下拉框时间选择
- JS弹出框+地区选择代码实例
- js 点击input弹出选择框
- 用java选择selenium下拉选择框的一个选项
- 一个不完善的可自定义弹出窗体的下拉框
- EXT怎么在弹出窗口显示一个下拉框?
- 下拉列表选择判断js
- js模拟下拉选择<select>
- 自定义下拉弹出框
- 游戏中重力的编写
- UVA 10905 - Children's Game
- 使用Assets文件夹下的资源
- 自控力之我要做,我不要,我想要
- JSON类库 Flexjson学习
- js 弹出一个选择下拉框
- php的mb_ereg_replace()或者mb_ereg()错误解决方法
- vc6开发activex并发布全攻略(一)(初级篇)
- 快逸V5实现柱线图
- 隐藏软盘
- SVN的用法
- 飞凌OK6410A开发板的系统烧写方法
- vm_area_struct (vm_pgoff没看懂)
- android自定义布局中的平滑移动