API tools faq
paste
Advertisement
cdsatrian

sms group

cdsatrian
Apr 15th, 2013
95
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 26.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html
  3. <head>
  4.   <title> Pesan Group </title>
  5.   <!--link rel="stylesheet" type="text/css" href="css/jquery.multiselect.css" /-->
  6.   <style type="text/css">
  7. .ui-multiselect { padding:2px 0 2px 4px; text-align:left }
  8. .ui-multiselect span.ui-icon { float:right }
  9. .ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
  10. .ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }
  11.  
  12. .ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
  13. .ui-multiselect-header ul { font-size:0.9em }
  14. .ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
  15. .ui-multiselect-header a { text-decoration:none }
  16. .ui-multiselect-header a:hover { text-decoration:underline }
  17. .ui-multiselect-header span.ui-icon { float:left }
  18. .ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }
  19.  
  20. .ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left }
  21. .ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
  22. .ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
  23. .ui-multiselect-checkboxes label input { position:relative; top:1px }
  24. .ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
  25. .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
  26. .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }
  27.  
  28. /* remove label borders in IE6 because IE6 does not support transparency */
  29. * html .ui-multiselect-checkboxes label { border:none }
  30.   </style>
  31.   <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
  32.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  33.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  34.   <!--script type="text/javascript" src="js/jquery.multiselect.js"></script -->
  35.   <script>
  36. /* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, boss:true, undef:true, curly:true, browser:true, jquery:true */
  37. /*
  38.  * jQuery MultiSelect UI Widget 1.14pre
  39.  * Copyright (c) 2012 Eric Hynds
  40.  *
  41.  * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
  42.  *
  43.  * Depends:
  44.  *   - jQuery 1.4.2+
  45.  *   - jQuery UI 1.8 widget factory
  46.  *
  47.  * Optional:
  48.  *   - jQuery UI effects
  49.  *   - jQuery UI position utility
  50.  *
  51.  * Dual licensed under the MIT and GPL licenses:
  52.  *   http://www.opensource.org/licenses/mit-license.php
  53.  *   http://www.gnu.org/licenses/gpl.html
  54.  *
  55.  */
  56. (function($, undefined) {
  57.  
  58.   var multiselectID = 0;
  59.   var $doc = $(document);
  60.  
  61.   $.widget("ech.multiselect", {
  62.  
  63.     // default options
  64.     options: {
  65.       header: true,
  66.       height: 175,
  67.       minWidth: 225,
  68.       classes: '',
  69.       checkAllText: 'Check all',
  70.       uncheckAllText: 'Uncheck all',
  71.       noneSelectedText: 'Select options',
  72.       selectedText: '# selected',
  73.       selectedList: 0,
  74.       show: null,
  75.       hide: null,
  76.       autoOpen: false,
  77.       multiple: true,
  78.       position: {}
  79.     },
  80.  
  81.     _create: function() {
  82.       var el = this.element.hide();
  83.       var o = this.options;
  84.  
  85.       this.speed = $.fx.speeds._default; // default speed for effects
  86.       this._isOpen = false; // assume no
  87.  
  88.       // create a unique namespace for events that the widget
  89.       // factory cannot unbind automatically. Use eventNamespace if on
  90.       // jQuery UI 1.9+, and otherwise fallback to a custom string.
  91.       this._namespaceID = this.eventNamespace || ('multiselect' + multiselectID);
  92.  
  93.       var button = (this.button = $('<button type="button"><span class="ui-icon ui-icon-triangle-2-n-s"></span></button>'))
  94.         .addClass('ui-multiselect ui-widget ui-state-default ui-corner-all')
  95.         .addClass(o.classes)
  96.         .attr({ 'title':el.attr('title'), 'aria-haspopup':true, 'tabIndex':el.attr('tabIndex') })
  97.         .insertAfter(el),
  98.  
  99.         buttonlabel = (this.buttonlabel = $('<span />'))
  100.           .html(o.noneSelectedText)
  101.           .appendTo(button),
  102.  
  103.         menu = (this.menu = $('<div />'))
  104.           .addClass('ui-multiselect-menu ui-widget ui-widget-content ui-corner-all')
  105.           .addClass(o.classes)
  106.           .appendTo(document.body),
  107.  
  108.         header = (this.header = $('<div />'))
  109.           .addClass('ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix')
  110.           .appendTo(menu),
  111.  
  112.         headerLinkContainer = (this.headerLinkContainer = $('<ul />'))
  113.           .addClass('ui-helper-reset')
  114.           .html(function() {
  115.             if(o.header === true) {
  116.               return '<li><a class="ui-multiselect-all" href="#"><span class="ui-icon ui-icon-check"></span><span>' + o.checkAllText + '</span></a></li><li><a class="ui-multiselect-none" href="#"><span class="ui-icon ui-icon-closethick"></span><span>' + o.uncheckAllText + '</span></a></li>';
  117.             } else if(typeof o.header === "string") {
  118.               return '<li>' + o.header + '</li>';
  119.             } else {
  120.               return '';
  121.             }
  122.           })
  123.           .append('<li class="ui-multiselect-close"><a href="#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li>')
  124.           .appendTo(header),
  125.  
  126.         checkboxContainer = (this.checkboxContainer = $('<ul />'))
  127.           .addClass('ui-multiselect-checkboxes ui-helper-reset')
  128.           .appendTo(menu);
  129.  
  130.         // perform event bindings
  131.         this._bindEvents();
  132.  
  133.         // build menu
  134.         this.refresh(true);
  135.  
  136.         // some addl. logic for single selects
  137.         if(!o.multiple) {
  138.           menu.addClass('ui-multiselect-single');
  139.         }
  140.  
  141.         // bump unique ID
  142.         multiselectID++;
  143.     },
  144.  
  145.     _init: function() {
  146.       if(this.options.header === false) {
  147.         this.header.hide();
  148.       }
  149.       if(!this.options.multiple) {
  150.         this.headerLinkContainer.find('.ui-multiselect-all, .ui-multiselect-none').hide();
  151.       }
  152.       if(this.options.autoOpen) {
  153.         this.open();
  154.       }
  155.       if(this.element.is(':disabled')) {
  156.         this.disable();
  157.       }
  158.     },
  159.  
  160.     refresh: function(init) {
  161.       var el = this.element;
  162.       var o = this.options;
  163.       var menu = this.menu;
  164.       var checkboxContainer = this.checkboxContainer;
  165.       var optgroups = [];
  166.       var html = "";
  167.       var id = el.attr('id') || multiselectID++; // unique ID for the label & option tags
  168.  
  169.       // build items
  170.       el.find('option').each(function(i) {
  171.         var $this = $(this);
  172.         var parent = this.parentNode;
  173.         var title = this.innerHTML;
  174.         var description = this.title;
  175.         var value = this.value;
  176.         var inputID = 'ui-multiselect-' + (this.id || id + '-option-' + i);
  177.         var isDisabled = this.disabled;
  178.         var isSelected = this.selected;
  179.         var labelClasses = [ 'ui-corner-all' ];
  180.         var liClasses = (isDisabled ? 'ui-multiselect-disabled ' : ' ') + this.className;
  181.         var optLabel;
  182.  
  183.         // is this an optgroup?
  184.         if(parent.tagName === 'OPTGROUP') {
  185.           optLabel = parent.getAttribute('label');
  186.  
  187.           // has this optgroup been added already?
  188.           if($.inArray(optLabel, optgroups) === -1) {
  189.             html += '<li class="ui-multiselect-optgroup-label ' + parent.className + '"><a href="#">' + optLabel + '</a></li>';
  190.             optgroups.push(optLabel);
  191.           }
  192.         }
  193.  
  194.         if(isDisabled) {
  195.           labelClasses.push('ui-state-disabled');
  196.         }
  197.  
  198.         // browsers automatically select the first option
  199.         // by default with single selects
  200.         if(isSelected && !o.multiple) {
  201.           labelClasses.push('ui-state-active');
  202.         }
  203.  
  204.         html += '<li class="' + liClasses + '">';
  205.  
  206.         // create the label
  207.         html += '<label for="' + inputID + '" title="' + description + '" class="' + labelClasses.join(' ') + '">';
  208.         html += '<input id="' + inputID + '" name="multiselect_' + id + '" type="' + (o.multiple ? "checkbox" : "radio") + '" value="' + value + '" title="' + title + '"';
  209.  
  210.         // pre-selected?
  211.         if(isSelected) {
  212.           html += ' checked="checked"';
  213.           html += ' aria-selected="true"';
  214.         }
  215.  
  216.         // disabled?
  217.         if(isDisabled) {
  218.           html += ' disabled="disabled"';
  219.           html += ' aria-disabled="true"';
  220.         }
  221.  
  222.         // add the title and close everything off
  223.         html += ' /><span>' + title + '</span></label></li>';
  224.       });
  225.  
  226.       // insert into the DOM
  227.       checkboxContainer.html(html);
  228.  
  229.       // cache some moar useful elements
  230.       this.labels = menu.find('label');
  231.       this.inputs = this.labels.children('input');
  232.  
  233.       // set widths
  234.       this._setButtonWidth();
  235.       this._setMenuWidth();
  236.  
  237.       // remember default value
  238.       this.button[0].defaultValue = this.update();
  239.  
  240.       // broadcast refresh event; useful for widgets
  241.       if(!init) {
  242.         this._trigger('refresh');
  243.       }
  244.     },
  245.  
  246.     // updates the button text. call refresh() to rebuild
  247.     update: function() {
  248.       var o = this.options;
  249.       var $inputs = this.inputs;
  250.       var $checked = $inputs.filter(':checked');
  251.       var numChecked = $checked.length;
  252.       var value;
  253.  
  254.       if(numChecked === 0) {
  255.         value = o.noneSelectedText;
  256.       } else {
  257.         if($.isFunction(o.selectedText)) {
  258.           value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
  259.         } else if(/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {
  260.           value = $checked.map(function() { return $(this).next().html(); }).get().join(', ');
  261.         } else {
  262.           value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
  263.         }
  264.       }
  265.  
  266.       this._setButtonValue(value);
  267.  
  268.       return value;
  269.     },
  270.  
  271.     // this exists as a separate method so that the developer
  272.     // can easily override it.
  273.     _setButtonValue: function(value) {
  274.       this.buttonlabel.text(value);
  275.     },
  276.  
  277.     // binds events
  278.     _bindEvents: function() {
  279.       var self = this;
  280.       var button = this.button;
  281.  
  282.       function clickHandler() {
  283.         self[ self._isOpen ? 'close' : 'open' ]();
  284.         return false;
  285.       }
  286.  
  287.       // webkit doesn't like it when you click on the span :(
  288.       button
  289.         .find('span')
  290.         .bind('click.multiselect', clickHandler);
  291.  
  292.       // button events
  293.       button.bind({
  294.         click: clickHandler,
  295.         keypress: function(e) {
  296.           switch(e.which) {
  297.             case 27: // esc
  298.               case 38: // up
  299.               case 37: // left
  300.               self.close();
  301.             break;
  302.             case 39: // right
  303.               case 40: // down
  304.               self.open();
  305.             break;
  306.           }
  307.         },
  308.         mouseenter: function() {
  309.           if(!button.hasClass('ui-state-disabled')) {
  310.             $(this).addClass('ui-state-hover');
  311.           }
  312.         },
  313.         mouseleave: function() {
  314.           $(this).removeClass('ui-state-hover');
  315.         },
  316.         focus: function() {
  317.           if(!button.hasClass('ui-state-disabled')) {
  318.             $(this).addClass('ui-state-focus');
  319.           }
  320.         },
  321.         blur: function() {
  322.           $(this).removeClass('ui-state-focus');
  323.         }
  324.       });
  325.  
  326.       // header links
  327.       this.header.delegate('a', 'click.multiselect', function(e) {
  328.         // close link
  329.         if($(this).hasClass('ui-multiselect-close')) {
  330.           self.close();
  331.  
  332.           // check all / uncheck all
  333.         } else {
  334.           self[$(this).hasClass('ui-multiselect-all') ? 'checkAll' : 'uncheckAll']();
  335.         }
  336.  
  337.         e.preventDefault();
  338.       });
  339.  
  340.       // optgroup label toggle support
  341.       this.menu.delegate('li.ui-multiselect-optgroup-label a', 'click.multiselect', function(e) {
  342.         e.preventDefault();
  343.  
  344.         var $this = $(this);
  345.         var $inputs = $this.parent().nextUntil('li.ui-multiselect-optgroup-label').find('input:visible:not(:disabled)');
  346.         var nodes = $inputs.get();
  347.         var label = $this.parent().text();
  348.  
  349.         // trigger event and bail if the return is false
  350.         if(self._trigger('beforeoptgrouptoggle', e, { inputs:nodes, label:label }) === false) {
  351.           return;
  352.         }
  353.  
  354.         // toggle inputs
  355.         self._toggleChecked(
  356.           $inputs.filter(':checked').length !== $inputs.length,
  357.           $inputs
  358.         );
  359.  
  360.         self._trigger('optgrouptoggle', e, {
  361.           inputs: nodes,
  362.           label: label,
  363.           checked: nodes[0].checked
  364.         });
  365.       })
  366.       .delegate('label', 'mouseenter.multiselect', function() {
  367.         if(!$(this).hasClass('ui-state-disabled')) {
  368.           self.labels.removeClass('ui-state-hover');
  369.           $(this).addClass('ui-state-hover').find('input').focus();
  370.         }
  371.       })
  372.       .delegate('label', 'keydown.multiselect', function(e) {
  373.         e.preventDefault();
  374.  
  375.         switch(e.which) {
  376.           case 9: // tab
  377.             case 27: // esc
  378.             self.close();
  379.           break;
  380.           case 38: // up
  381.             case 40: // down
  382.             case 37: // left
  383.             case 39: // right
  384.             self._traverse(e.which, this);
  385.           break;
  386.           case 13: // enter
  387.             $(this).find('input')[0].click();
  388.           break;
  389.         }
  390.       })
  391.       .delegate('input[type="checkbox"], input[type="radio"]', 'click.multiselect', function(e) {
  392.         var $this = $(this);
  393.         var val = this.value;
  394.         var checked = this.checked;
  395.         var tags = self.element.find('option');
  396.  
  397.         // bail if this input is disabled or the event is cancelled
  398.         if(this.disabled || self._trigger('click', e, { value: val, text: this.title, checked: checked }) === false) {
  399.           e.preventDefault();
  400.           return;
  401.         }
  402.  
  403.         // make sure the input has focus. otherwise, the esc key
  404.         // won't close the menu after clicking an item.
  405.         $this.focus();
  406.  
  407.         // toggle aria state
  408.         $this.attr('aria-selected', checked);
  409.  
  410.         // change state on the original option tags
  411.         tags.each(function() {
  412.           if(this.value === val) {
  413.             this.selected = checked;
  414.           } else if(!self.options.multiple) {
  415.             this.selected = false;
  416.           }
  417.         });
  418.  
  419.         // some additional single select-specific logic
  420.         if(!self.options.multiple) {
  421.           self.labels.removeClass('ui-state-active');
  422.           $this.closest('label').toggleClass('ui-state-active', checked);
  423.  
  424.           // close menu
  425.           self.close();
  426.         }
  427.  
  428.         // fire change on the select box
  429.         self.element.trigger("change");
  430.  
  431.         // setTimeout is to fix multiselect issue #14 and #47. caused by jQuery issue #3827
  432.         // http://bugs.jquery.com/ticket/3827
  433.         setTimeout($.proxy(self.update, self), 10);
  434.       });
  435.  
  436.       // close each widget when clicking on any other element/anywhere else on the page
  437.       $doc.bind('mousedown.' + this._namespaceID, function(e) {
  438.         if(self._isOpen && !$.contains(self.menu[0], e.target) && !$.contains(self.button[0], e.target) && e.target !== self.button[0]) {
  439.           self.close();
  440.         }
  441.       });
  442.  
  443.       // deal with form resets.  the problem here is that buttons aren't
  444.       // restored to their defaultValue prop on form reset, and the reset
  445.       // handler fires before the form is actually reset.  delaying it a bit
  446.       // gives the form inputs time to clear.
  447.       $(this.element[0].form).bind('reset.multiselect', function() {
  448.         setTimeout($.proxy(self.refresh, self), 10);
  449.       });
  450.     },
  451.  
  452.     // set button width
  453.     _setButtonWidth: function() {
  454.       var width = this.element.outerWidth();
  455.       var o = this.options;
  456.  
  457.       if(/\d/.test(o.minWidth) && width < o.minWidth) {
  458.         width = o.minWidth;
  459.       }
  460.  
  461.       // set widths
  462.       this.button.outerWidth(width);
  463.     },
  464.  
  465.     // set menu width
  466.     _setMenuWidth: function() {
  467.       var m = this.menu;
  468.       m.outerWidth(this.button.outerWidth());
  469.     },
  470.  
  471.     // move up or down within the menu
  472.     _traverse: function(which, start) {
  473.       var $start = $(start);
  474.       var moveToLast = which === 38 || which === 37;
  475.  
  476.       // select the first li that isn't an optgroup label / disabled
  477.       $next = $start.parent()[moveToLast ? 'prevAll' : 'nextAll']('li:not(.ui-multiselect-disabled, .ui-multiselect-optgroup-label)')[ moveToLast ? 'last' : 'first']();
  478.  
  479.       // if at the first/last element
  480.       if(!$next.length) {
  481.         var $container = this.menu.find('ul').last();
  482.  
  483.         // move to the first/last
  484.         this.menu.find('label')[ moveToLast ? 'last' : 'first' ]().trigger('mouseover');
  485.  
  486.         // set scroll position
  487.         $container.scrollTop(moveToLast ? $container.height() : 0);
  488.  
  489.       } else {
  490.         $next.find('label').trigger('mouseover');
  491.       }
  492.     },
  493.  
  494.     // This is an internal function to toggle the checked property and
  495.     // other related attributes of a checkbox.
  496.     //
  497.     // The context of this function should be a checkbox; do not proxy it.
  498.     _toggleState: function(prop, flag) {
  499.       return function() {
  500.         if(!this.disabled) {
  501.           this[ prop ] = flag;
  502.         }
  503.  
  504.         if(flag) {
  505.           this.setAttribute('aria-selected', true);
  506.         } else {
  507.           this.removeAttribute('aria-selected');
  508.         }
  509.       };
  510.     },
  511.  
  512.     _toggleChecked: function(flag, group) {
  513.       var $inputs = (group && group.length) ?  group : this.inputs;
  514.       var self = this;
  515.  
  516.       // toggle state on inputs
  517.       $inputs.each(this._toggleState('checked', flag));
  518.  
  519.       // give the first input focus
  520.       $inputs.eq(0).focus();
  521.  
  522.       // update button text
  523.       this.update();
  524.  
  525.       // gather an array of the values that actually changed
  526.       var values = $inputs.map(function() {
  527.         return this.value;
  528.       }).get();
  529.  
  530.       // toggle state on original option tags
  531.       this.element
  532.         .find('option')
  533.         .each(function() {
  534.           if(!this.disabled && $.inArray(this.value, values) > -1) {
  535.             self._toggleState('selected', flag).call(this);
  536.           }
  537.         });
  538.  
  539.       // trigger the change event on the select
  540.       if($inputs.length) {
  541.         this.element.trigger("change");
  542.       }
  543.     },
  544.  
  545.     _toggleDisabled: function(flag) {
  546.       this.button.attr({ 'disabled':flag, 'aria-disabled':flag })[ flag ? 'addClass' : 'removeClass' ]('ui-state-disabled');
  547.  
  548.       var inputs = this.menu.find('input');
  549.       var key = "ech-multiselect-disabled";
  550.  
  551.       if(flag) {
  552.         // remember which elements this widget disabled (not pre-disabled)
  553.         // elements, so that they can be restored if the widget is re-enabled.
  554.         inputs = inputs.filter(':enabled').data(key, true)
  555.       } else {
  556.         inputs = inputs.filter(function() {
  557.           return $.data(this, key) === true;
  558.         }).removeData(key);
  559.       }
  560.  
  561.       inputs
  562.         .attr({ 'disabled':flag, 'arial-disabled':flag })
  563.         .parent()[ flag ? 'addClass' : 'removeClass' ]('ui-state-disabled');
  564.  
  565.       this.element.attr({
  566.         'disabled':flag,
  567.         'aria-disabled':flag
  568.       });
  569.     },
  570.  
  571.     // open the menu
  572.     open: function(e) {
  573.       var self = this;
  574.       var button = this.button;
  575.       var menu = this.menu;
  576.       var speed = this.speed;
  577.       var o = this.options;
  578.       var args = [];
  579.  
  580.       // bail if the multiselectopen event returns false, this widget is disabled, or is already open
  581.       if(this._trigger('beforeopen') === false || button.hasClass('ui-state-disabled') || this._isOpen) {
  582.         return;
  583.       }
  584.  
  585.       var $container = menu.find('ul').last();
  586.       var effect = o.show;
  587.  
  588.       // figure out opening effects/speeds
  589.       if($.isArray(o.show)) {
  590.         effect = o.show[0];
  591.         speed = o.show[1] || self.speed;
  592.       }
  593.  
  594.       // if there's an effect, assume jQuery UI is in use
  595.       // build the arguments to pass to show()
  596.       if(effect) {
  597.         args = [ effect, speed ];
  598.       }
  599.  
  600.       // set the scroll of the checkbox container
  601.       $container.scrollTop(0).height(o.height);
  602.  
  603.       // positon
  604.       this.position();
  605.  
  606.       // show the menu, maybe with a speed/effect combo
  607.       $.fn.show.apply(menu, args);
  608.  
  609.       // select the first option
  610.       // triggering both mouseover and mouseover because 1.4.2+ has a bug where triggering mouseover
  611.       // will actually trigger mouseenter.  the mouseenter trigger is there for when it's eventually fixed
  612.       this.labels.eq(0).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');
  613.  
  614.       button.addClass('ui-state-active');
  615.       this._isOpen = true;
  616.       this._trigger('open');
  617.     },
  618.  
  619.     // close the menu
  620.     close: function() {
  621.       if(this._trigger('beforeclose') === false) {
  622.         return;
  623.       }
  624.  
  625.       var o = this.options;
  626.       var effect = o.hide;
  627.       var speed = this.speed;
  628.       var args = [];
  629.  
  630.       // figure out opening effects/speeds
  631.       if($.isArray(o.hide)) {
  632.         effect = o.hide[0];
  633.         speed = o.hide[1] || this.speed;
  634.       }
  635.  
  636.       if(effect) {
  637.         args = [ effect, speed ];
  638.       }
  639.  
  640.       $.fn.hide.apply(this.menu, args);
  641.       this.button.removeClass('ui-state-active').trigger('blur').trigger('mouseleave');
  642.       this._isOpen = false;
  643.       this._trigger('close');
  644.     },
  645.  
  646.     enable: function() {
  647.       this._toggleDisabled(false);
  648.     },
  649.  
  650.     disable: function() {
  651.       this._toggleDisabled(true);
  652.     },
  653.  
  654.     checkAll: function(e) {
  655.       this._toggleChecked(true);
  656.       this._trigger('checkAll');
  657.     },
  658.  
  659.     uncheckAll: function() {
  660.       this._toggleChecked(false);
  661.       this._trigger('uncheckAll');
  662.     },
  663.  
  664.     getChecked: function() {
  665.       return this.menu.find('input').filter(':checked');
  666.     },
  667.  
  668.     destroy: function() {
  669.       // remove classes + data
  670.       $.Widget.prototype.destroy.call(this);
  671.  
  672.       // unbind events
  673.       $doc.unbind(this._namespaceID);
  674.  
  675.       this.button.remove();
  676.       this.menu.remove();
  677.       this.element.show();
  678.  
  679.       return this;
  680.     },
  681.  
  682.     isOpen: function() {
  683.       return this._isOpen;
  684.     },
  685.  
  686.     widget: function() {
  687.       return this.menu;
  688.     },
  689.  
  690.     getButton: function() {
  691.       return this.button;
  692.     },
  693.  
  694.     position: function() {
  695.       var o = this.options;
  696.  
  697.       // use the position utility if it exists and options are specifified
  698.       if($.ui.position && !$.isEmptyObject(o.position)) {
  699.         o.position.of = o.position.of || this.button;
  700.  
  701.         this.menu
  702.           .show()
  703.           .position(o.position)
  704.           .hide();
  705.  
  706.         // otherwise fallback to custom positioning
  707.       } else {
  708.         var pos = this.button.offset();
  709.  
  710.         this.menu.css({
  711.           top: pos.top + this.button.outerHeight(),
  712.           left: pos.left
  713.         });
  714.       }
  715.     },
  716.  
  717.     // react to option changes after initialization
  718.     _setOption: function(key, value) {
  719.       var menu = this.menu;
  720.  
  721.       switch(key) {
  722.         case 'header':
  723.           menu.find('div.ui-multiselect-header')[value ? 'show' : 'hide']();
  724.           break;
  725.         case 'checkAllText':
  726.           menu.find('a.ui-multiselect-all span').eq(-1).text(value);
  727.           break;
  728.         case 'uncheckAllText':
  729.           menu.find('a.ui-multiselect-none span').eq(-1).text(value);
  730.           break;
  731.         case 'height':
  732.           menu.find('ul').last().height(parseInt(value, 10));
  733.           break;
  734.         case 'minWidth':
  735.           this.options[key] = parseInt(value, 10);
  736.           this._setButtonWidth();
  737.           this._setMenuWidth();
  738.           break;
  739.         case 'selectedText':
  740.         case 'selectedList':
  741.         case 'noneSelectedText':
  742.           this.options[key] = value; // these all needs to update immediately for the update() call
  743.           this.update();
  744.           break;
  745.         case 'classes':
  746.           menu.add(this.button).removeClass(this.options.classes).addClass(value);
  747.           break;
  748.         case 'multiple':
  749.           menu.toggleClass('ui-multiselect-single', !value);
  750.           this.options.multiple = value;
  751.           this.element[0].multiple = value;
  752.           this.refresh();
  753.           break;
  754.         case 'position':
  755.           this.position();
  756.       }
  757.  
  758.       $.Widget.prototype._setOption.apply(this, arguments);
  759.     }
  760.   });
  761.  
  762. })(jQuery);
  763.    
  764.   </script>
  765.   <script type="text/javascript">
  766.   $(function(){
  767.     $("select").multiselect();
  768.   });
  769.   </script>  
  770.   <script>
  771.   function Count(){
  772.     var karakter,maksimum;  
  773.     maksimum = 160
  774.     karakter = maksimum-(document.form1.isi_pesan.value.length);  
  775.     if (karakter < 0) {
  776.       alert("Jumlah Maksimum Karakter:  " + maksimum + "");  
  777.       document.form1.isi_pesan.value = document.form1.isi_pesan.value.substring(0,maksimum);  
  778.       karakter = maksimum-(document.form1.isi_pesan.value.length);  
  779.       document.form1.counter.value = karakter;  
  780.     }
  781.     else {
  782.       document.form1.counter.value =  maksimum-(document.form1.isi_pesan.value.length);
  783.     }
  784.   }
  785.   </script>
  786.   <style type="text/css">
  787. <!--
  788. .atas_big {font-family: Arial, Helvetica, sans-serif;
  789.   font-size: 12px;
  790.   background-image:url(image/big.png);
  791.   background-color:#FC6;
  792. }
  793. -->
  794.   </style>
  795. </head>
  796. <body>
  797. <form name="form1" method="post" action="send_sms_status.php">
  798. <h3>Kirim SMS Group </h3>
  799. <table width="100%" border="1" cellspacing="0" cellpadding="3">
  800. <tr>
  801.   <td width="100"> Kirim Pesan </td>
  802.   <td width="10"> : </td>
  803.   <td bordercolor="#56C1EC">
  804.     <select name="status" id="status" multiple="multiple" size="3">
  805.     <?php
  806.       include "koneksi/koneksi.php";
  807.       $sql=mysql_query("select * from status order by kd_status");
  808.       while ($data = mysql_fetch_row($sql))
  809.       {
  810.         echo '<option value="'.$data[1].'"> '.$data[1].' </option>';
  811.       }
  812.     ?>
  813.     </select>
  814.   </td>
  815. </tr>
  816. <tr valign="top">
  817.   <td> Isi Pesan </td>
  818.   <td> : </td>
  819.   <td bordercolor="#FFFFFF">
  820.     <textarea name="isi_pesan" cols="40" rows="7" OnFocus="Count();"
  821.     OnClick="Count();" onKeydown="Count();" OnChange="Count();"
  822.     onKeyup="Count();"></textarea>
  823.   </td>
  824. </tr>
  825. <tr>
  826.   <td colspan="2"></td>
  827.   <td bordercolor="#FFFFFF"><input name="counter" type="text" size="5" maxlength="5" value="160" /></td>
  828. </tr>
  829. <tr>
  830.   <td colspan=3><input name="kirim" type="submit" value="Kirim Pesan" /></td>
  831. </tr>
  832. </table>
  833. </form>
  834. </body>
  835. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!