select-ui.min.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. 
  2. (function($, undefined) {
  3. $.uedWidget = function(name, base, prototype) {
  4. var namespace = name.split( "." )[0], fullName;
  5. name = name.split( "." )[1];
  6. fullName = namespace + "-" + name;
  7. // 例如参数name='ued.tabs',变成namespace='ued',name='tabs',fullName='ued-tabs'
  8. // base默认为Widget类,组件默认会继承base类的所有方法
  9. if (!prototype) {
  10. prototype = base;
  11. base = $.UEDWidget;
  12. }
  13. // create selector for plugin
  14. $.expr[ ":" ][fullName] = function(elem) {
  15. return !!$.data(elem, name);
  16. };
  17. // 创建命名空间$.ued.tabs
  18. $[namespace] = $[namespace] || {};
  19. // 组件的构造函数
  20. $[ namespace ][name] = function(options, element) {
  21. // allow instantiation without initializing for simple inheritance
  22. if (arguments.length) {
  23. this._createWidget(options, element);
  24. }
  25. };
  26. // 初始化父类,一般调用了$.Widget
  27. var basePrototype = new base();
  28. // we need to make the options hash a property directly on the new instance
  29. // otherwise we'll modify the options hash on the prototype that we're
  30. // inheriting from
  31. // $.each( basePrototype, function( key, val ) {
  32. // if ( $.isPlainObject(val) ) {
  33. // basePrototype[ key ] = $.extend( {}, val );
  34. // }
  35. // });
  36. basePrototype.options = $.extend(true, {}, basePrototype.options);
  37. // 给om.tabs继承父类的所有原型方法和参数
  38. $[ namespace ][name].prototype = $.extend(true, basePrototype, {
  39. namespace : namespace,
  40. widgetName : name,
  41. // 组件的事件名前缀,调用_trigger的时候会默认给trigger的事件加上前缀
  42. // 例如_trigger('create')实际会触发'tabscreate'事件
  43. widgetEventPrefix : $[ namespace ][name].prototype.widgetEventPrefix || name,
  44. widgetBaseClass : fullName
  45. }, prototype);
  46. // 把tabs方法挂到jquery对象上,也就是$('#tab1').tabs();
  47. var temp = $.uedWidget.bridge(name, $[ namespace ][name]);
  48. };
  49. $.uedWidget.bridge = function(name, object) {
  50. $.fn[name] = function(options) {
  51. // 如果tabs方法第一个参数是string类型,则认为是调用组件的方法,否则调用options方法
  52. var isMethodCall = typeof options === "string", args = Array.prototype.slice.call(arguments, 1), returnValue = this;
  53. // allow multiple hashes to be passed on init
  54. options = !isMethodCall && args.length ? $.extend.apply(null, [true, options].concat(args)) : options;
  55. // '_'开头的方法被认为是内部方法,不会被执行,如$('#tab1').tabs('_init')
  56. if (isMethodCall && options.charAt(0) === "_") {
  57. return returnValue;
  58. }
  59. if (isMethodCall) {
  60. this.each(function() {
  61. // 执行组件方法
  62. var instance = $.data(this, name);
  63. if (options == 'options') {
  64. returnValue = instance && instance.options;
  65. return false;
  66. } else {
  67. var methodValue = instance && $.isFunction(instance[options]) ? instance[options].apply(instance, args) : instance;
  68. if (methodValue !== instance && methodValue !== undefined) {
  69. returnValue = methodValue;
  70. return false;
  71. }
  72. }
  73. });
  74. } else {
  75. // 调用组件的options方法
  76. this.each(function() {
  77. var instance = $.data(this, name);
  78. if (instance) {
  79. // 设置options后再次调用_init方法,第一次调用是在_createWidget方法里面。这个方法需要开发者去实现。
  80. // 主要是当改变组件中某些参数后可能需要对组件进行重画
  81. instance._setOptions(options || {});
  82. $.extend(instance.options, options);
  83. $(instance.beforeInitListeners).each(function() {
  84. this.call(instance);
  85. });
  86. instance._init();
  87. $(instance.initListeners).each(function() {
  88. this.call(instance);
  89. });
  90. } else {
  91. // 没有实例的话,在这里调用组件类的构造函数,并把构造后的示例保存在dom的data里面。注意这里的this是dom,object是模块类
  92. $.data(this, name, new object(options, this));
  93. }
  94. });
  95. }
  96. return returnValue;
  97. };
  98. };
  99. $.uedWidget.addCreateListener = function(name, fn) {
  100. var temp = name.split(".");
  101. $[ temp[0] ][temp[1]].prototype.createListeners.push(fn);
  102. };
  103. $.uedWidget.addInitListener = function(name, fn) {
  104. var temp = name.split(".");
  105. $[ temp[0] ][temp[1]].prototype.initListeners.push(fn);
  106. };
  107. $.uedWidget.addBeforeInitListener = function(name, fn) {
  108. var temp = name.split(".");
  109. $[ temp[0] ][temp[1]].prototype.beforeInitListeners.push(fn);
  110. };
  111. $.UEDWidget = function(options, element) {
  112. this.createListeners = [];
  113. this.initListeners = [];
  114. this.beforeInitListeners = [];
  115. // allow instantiation without initializing for simple inheritance
  116. if (arguments.length) {
  117. this._createWidget(options, element);
  118. }
  119. };
  120. $.UEDWidget.prototype = {
  121. widgetName : "widget",
  122. widgetEventPrefix : "",
  123. options : {
  124. disabled : false
  125. },
  126. _createWidget : function(options, element) {
  127. // $.widget.bridge stores the plugin instance, but we do it anyway
  128. // so that it's stored even before the _create function runs
  129. $.data(element, this.widgetName, this);
  130. this.element = $(element);
  131. this.options = $.extend(true, {}, this.options, this._getCreateOptions(), options);
  132. var self = this;
  133. //注意,不要少了前边的 "ued-",不然会与jquery-ui冲突
  134. this.element.bind("ued-remove._" + this.widgetName, function() {
  135. self.destroy();
  136. });
  137. // 开发者实现
  138. this._create();
  139. $(this.createListeners).each(function() {
  140. this.call(self);
  141. });
  142. // 如果绑定了初始化的回调函数,会在这里触发。注意绑定的事件名是需要加上前缀的,如$('#tab1').bind('tabscreate',function(){});
  143. this._trigger("create");
  144. // 开发者实现
  145. $(this.beforeInitListeners).each(function() {
  146. this.call(self);
  147. });
  148. this._init();
  149. $(this.initListeners).each(function() {
  150. this.call(self);
  151. });
  152. },
  153. _getCreateOptions : function() {
  154. return $.metadata && $.metadata.get( this.element[0] )[this.widgetName];
  155. },
  156. _create : function() {
  157. },
  158. _init : function() {
  159. },
  160. destroy : function() {
  161. this.element.unbind("." + this.widgetName).removeData(this.widgetName);
  162. this.widget().unbind("." + this.widgetName);
  163. },
  164. widget : function() {
  165. return this.element;
  166. },
  167. option : function(key, value) {
  168. var options = key;
  169. if (arguments.length === 0) {
  170. // don't return a reference to the internal hash
  171. return $.extend({}, this.options);
  172. }
  173. if ( typeof key === "string") {
  174. if (value === undefined) {
  175. return this.options[key];
  176. // 获取值
  177. }
  178. options = {};
  179. options[key] = value;
  180. }
  181. this._setOptions(options);
  182. // 设置值
  183. return this;
  184. },
  185. _setOptions : function(options) {
  186. var self = this;
  187. $.each(options, function(key, value) {
  188. self._setOption(key, value);
  189. });
  190. return this;
  191. },
  192. _setOption : function(key, value) {
  193. this.options[key] = value;
  194. return this;
  195. },
  196. // $.widget中优化过的trigger方法。type是回调事件的名称,如"onRowClick",event是触发回调的事件(通常没有这个事件的时候传null)
  197. // 这个方法只声明了两个参数,如有其他参数可以直接写在event参数后面
  198. _trigger : function(type, event) {
  199. // 获取初始化配置config中的回调方法
  200. var callback = this.options[type];
  201. // 封装js标准event对象为jquery的Event对象
  202. event = $.Event(event);
  203. event.type = type;
  204. // copy original event properties over to the new event
  205. // this would happen if we could call $.event.fix instead of $.Event
  206. // but we don't have a way to force an event to be fixed multiple times
  207. if (event.originalEvent) {
  208. for (var i = $.event.props.length, prop; i; ) {
  209. prop = $.event.props[--i];
  210. event[prop] = event.originalEvent[prop];
  211. }
  212. }
  213. // 构造传给回调函数的参数,event放置在最后
  214. var newArgs = [], argLength = arguments.length;
  215. for (var i = 2; i < argLength; i++) {
  216. newArgs[i - 2] = arguments[i];
  217. }
  218. if (argLength > 1) {
  219. newArgs[argLength - 2] = arguments[1];
  220. }
  221. return !($.isFunction(callback) && callback.apply(this.element, newArgs) === false || event.isDefaultPrevented() );
  222. }
  223. };
  224. })(jQuery);
  225. /*
  226. * uedBottomBar
  227. * author xzjiang
  228. * Date: 2013/1/8
  229. */
  230. (function($) {
  231. /**
  232. * @name uedSelect
  233. * @class 下拉列表框
  234. */
  235. $.uedWidget('ued.uedSelect', {
  236. options : {
  237. //··默认宽度
  238. width:300
  239. },
  240. _create : function() {
  241. var $el = this.element, options = this.options, self = this;
  242. this._createSelect($el);
  243. },
  244. _init : function() {
  245. var self = this, options = this.options, $el = this.element;
  246. },
  247. _createSelect : function($el) {
  248. var $el = this.element, options = this.options, self = this;
  249. //··设置文本主体
  250. var $container = $('<div class="uew-select"></div>')
  251. var $stateDefault = $('<div class="uew-select-value ue-state-default"></div>')
  252. var $text = $('<em class="uew-select-text"></em>')
  253. $stateDefault.append($text).append('<em class="uew-icon uew-icon-triangle-1-s"></em>')
  254. $el.wrap($container)
  255. $el.before($stateDefault)
  256. //··设置组件宽度
  257. var width = parseInt($el.attr("width")) ? parseInt($el.attr("width")) : options.width;
  258. $el.width(width);
  259. //··设置组件的样式和大小(在有单位和无单位情况)
  260. if($el.attr("unit")){
  261. var $unit =$('<span class="uew-unit">'+$el.attr("unit")+'</span>')
  262. $stateDefault.addClass("select-hasUnit").append($unit)
  263. $stateDefault.width(width - 47);
  264. }
  265. else{
  266. $stateDefault.width(width -27);
  267. }
  268. //判断边框样式
  269. if($el.hasClass('uew-no-border')){
  270. $el.parent().find('.uew-select-value').addClass('uew-no-border');
  271. // 边框的hover状态
  272. $el.hover(function(){
  273. $el.parent().find(".uew-select-value").addClass("uew-border-flag");
  274. },function(){
  275. $el.parent().find(".uew-select-value").removeClass("uew-border-flag");
  276. });
  277. }
  278. //··默认文本
  279. $text.text($el.find(":selected").text())
  280. //··添加焦点操作
  281. $el.focus(function(){
  282. $el.parent().addClass("ue-state-focus");
  283. });
  284. $el.blur(function(){
  285. $el.parent().removeClass("ue-state-focus");
  286. });
  287. $el.parent().hover(function(){
  288. $el.parent().addClass("ue-state-hover");
  289. },function(){
  290. $el.parent().removeClass("ue-state-hover");
  291. });
  292. $el.change(function(){
  293. $el.parent().find(".uew-select-text").text($(this).find(":selected").text())
  294. });
  295. },
  296. // 重置option选项
  297. setOption : function()
  298. {
  299. var self = this, options = this.options, $el = this.element;
  300. $el.parent().find(".uew-select-text").text($el.find(":selected").text());
  301. },
  302. destroy : function() {
  303. var $uedSelect = this.element;
  304. $uedSelect.remove();
  305. }
  306. });
  307. })(jQuery);