tinyDialog是一个基于jQuery或zepto的轻量

tinyDialog

tinyDialog是一个基于jQuery或zepto的轻量级的对话框弹出组件。

它是基于jQuery编写的，也可以用于Zepto。适用平台：IE6+、Chorme、FireFox、Opera、Safari、iOS 5.0+、Android 2.2+

它的默认样式设计是参考的 artDialog（基于LGPL协议）的 blue 皮肤。

使用方法 引入页面

tinyDialog基于jQuery或Zepto，将这些js引入你的页面，建议置于 body 结束标签之前

<script src="jQuery.js"></script> <!--或<script src="zepto.js"></script>--> <script src="tinyDialog.min.js"></script>

你也可以通过AMD模块加载器来引入，如：

define(['jquery','tinyDialog'],function($,tinyDialog){ // 'jquery' 也可以是 'zepto' }) // 或 require(['jquery','tinyDialog'],function($,tinyDialog){ })

另外我们还提供了预设的样式，也请同时引入，建议置于 head 内

<link rel="stylesheet" href="tinyDialog.min.css" />

同时确保b.png置于 tinyDialog.min.css 同一路径。如果你想将b.png置于其它位置，请参阅 `自定义样式` 节，来覆盖部分样式。

调用

只需要这一句，就能创建并显示一个默认的对话框弹窗

tinyDialog(options) // 如：将使用全部默认配置显示一个对话框 tinyDialog() options字段

下面是options的全部字段：

id String 对话框最外层DOM（即wrapper）的id，可以为任意字符串，当类型不为字符串或字符串长度为0时，不设置id，默认 null title String 对话框的标题，可以为任意html字符串，默认 '消息' content String 对话框的内容，可以为任意html字符，默认 '' width Number 对话框的宽度，单位像素，默认 300 height Number 对话框的宽度，单位像素，默认 300 mask Boolean 对话框是否有背景遮罩，如果有得话整个背景将被一个半透明黑色层遮住，用户只能和当前对话框交互，默认 true closeX Boolean 对话框是否有右上角的关闭按钮（当然可以通过定制css来调整它的位置），默认 false autoShow Boolean 对话框初始化后，是否自动显示 true clickCloseX Function 点击上述关闭按钮后的回调函数，函数中this指向被点击按钮的DOM，第一个参数e为事件对象，第二个参数tinyDialogObjectInstance为当前tinyDialog实例对象，默认为空函数 function(e,tinyDialogObjectInstance){} init Function 当一个新的tinyDialog实例对象初始化完毕后的回调函数，函数中this指向当前tinyDialog实例对象，默认为空函数 function(){} warpperCssClass String 对话框最外层DOM的css样式类，默认 'tinyDialog_wrapper' warpperCssClass String 对话框标题的css样式类，默认 'tinyDialog_title' contentOuterCssClass String 对话框内容外层DOM的css样式类，默认 'tinyDialog_content_outer' contentCssClass String 对话框内容内层DOM的css样式类，默认 'tinyDialog_content' buttonsAreaCssClass String 对话框按钮区域外层DOM的css样式类，默认 'tinyDialog_buttons_area' buttonCssClass String 对话框各按钮的css样式类，默认 'tinyDialog_button' otherTypeButtonCssClassPrefix String 对话框自定义类别按钮的css样式类的前缀，默认 'tinyDialog_button_' lastButtonCssClass String 对话框最后一个按钮的css样式类，默认 'tinyDialog_last_button' closeXCssClass String 对话框中关闭按钮的css样式类，默认 'tinyDialog_close_x' buttons Array 对话框中包含的按钮，数组中每一个项均为一个对象（{}），它对应一个按钮。
目前这个对象有三个字段，第一个 value 为按钮上显示的文字，第二个 click 为点击该按钮后的回调函数。
该回调函数中this指向被点击按钮的DOM，第一个参数e为事件对象，第二个参数tinyDialogObjectInstance为当前tinyDialog实例对象。
如果上述回调函数return false，则点击按钮后不会自动关闭当前对话框。
第三个为按钮的样式类型。目前预设了默认和 secondary 两种样式类型，你可以任意添加样式类型，并自行在css文件使用 otherTypeButtonCssClassPrefix+类型名称{} 中编写对应的样式（otherTypeButtonCssClassPrefix在上面可配，默认为 'tinyDialog_button_' ）。
默认 [{'value':'确定'}]
例：一个点击后不会自动关闭对话框的按钮，样式类型为自定义的“green”，上面的文字是“点击不关闭”，写法将会是这样：

/* css 文件*/ .tinyDialog_button_green{ background:#7cb61b; background:-webkit-linear-gradient(top,#98d237,#7cb61b); background:-moz-linear-gradient(top,#98d237,#7cb61b); background:-ms-linear-gradient(top,#98d237,#7cb61b); background:linear-gradient(top,#98d237,#7cb61b); border: 1px solid #999; text-shadow:0px 1px 1px #679a10; color:#fff; }

tinyDialog({ 'buttons':[ { 'value':'点击不关闭', 'type':'green', 'click':function(){ return false } } ] }) 更改默认 更改tinyDialog默认配置

上述配置项的默认配置可以通过可读可写的 tinyDialog.config.defaultOptions 对象来配置。
如，更改默认配置中closeX为true，即默认有右上角关闭按钮，可以在初始化tinyDialog对象实例之前，调用：

tinyDialog.config.defaultOptions.closeX = true 更改其它默认配置

除了上述配置项之外，其它的配置项置于 tinyDialog.config.otherOptions 中，目前这之中只有一项：

maskCssClass String 背景遮罩的css样式类，默认 'tinyDialog_mask' ，同样可以更改默认配置，如：

tinyDialog.config.otherOptions.maskCssClass = 'my_tinyDialog_mask' 自定义样式

你可以自行定义样式来覆盖掉默认的样式，请保证自定义样式的优先级高于默认样式，通常情况下将自定义样式后引入即可。

<link rel="stylesheet" href="tinyDialog.min.css" /> <link rel="stylesheet" href="yourCustomStyles.css" />

例如，要更改对话框内的字体大小为12px（默认样式为14px），只需要在yourCustomStyles.css中编写：

.tinyDialog_wrapper{font-size:12px;}

当然，最简单的方法，就是直接修改tinyDialog.css，然后再在头部引入它

实例方法

通过调用tinyDialog(options)或下面的“预设快捷方式”，将返回一个tinyDialog实例对象，如：

var myTinyDialog = tinyDialog({ 'title':'tinyDialog实例对象', 'content':'这是我的tinyDialog实例对象' })

目前它有四个方法

show 显示 hide 隐藏，隐藏当前tinyDialog实例对象，如果所有需要背景遮罩（mask）的tinyDialog实例对象都已经隐藏，则背景遮罩也会隐藏 remove 移除，当确定该tinyDialog实例对象不再需要使用时，可以调用这个方法将它移除，以便于释放资源。 updateTitleOrContent 在创建了该tinyDialog实例对象之后，再次更改它的title或content

myTinyDialog.show() myTinyDialog.hide() myTinyDialog.remove() myTinyDialog.updateTitleOrContent({ title:'new Title' ,content:'new Content' }) 预设快捷方式

预设了模仿浏览器alert、confirm、prompt快捷方式，调用很简单

alert

tinyDialog.alert(stringToShow,callbackFunctionWhenClickOkButton,options,noRemoveWhenClose) // 如： tinyDialog.alert('alert',function(e,tinyDialogObjectInstance){ alert('点了确认') })

参数：

stringToShow String alert显示的字符串 callbackFunctionWhenClickOkButton Function 点击“确定”按钮时的回调函数，函数中this指向被点击按钮的DOM，第一个参数e为事件对象，第二个参数tinyDialogObjectInstance为当前tinyDialog实例对象 options Object 其它配置项，具体参见 `options字段` noRemoveWhenClose Boolean 这些快捷调用方法在调用一次后即自动移除（调用.remove()），此项如果为true，则不会自动移除 confirm

tinyDialog.confirm(stringToShow,callbackFunctionWhenClickOkButton,callbackFunctionWhenClickCancelButton,options,noRemoveWhenClose) // 如： tinyDialog.confirm('confirm',function(e,tinyDialogObjectInstance){ alert('点了确认') },function(){ alert('点了取消') })

参数：

stringToShow String confirm显示的字符串 callbackFunctionWhenClickOkButton Function 点击“确定”按钮时的回调函数，函数中this指向被点击按钮的DOM，第一个参数e为事件对象，第二个参数tinyDialogObjectInstance为当前tinyDialog实例对象 callbackFunctionWhenClickCancelButton Function 点击“取消”按钮时的回调函数，函数中this指向被点击按钮的DOM，第一个参数e为事件对象，第二个参数tinyDialogObjectInstance为当前tinyDialog实例对象 options Object 其它配置项，具体参见 `options字段` noRemoveWhenClose Boolean 这些快捷调用方法在调用一次后即自动移除（调用.remove()），此项如果为true，则不会自动移除 prompt

tinyDialog.prompt(stringToShow,defaultInputString,callbackFunctionWhenClickOkButton,callbackFunctionWhenClickCancelButton,options,noRemoveWhenClose) // 如： tinyDialog.prompt('prompt','defaultPrompt',function(e,tinyDialogObjectInstance,userInput){ alert('点了确认，输入的是：'+userInput) },function(e,tinyDialogObjectInstance,userInput){ alert('点了取消，输入的是：'+userInput) })

参数：

stringToShow String prompt显示的字符串 defaultInputString String prompt输入框的默认值 callbackFunctionWhenClickOkButton Function 点击“确定”按钮时的回调函数，函数中this指向被点击按钮的DOM，第一个参数e为事件对象，第二个参数tinyDialogObjectInstance为当前tinyDialog实例对象，第三个参数是当前输入框中的值 callbackFunctionWhenClickCancelButton Function 点击“取消”按钮时的回调函数，函数中this指向被点击按钮的DOM，第一个参数e为事件对象，第二个参数tinyDialogObjectInstance为当前tinyDialog实例对象，第三个参数是当前输入框中的值 options Object 其它配置项，具体参见 `options字段` noRemoveWhenClose Boolean 这些快捷调用方法在调用一次后即自动移除（调用.remove()），此项如果为true，则不会自动移除 License

所有代码基于 MIT License. 即你可以随意使用和更改，但请保留原作者名和项目链接。