jquery.thinkbox.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857
  1. /**
  2. +-------------------------------------------------------------------
  3. * jQuery thinkbox - 弹出层插件 - http://zjzit.cn/thinkbox
  4. +-------------------------------------------------------------------
  5. * @version 1.0.0 beta2
  6. * @since 2013.05.10
  7. * @author 麦当苗儿 <zuojiazi@vip.qq.com> <http://www.zjzit.cn>
  8. * @github https://github.com/Aoiujz/thinkbox.git
  9. +-------------------------------------------------------------------
  10. */
  11. (function($){
  12. var
  13. /* 当前脚本文件名 */
  14. __FILE__ = $("script").last().attr("src"),
  15. /* 弹出层对象 */
  16. ThinkBox,
  17. /* 弹出层默认选项 */
  18. defaults = {
  19. "style" : "default", //弹出层样式
  20. "title" : null, // 弹出层标题
  21. "fixed" : true, // 是否使用固定定位(fixed)而不是绝对定位(absolute),IE6不支持。
  22. "center" : true, // 弹出层是否屏幕中心显示
  23. "display" : true, // 创建后是否立即显示
  24. "x" : 0, // 弹出层 x 坐标。 当 center 属性为 true 时此属性无效
  25. "y" : 0, // 弹出层 y 坐标。 当 center 属性为 true 时此属性无效
  26. "modal" : true, // 弹出层是否设置为模态。设置为 true 将显示遮罩背景
  27. "modalClose" : true, // 点击模态背景是否关闭弹出层
  28. "resize" : true, // 是否在窗口大小改变时重新定位弹出层位置
  29. "unload" : false, // 关闭后是否卸载
  30. "escHide" : true, // 按ESC是否关闭弹出层
  31. "delayClose" : 0, // 延时自动关闭弹出层 0表示不自动关闭
  32. "drag" : false, // 点击标题框是否允许拖动
  33. "width" : "", // 弹出层内容区域宽度 空表示自适应
  34. "height" : "", // 弹出层内容区域高度 空表示自适应
  35. "dataEle" : "", // 弹出层绑定到的元素,设置此属性的弹出层只允许同时存在一个
  36. "locate" : ["left", "top"], //弹出层位置属性
  37. "show" : ["fadeIn", "normal"], //显示效果
  38. "hide" : ["fadeOut", "normal"], //关闭效果
  39. "actions" : ["minimize", "maximize", "close"], //窗口操作按钮
  40. "tools" : false, //是否创建工具栏
  41. "buttons" : {}, //工具栏默认按钮 仅tools为true时有效
  42. "beforeShow" : $.noop, //显示前的回调方法
  43. "afterShow" : $.noop, //显示后的回调方法
  44. "afterHide" : $.noop, //隐藏后的回调方法
  45. "beforeUnload": $.noop, //卸载前的回调方法
  46. "afterDrag" : $.noop //拖动停止后的回调方法
  47. },
  48. /* 弹出层层叠高度 */
  49. zIndex = 2013,
  50. /* 弹出层语言包 */
  51. lang = {},
  52. /* 弹出层列表 */
  53. lists = {},
  54. /* 弹出层容器 */
  55. wrapper = [
  56. "<div class=\"thinkbox\" style=\"position:fixed\">",
  57. //使用表格,可以做到良好的宽高自适应,而且方便低版本浏览器做圆角样式
  58. "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">",
  59. "<tr>",
  60. "<td class=\"thinkbox-top-left\"></td>", //左上角
  61. "<td class=\"thinkbox-top\"></td>", //上边
  62. "<td class=\"thinkbox-top-right\"></td>", //右上角
  63. "</tr>",
  64. "<tr>",
  65. "<td class=\"thinkbox-left\"></td>", //左边
  66. "<td class=\"thinkbox-inner\">", //弹出层inner
  67. "<div class=\"thinkbox-title\"></div>", //弹出层标题栏
  68. "<div class=\"thinkbox-body\"></div>", //弹出层body
  69. "<div class=\"thinkbox-tools\"></div>", //弹出层工具栏
  70. "</td>",
  71. "<td class=\"thinkbox-right\"></td>", //右边
  72. "</tr>",
  73. "<tr>",
  74. "<td class=\"thinkbox-bottom-left\"></td>", //左下角
  75. "<td class=\"thinkbox-bottom\"></td>", //下边
  76. "<td class=\"thinkbox-bottom-right\"></td>", //右下角
  77. "</tr>",
  78. "</table>",
  79. "</div>"].join(""),
  80. /* document和window对象分别对应的jQuery对象 */
  81. _doc = $(document), _win = $(window);
  82. /* 加载指定的CSS文件 */
  83. function includeCss(css, onload){
  84. var path = __FILE__.slice(0, __FILE__.lastIndexOf("/"));
  85. if($("link[href='" + path + css + "']").length){
  86. fire(onload);
  87. return;
  88. };
  89. //加载CSS文件
  90. $("<link/>")
  91. .load(function(){fire(onload)})
  92. .attr({
  93. "href" : path + css + "?" + Math.random(),
  94. "type" : "text/css",
  95. "rel" : "stylesheet"
  96. }).appendTo("head");
  97. }
  98. /* 获取屏幕可视区域的大小和位置 */
  99. function viewport(){
  100. return {
  101. "width" : _win.width(),
  102. "height" : _win.height(),
  103. "left" : _win.scrollLeft(),
  104. "top" : _win.scrollTop()
  105. };
  106. }
  107. /* 调用回调函数 */
  108. function fire(event, data){
  109. if($.isFunction(event))
  110. return event.call(this, data);
  111. }
  112. /* 删除options中不必要的参数 */
  113. function del(keys, options){
  114. if($.isArray(keys)){ //删除多个
  115. for(i in keys){
  116. _(keys[i]);
  117. }
  118. } else { //删除一个
  119. _(keys);
  120. }
  121. //从options中删除一个指定的元素
  122. function _(key){
  123. if(key in options) delete options[key];
  124. }
  125. }
  126. /* 禁止选中文字 */
  127. function unselect(){
  128. var element = $("body")[0];
  129. element.onselectstart = function() {return false}; //ie
  130. element.unselectable = "on"; // ie
  131. element.style.MozUserSelect = "none"; // firefox
  132. element.style.WebkitUserSelect = "none"; // chrome
  133. }
  134. /* 允许选中文字 */
  135. function onselect(){
  136. var element = $("body")[0];
  137. element.onselectstart = function() {return true}; //ie
  138. element.unselectable = "off"; // ie
  139. element.style.MozUserSelect = ""; // firefox
  140. element.style.WebkitUserSelect = ""; // chrome
  141. }
  142. /* 设置为当前选中的弹出层对象 */
  143. function setCurrent(){
  144. var options = lists[this.key][0], box = lists[this.key][1];
  145. if(lists.current != this.key){
  146. lists.current = this.key;
  147. options.modal && box.data("ThinkBoxModal").css({"zIndex": zIndex-1})
  148. box.css({"zIndex": zIndex++});
  149. }
  150. }
  151. /* 卸载弹出层容器 */
  152. function unload(){
  153. var options = lists[this.key][0], box = lists[this.key][1];
  154. fire.call(this, options.beforeUnload); //卸载前的回调方法
  155. options.modal && box.data("ThinkBoxModal").remove();
  156. box.remove();
  157. _win.off("resize." + this.key);
  158. delete lists[this.key];
  159. options.dataEle && $(options.dataEle).removeData("ThinkBox");
  160. }
  161. /* 安装模态背景 */
  162. function setupModal(){
  163. var self = this,
  164. options = lists[this.key][0],
  165. box = lists[this.key][1],
  166. modal = box.data("ThinkBoxModal");
  167. //存在隐藏的遮罩层则直接显示
  168. if(modal){
  169. modal.show();
  170. return;
  171. }
  172. modal = $("<div class=\"thinkbox-modal-blackout-" + options.style + "\"></div>")
  173. .css({
  174. "zIndex" : zIndex++,
  175. "position" : "fixed",
  176. "left" : 0,
  177. "top" : 0,
  178. "right" : 0,
  179. "bottom" : 0
  180. })
  181. .click(function(event){
  182. options.modalClose && lists.current == self.key && self.hide();
  183. event.stopPropagation();
  184. })
  185. .mousedown(function(event){event.stopPropagation()})
  186. .appendTo($("body"));
  187. box.data("ThinkBoxModal", modal);
  188. }
  189. /* 安装标题栏 */
  190. function setupTitleBar() {
  191. var title = $(".thinkbox-title", lists[this.key][1]), options = lists[this.key][0];
  192. if(options.title){
  193. //拖动弹出层
  194. if (options.drag) {
  195. title.addClass("thinkbox-draging");
  196. drag.call(this, title);
  197. }
  198. this.setTitle(options.title);
  199. //安装窗口操作按钮
  200. setupWindowActions.call(this, title);
  201. } else {
  202. title.remove();
  203. }
  204. }
  205. /* 安装弹出层操作按钮 */
  206. function setupWindowActions(title){
  207. var actions, button, action, options = lists[this.key][0], self = this;
  208. if(options.actions && $.isArray(options.actions)){
  209. actions = $("<div/>").addClass("thinkbox-window-actions").appendTo(title)
  210. .on("click", "button", function(){
  211. if(!$(this).hasClass("disabled")){
  212. switch(this.name){
  213. case "minimize": //最小化
  214. self.minimize(this);
  215. break;
  216. case "maximize": //最大化
  217. self.maximize(this);
  218. break;
  219. case "close": //关闭
  220. self.hide();
  221. break;
  222. }
  223. }
  224. })
  225. .on("mousedown mouseup", function(event){event.stopPropagation()});
  226. for(i in options.actions){
  227. button = options.actions[i];
  228. action = $("<button/>").appendTo(actions).addClass("thinkbox-actions-" + button)
  229. .attr("name", button) //设置名称
  230. .attr("title", button) //设置title
  231. .text(lang[button] || button); //设置显示文本
  232. }
  233. }
  234. }
  235. /* 拖动弹出层 */
  236. function drag(title){
  237. var draging = null, self = this, options = lists[this.key][0], box = lists[this.key][1];
  238. _doc.mousemove(function(event){
  239. draging &&
  240. box.css({left: event.pageX - draging[0], top: event.pageY - draging[1]});
  241. });
  242. title.mousedown(function(event) {
  243. var offset = box.offset();
  244. if(options.fixed){
  245. offset.left -= _win.scrollLeft();
  246. offset.top -= _win.scrollTop();
  247. }
  248. unselect(); //禁止选中文字
  249. draging = [event.pageX - offset.left, event.pageY - offset.top];
  250. }).mouseup(function() {
  251. draging = null;
  252. onselect(); //允许选中文字
  253. fire.call(self, options.afterDrag); //拖动后的回调函数
  254. });
  255. }
  256. /* 安装工具栏 */
  257. function setupToolsBar() {
  258. var tools = $(".thinkbox-tools", lists[this.key][1]),
  259. options = lists[this.key][0], button, self = this;
  260. if(options.tools){
  261. if(options.buttons && $.isPlainObject(options.buttons)){
  262. for(name in options.buttons){
  263. this.addToolsButton(name, options.buttons[name]);
  264. }
  265. /* 绑定按钮点击事件 */
  266. tools.on("click", "button", function(){
  267. if(!$(this).hasClass("disabled")){
  268. if(false === options.buttons[this.name][2].call(self)){
  269. return;
  270. }
  271. /* 执行默认事件 */
  272. switch(this.name){
  273. case "close":
  274. case "cancel":
  275. self.hide(false);
  276. break;
  277. case "submit":
  278. self.find("form").submit();
  279. break;
  280. }
  281. }
  282. });
  283. }
  284. } else {
  285. tools.remove();
  286. }
  287. }
  288. /**
  289. * 构造方法,用于实例化一个新的弹出层对象
  290. +----------------------------------------------------------
  291. * element 弹出层内容元素
  292. * options 弹出层选项
  293. +----------------------------------------------------------
  294. */
  295. ThinkBox = function(element, options){
  296. var self = this, options, box, boxLeft; //初始化变量
  297. options = $.extend({}, defaults, options || {}); //合并配置选项
  298. /* 创建弹出层容器 */
  299. box = $(wrapper).addClass("thinkbox-" + options.style).data("thinkbox", self);
  300. /* 保存弹出层基本信息到全局变量 */
  301. this.key = "thinkbox_" + new Date().getTime() + (Math.random() + "").substr(2,12);
  302. lists[this.key] = [options, box];
  303. /* 缓存弹出层,防止弹出多个 */
  304. options.dataEle && $(options.dataEle).data("thinkbox", self);
  305. /**
  306. * 给box绑定事件
  307. * 鼠标按下记录当前弹出层对象
  308. * 鼠标点击阻止事件冒泡
  309. */
  310. box.on("click mousedown", function(event){
  311. setCurrent.call(self);
  312. event.stopPropagation();
  313. });
  314. /* 设置弹出层位置属性 */
  315. options.fixed || box.css("position", "absolute");
  316. /* 安装弹出层相关组件 */
  317. setupTitleBar.call(self); // 安装标题栏
  318. setupToolsBar.call(self);// 安装工具栏
  319. /* 自动加载css文件并显示弹出层 */
  320. includeCss("/skin/" + options.style + "/style.css", function(){
  321. box.hide().appendTo("body"); //放入body
  322. /* 解决拖动出浏览器时左边不显示的BUG */
  323. boxLeft = $(".thinkbox-left", box).width();
  324. boxLeft && $(".thinkbox-left", box).append($("<div/>").css("width", boxLeft));
  325. self.setSize(options.width, options.height);
  326. self.setContent(element || "<div></div>"); //设置内容
  327. options.display && self.show();
  328. });
  329. }; //END ThinkBox
  330. /**
  331. * 注册ThinkBox开放API接口
  332. */
  333. ThinkBox.prototype = {
  334. /* 显示弹出层 */
  335. "show" : function(){
  336. var self = this, options = lists[this.key][0], box = lists[this.key][1];
  337. if(box.is(":visible")) return this;
  338. options.modal && setupModal.call(this); // 安装模态背景
  339. fire.call(this, options.beforeShow); //调用显示之前回调函数
  340. //显示效果
  341. switch(options.show[0]){
  342. case "slideDown":
  343. box.stop(true, true).slideDown(options.show[1], _);
  344. break;
  345. case "fadeIn":
  346. box.stop(true, true).fadeIn(options.show[1], _);
  347. break;
  348. default:
  349. box.show(options.show[1], _);
  350. }
  351. //窗口大小改变后重设位置和大小
  352. options.resize && _win.on("resize." + self.key, function(){
  353. self.setSize(options.width, options.height);
  354. self.resetLocate();
  355. });
  356. setCurrent.call(this);
  357. return this;
  358. function _(){
  359. options.delayClose &&
  360. $.isNumeric(options.delayClose) &&
  361. setTimeout(function(){
  362. self.hide();
  363. }, options.delayClose);
  364. //调用显示后的回调方法
  365. fire.call(self, options.afterShow);
  366. }
  367. },
  368. /* 关闭弹出层 data 为传递给关闭后回调函数的额外数据 */
  369. "hide" : function(data){
  370. var self = this, options = lists[this.key][0], box = lists[this.key][1], modal;
  371. if(!box.is(":visible")) return this;
  372. //隐藏遮罩层
  373. modal = box.data("ThinkBoxModal");
  374. modal && modal.fadeOut();
  375. //影藏效果
  376. switch(options.hide[0]){
  377. case "slideUp":
  378. box.stop(true, true).slideUp(options.hide[1], _);
  379. break;
  380. case "fadeOut":
  381. box.stop(true, true).fadeOut(options.hide[1], _);
  382. break;
  383. default:
  384. box.hide(options.hide[1], _);
  385. }
  386. return this;
  387. function _() {
  388. fire.call(self, options.afterHide, data); //隐藏后的回调方法
  389. options.unload && unload.call(self);
  390. }
  391. },
  392. /* 显示或隐藏弹出层 */
  393. "toggle" : function(){
  394. return lists[this.key][1].is(":visible") ? self.hide() : self.show();
  395. },
  396. /* 在弹出层内容中查找 */
  397. "find" : function(selector){
  398. var content = $(".thinkbox-body", lists[this.key][1]);
  399. return selector ? $(selector, content) : content.children();
  400. },
  401. /* 获取弹出层内容 */
  402. "getContent" : function(){
  403. return $(".thinkbox-body", lists[this.key][1]).html()
  404. },
  405. /* 设置弹出层内容 */
  406. "setContent" : function(content){ //设置弹出层内容
  407. var options = lists[this.key][0];
  408. $(".thinkbox-body", lists[this.key][1]).empty().append($(content).show()); // 添加新内容
  409. this.resetLocate(); //设置弹出层显示位置
  410. return this;
  411. },
  412. /* 设置弹出层内容区域大小 */
  413. "setSize" : function(width, height){
  414. var width = $.isFunction(width) ? width.call(this) : width,
  415. height = $.isFunction(height) ? height.call(this) : height;
  416. $(".thinkbox-body", lists[this.key][1]).css({"width" : width, "height" : height});
  417. return this;
  418. },
  419. /* 移动弹出层到屏幕中间 */
  420. "moveToCenter" : function() {
  421. var size = this.getSize(),
  422. view = viewport(),
  423. overflow = lists[this.key][1].css("position") == "fixed" ? [0, 0] : [view.left, view.top],
  424. x = overflow[0] + view.width / 2,
  425. y = overflow[1] + view.height / 2;
  426. this.moveTo(x - size[0] / 2, y - size[1] / 2);
  427. return this;
  428. },
  429. /* 移动弹出层到指定坐标 */
  430. "moveTo" : function (x, y) {
  431. var box = lists[this.key][1], options = lists[this.key][0];
  432. $.isNumeric(x) &&
  433. (options.locate[0] == "left" ? box.css({"left" : x}) : box.css({"right" : x}));
  434. $.isNumeric(y) &&
  435. (options.locate[1] == "top" ? box.css({"top" : y}) : box.css({"bottom" : y}));
  436. return this;
  437. },
  438. /* 获取弹出层尺寸 */
  439. "getSize" : function (){
  440. var size = [0, 0], box = lists[this.key][1];
  441. if(box.is(":visible")) //获取显示的弹出层尺寸
  442. size = [box.width(), box.height()];
  443. else { //获取隐藏的弹出层尺寸
  444. box.css({"visibility" : "hidden", "display" : "block"});
  445. size = [box.width(), box.height()];
  446. box.css({"visibility" : "visible", "display" : "none"});
  447. }
  448. return size;
  449. },
  450. /* 设置弹出层标题 */
  451. "setTitle" : function(title){
  452. $(".thinkbox-title", lists[this.key][1]).empty().append("<span>" + title + "</span>");
  453. return this;
  454. },
  455. /* 重置弹出层位置 */
  456. "resetLocate" : function(){
  457. var options = lists[this.key][0];
  458. options.center ?
  459. this.moveToCenter() :
  460. this.moveTo(
  461. $.isNumeric(options.x) ?
  462. options.x :
  463. ($.isFunction(options.x) ? options.x.call($(options.dataEle)) : 0),
  464. $.isNumeric(options.y) ?
  465. options.y :
  466. ($.isFunction(options.y) ? options.y.call($(options.dataEle)) : 0)
  467. );
  468. return this;
  469. },
  470. /* 设置状态栏信息 */
  471. "setStatus" : function(content, name){
  472. var options = lists[this.key][0],
  473. box = lists[this.key][1],
  474. name = name ? "thinkbox-status-" + name : "", status;
  475. /* 存在工具栏则显示状态信息 */
  476. if(options.tools){
  477. $(".thinkbox-status", box).remove();
  478. status = $("<div class=\"thinkbox-status\">").addClass(name).html(content);
  479. $(".thinkbox-tools", box).prepend(status);
  480. }
  481. return this;
  482. },
  483. /* 添加一个按钮 */
  484. "addToolsButton" : function(name, config){
  485. var options = lists[this.key][0],
  486. box = lists[this.key][1], button;
  487. /* 存在工具栏则创建button */
  488. if(options.tools){
  489. button = $("<button/>").attr("name", name).text(config[0]);
  490. config[1] && button.addClass("thinkbox-button-" + config[1]);
  491. if(!$.isFunction(config[2])){config[2] = $.noop};
  492. $(".thinkbox-tools", box).append(button);
  493. }
  494. return this;
  495. },
  496. /* 重置一个按钮 */
  497. "setToolsButton" : function(oldName, newName, config){
  498. var options = lists[this.key][0],
  499. box = lists[this.key][1], button;
  500. button = $(".thinkbox-tools", box).find("button[name=" + oldName + "]", box)
  501. .attr("name", newName).text(config[0]);
  502. options.buttons[newName] = config;
  503. config[1] && button.removeClass().addClass("thinkbox-button-" + config[1]);
  504. if(!$.isFunction(config[2])){config[2] = $.noop};
  505. return this;
  506. },
  507. /* 卸载一个按钮 */
  508. "removeToolsButton" : function(name){
  509. $(".thinkbox-tools", lists[this.key][1]).find("button[name='" + name + "']").remove();
  510. return this;
  511. },
  512. /* 禁用一个按钮 */
  513. "disableToolsButton" : function(name){
  514. $(".thinkbox-tools", lists[this.key][1]).find("button[name='" + name + "']")
  515. .addClass("disabled").attr("disabled", "disabled");
  516. return this;
  517. },
  518. /* 启用一个按钮 */
  519. "enableToolsButton" : function(name){
  520. $(".thinkbox-tools", lists[this.key][1]).find("button[name='" + name + "']")
  521. .removeClass("disabled").removeAttr("disabled", "disabled");
  522. return this;
  523. },
  524. /* 最小化弹出层 */
  525. "minimize" : function(){
  526. return this;
  527. },
  528. /* 最大化弹出层 */
  529. "maximize" : function(){
  530. return this;
  531. }
  532. }
  533. /* 按ESC关闭弹出层 */
  534. _doc.mousedown(function(){lists.current = null})
  535. .keydown(function(event){
  536. lists.current
  537. && lists[lists.current][0].escHide
  538. && event.keyCode == 27
  539. && lists[lists.current][1].data("thinkbox").hide();
  540. });
  541. /**
  542. * 创建一个新的弹出层对象
  543. +----------------------------------------------------------
  544. * element 弹出层内容元素
  545. * options 弹出层选项
  546. +----------------------------------------------------------
  547. */
  548. $.thinkbox = function(element, options){
  549. if($.isPlainObject(options) && options.dataEle){
  550. var data = $(options.dataEle).data("thinkbox");
  551. if(data) return options.display === false ? data : data.show();
  552. }
  553. return new ThinkBox(element, options);
  554. }
  555. /**
  556. +----------------------------------------------------------
  557. * 弹出层内置扩展
  558. +----------------------------------------------------------
  559. */
  560. $.extend($.thinkbox, {
  561. /**
  562. * 设置弹出层默认参数
  563. * @param {string} name 配置名称
  564. * @param {string} value 配置的值
  565. */
  566. "defaults" : function(name, value){
  567. if($.isPlainObject(name)){
  568. $.extend(defaults, name);
  569. } else {
  570. defaults[name] = value;
  571. }
  572. },
  573. // 以一个URL加载内容并以ThinBox弹出层的形式展现
  574. "load" : function(url, opt){
  575. var options = {
  576. "clone" : false,
  577. "loading" : "加载中...",
  578. "type" : "GET",
  579. "dataType" : "text",
  580. "cache" : false,
  581. "onload" : undefined
  582. }, self, ajax, onload, loading, url = url.split(/\s+/);
  583. $.extend(options, opt || {}); //合并配置项
  584. //保存一些参数
  585. onload = options.onload;
  586. loading = options.loading;
  587. //组装AJAX请求参数
  588. ajax = {
  589. "data" : options.data,
  590. "type" : options.type,
  591. "dataType" : options.dataType,
  592. "cache" : options.cache,
  593. "success" : function(data) {
  594. url[1] && (data = $(data).find(url[1]));
  595. if($.isFunction(onload))
  596. data = fire.call(self, onload, data); //调用onload回调函数
  597. self.setContent(data); //设置内容并显示弹出层
  598. loading || self.show(); //没有loading状态则直接显示弹出层
  599. }
  600. };
  601. //删除ThinkBox不需要的参数
  602. del(["data", "type", "cache", "dataType", "onload", "loading"], options);
  603. self = loading ?
  604. //显示loading信息
  605. $.thinkbox("<div class=\"thinkbox-load-loading\">" + loading + "</div>", options) :
  606. //不显示loading信息则创建后不显示弹出层
  607. $.thinkbox("<div/>", $.extend({}, options, {"display" : false}));
  608. $.ajax(url[0], ajax);
  609. return self;
  610. },
  611. // 弹出一个iframe
  612. "iframe" : function(url, opt){
  613. var options = {
  614. "width" : 500,
  615. "height" : 400,
  616. "scrolling" : "no",
  617. "onload" : undefined
  618. }, self, iframe, onload;
  619. $.extend(options, opt || {}); //合并配置项
  620. onload = options.onload; //设置加载完成后的回调方法
  621. //创建iframe
  622. iframe = $("<iframe/>").attr({
  623. "width" : options.width,
  624. "height" : options.height,
  625. "frameborder" : 0,
  626. "scrolling" : options.scrolling,
  627. "src" : url})
  628. .load(function(){fire.call(self, onload)});
  629. del(["width", "height", "scrolling", "onload"], options);//删除不必要的信息
  630. self = $.thinkbox(iframe, options);
  631. return self;
  632. },
  633. // 提示框 可以配合ThinkPHP的ajaxReturn
  634. "tips" : function(msg, type, opt){
  635. var options = {
  636. "modalClose" : false,
  637. "escHide" : false,
  638. "unload" : true,
  639. "close" : false,
  640. "delayClose" : 1000
  641. }, html;
  642. //数字type转换为字符串type
  643. switch(type){
  644. case 0: type = "error"; break;
  645. case 1: type = "success"; break;
  646. }
  647. html = "<div class=\"thinkbox-tips thinkbox-tips-" + type + "\">" + msg + "</div>";
  648. $.extend(options, opt || {});
  649. return $.thinkbox(html, options);
  650. },
  651. // 成功提示框
  652. "success" : function(msg, opt){
  653. return this.tips(msg, "success", opt);
  654. },
  655. // 错误提示框
  656. "error" : function(msg, opt){
  657. return this.tips(msg, "error", opt);
  658. },
  659. // 数据加载
  660. "loading" : function(msg, opt){
  661. var options = opt || {};
  662. options.delayClose = 0;
  663. return this.tips(msg, "loading", options);
  664. },
  665. //消息框
  666. "msg" : function(msg, opt){
  667. var options = {
  668. "drag" : false,
  669. "escHide" : false,
  670. "delayClose" : 0,
  671. "center" : false,
  672. "title" : "消息",
  673. "x" : 0,
  674. "y" : 0,
  675. "locate" : ["right", "bottom"],
  676. "show" : ["slideDown", "slow"],
  677. "hide" : ["slideUp", "slow"]
  678. }, html;
  679. $.extend(options, opt || {});
  680. html = $("<div/>").addClass("thinkbox-msg").html(msg);
  681. return $.thinkbox(html, options);
  682. },
  683. //提示框
  684. "alert" : function(msg, opt){
  685. var options = {
  686. "title" : lang.alert || "Alert",
  687. "modal" : true,
  688. "modalClose" : false,
  689. "unload" : false,
  690. "tools" : true,
  691. "actions" : ["close"],
  692. "buttons" : {"ok" : [lang.ok || "Ok", "blue", function(){this.hide()}]}
  693. };
  694. $.extend(options, opt || {});
  695. //删除ThinkBox不需要的参数
  696. del("ok", options);
  697. var html = $("<div/>").addClass("thinkbox-alert").html(msg);
  698. return $.thinkbox(html, options);
  699. },
  700. //确认框
  701. "confirm" : function(msg, opt){
  702. var options = {"title" : "确认", "modal" : false, "modalClose" : false},
  703. button = {"ok" : "确定", "cancel" : "取消"};
  704. $.extend(options, opt || {});
  705. options.ok && (button.ok = options.ok);
  706. options.cancel && (button.cancel = options.cancel);
  707. //删除ThinkBox不需要的参数
  708. del(["ok", "cancel"], options);
  709. options.buttons = button;
  710. var html = $("<div/>").addClass("thinkbox-confirm").html(msg);
  711. return $.thinkbox(html, options);
  712. },
  713. //弹出层内部获取弹出层对象
  714. "get" : function(selector){
  715. //TODO:通过弹窗内部元素找
  716. return $(selector).closest(".thinkbox").data("thinkbox");
  717. }
  718. });
  719. $.fn.thinkbox = function(opt){
  720. if(opt == "get") return $(this).data("thinkbox");
  721. return this.each(function(){
  722. var self = $(this), box = self.data("thinkbox"), options, event;
  723. switch(opt){
  724. case "show":
  725. box && box.show();
  726. break;
  727. case "hide":
  728. box && box.hide();
  729. break;
  730. case "toggle":
  731. box && box.toggle();
  732. break;
  733. default:
  734. options = {
  735. "title" : self.attr("title"),
  736. "dataEle" : this,
  737. "fixed" : false,
  738. "center" : false,
  739. "modal" : false,
  740. "drag" : false
  741. };
  742. opt = $.isPlainObject(opt) ? opt : {};
  743. $.extend(options, {
  744. "x" : function(){return $(this).offset().left},
  745. "y" : function(){return $(this).offset().top + $(this).outerHeight()}
  746. }, opt);
  747. if(options.event){
  748. self.on(event, function(){
  749. _.call(self, options);
  750. return false;
  751. });
  752. } else {
  753. _.call(self, options);
  754. }
  755. }
  756. });
  757. function _(options){
  758. var href = this.data("href") || this.attr("href");
  759. if(href.substr(0, 1) == "#"){
  760. $.thinkbox(href, options);
  761. } else if(href.substr(0, 7) == "http://" || href.substr(0, 8) == "https://"){
  762. $.thinkbox.iframe(href, options);
  763. } else {
  764. $.thinkbox.load(href, options);
  765. }
  766. }
  767. }
  768. })(jQuery);