Ultimate PHP inline code for SQL Query?

I dont’t know what it is Ultimate code.

"
WHERE
    ...
    ".(($t=getProductmeta('service_out_users',$_GET['id']))?" AND users.user_id NOT IN ({$t}) ":"")."
"

는 다음과 같은 의미이다.

if ( $t = getProductmeta('service_out_users',$_GET['id']) )
    echo " AND users.user_id NOT IN ({$t}) ";
else
    echo "";

그런데 이를 inline 으로 구현을 할 때, $var = XXX 를 다음 단인 ? 다음의 영역에서 $var 를 인식하지 못한다. 이를 일부러 인식시키기 위해 ($var = XXX) 와 같이 if 문 처럼 비교하는 구문에 괄호를 넣어주었다.

, ,

댓글 없음

Very simple Javascript dialog like Lightbox

폼을 전송할때 다른 버튼이나 폼을 클릭 및 수정하지 못하도록 하기 위해, Lightbox 와 같이 메시지를 보내는게 어떨까 해서 이제까지는 jQuery 의 jQuery-UI 를 사용하다가 dialog 를 사용하기 위해 무거운 jQuery-UI 를 사용한다는게 항상 마음에 걸려, jQuery-UI 를 참고로 하여 가장 간단하다고 자부할만한 Javascript dialog 를 구현해 보았다.

이를 구현하기 위해서는 jQuery 가 필요하다.

jQuery 는 단지 Cross Browsing 을 하기 위해 사용하였으므로, 코딩에 조예가 깊으신 분께서 사용하실 때에는 더욱 맛깔스러운 코드로 재창조 하여 사용하실것을 믿어 의심치 않으며…

/*
    Simple modal dialog for jQuery
*/
function simpleDialog(data) {
 
    if ( !data.width || !data.height )
        return 0;
 
    var wnd  = $(window), doc = $(document);
    var left = wnd.width() / 2 - data.width / 2;
    var top  = wnd.height() / 2 - data.height / 2 + doc.scrollTop() - 50;
 
    dialog = ''
    + '<div class="dialog-all dialog-overlay" style="width:'+doc.width()+'px;height:'+doc.height()+'px;border-width:0pt;margin:0pt;padding:0pt;background:white none repeat scroll 0% 0%;position:absolute;top:0pt;left:0pt;opacity:0.5;-moz-background-clip:-moz-initial;-moz-background-origin:-moz-initial;-moz-background-inline-policy:-moz-initial;z-index:1001;"></div>'
    + '<div class="dialog-all dialog-wrap" style="top:'+top+'px;left:'+left+'px;width:'+data.width+'px;height:'+data.height+'px;overflow:hidden;display:block;position:absolute;z-index:1002;outline-color:-moz-use-text-color;outline-style:none;outline-width:0pt;border:7px solid #DDD;background:white;">'
    +    '<div style="color:#000; float:right; padding:2px 4px; font-size:16px;"><strong><a href="javascript:;" style="text-decoration:none;color:red;" onclick="$(\'.dialog-all\').remove();">&nbsp;x&nbsp;</a></strong></div>'
    +    '<div style="color:#000; padding:4px 6px; background-color:#FC6;font-size:16px"><strong>'+data.title+'</strong></div>'
    +    '<div style="color:#333; padding:10px;">'+data.message+'</div>'
    + '</div>';
 
    $(dialog).appendTo('body');
}

코드를 보면 쉽게 이해가 된다.

[ 사용법 ]

simpleDialog({
    width:300, height:100,
    title:"Alert",
    message:'<div style="font-size:16px;font-weight:bold;text-align:center;padding-top:15px;"><img src="../images/progress.gif" alt="Saving..." border="0" /> 保存しています…</div>'
});

- Reference

, , ,

댓글 없음

Javascript includes in Javascript

JavaScript 를 JavaScript 에서 include 를 하는 방법을 생각해 보다가, 구글링을 해 보았다. document.write 를 이용하는 간단한 방법에서 부터 DOM Element 를 이용하는 방법까지 아주 다양~ 하게 나와 있는게 아닌가? 그 중에서 DOM Element 를 사용하는 방법을 이용해 보기로 했다.

function include_dom(script_filename) {
    var html_doc = document.getElementsByTagName('head').item(0);
    var js = document.createElement('script');
    js.setAttribute('language', 'javascript');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', script_filename);
    html_doc.appendChild(js);
    return false;
}

말이 필요없다고 본다.

<header></header>사이에 JavaScript 코드를 삽입한다.

주의할점은, include 를 처리하는 스크립트를 include 할 때, include 되는 스크립트의 include 코드는 절대경로여야 한다. Javascript 는 모두 부모 html 의 head element 의 직접적인 child 이기 때문이다. - 언어적으로 문제가 있는 말 같지만 가장 이해하기 쉽게 쓰지 않았나 싶다. :P -

Adds:

이 스크립트는 Safari 2.0 이나 IE 7.0 에서 동작하지 않는다. DOM 관련 처리를 뒤로 미루기 때문으로 생각되는데, 아래와같이 해결.

..
document.write('<script type="text/javascript" src="'+path+'"><\/script>');
..

Simple is beautiful. :)

- Reference

,

댓글 없음

fgetcsv function for Japanese in PHP

CSV 파일을 PHP에서 바로 파싱하여 읽어들이는 함수 fgetcsv 라는 함수가 있다. 하지만 이 함수가 일본어에서는(아마도, 2Byte) 제대로 동작하지 않아서 구현을 해 볼까 하다가 구글링을 하니 웬걸~ 이미 다른 분이 만들어 놓으신 것이 아닌가?

상당히 좋은 코드여서 소개를 한다.

/*
    http://saboten009.blogspot.com/2007/05/fgetcsv.html
    
    http://www.phppro.jp/qa/371
    
    from yossy
    文字化け対処方法について
    解決されたようですが、私も以前まったく同じ現象で悩んだ経験があります。。。
    最終的な回避策は上記同様の方法(自分で文字列をパース)となりました。
    ただ、explodeでの文字列分割だとダブルクオートで囲われた文字列にカンマが含まれた場合や
    改行を含む文字列の場合に正しくパースできなくなってしまう可能性があります。
    なのでRFC4180(CSV形式のRFC)に準拠したCSVファイルをパースする関数を作りました。
    ご参考程度にどうぞ。使い方は既存のfgetcsv関数と同様です。
*/
function fgetcsv_reg (&$handle, $length = null, $d = ',', $e = '"') {
 
    $d = preg_quote($d);
    $e = preg_quote($e);
    $_line = "";
    $eof = false; // Added for PHP Warning.
 
    while ( $eof != true ) {
 
        $_line .= (empty($length) ? fgets($handle) : fgets($handle, $length));
        $itemcnt = preg_match_all('/'.$e.'/', $_line, $dummy);
        if ($itemcnt % 2 == 0) $eof = true;
    }
 
    $_csv_line = preg_replace('/(?:\\r\\n|[\\r\\n])?$/', $d, trim($_line));
    $_csv_pattern = '/('.$e.'[^'.$e.']*(?:'.$e.$e.'[^'.$e.']*)*'.$e.'|[^'.$d.']*)'.$d.'/';
 
    preg_match_all($_csv_pattern, $_csv_line, $_csv_matches);
 
    $_csv_data = $_csv_matches[1];
 
    for ( $_csv_i=0; $_csv_i<count($_csv_data); $_csv_i++ ) {
    
        $_csv_data[$_csv_i] = preg_replace('/^'.$e.'(.*)'.$e.'$/s', '$1', $_csv_data[$_csv_i]);
        $_csv_data[$_csv_i] = str_replace($e.$e, $e, $_csv_data[$_csv_i]);
    }
    
    return empty($_line) ? false : $_csv_data;
}

이런식으로 응용해 보았다.

파일을 읽어들여 UTF-8 로 변환 후 배열로 반환한다.

function getArrayfromCSV($_filename) {
 
    $PAGE_DATA = array();
 
    $handle = fopen($_filename, "r");
    while (($data = fgetcsv_reg($handle, 8192, ",")) !== FALSE) {
 
        $UTF8data = array();
 
        foreach ( $data as $key => $value ) {
            $UTF8data[$key] = mb_convert_encoding($value, "UTF-8", "auto");
        }
 
        $PAGE_DATA[] = $UTF8data;
    }
    fclose($handle);
    
    return $PAGE_DATA;
}

- References

  • 위 코드의 코멘트 아웃을 참조.

, ,

댓글 없음

Simple calendar code in PHP

프로그래밍을 하다보면 종종 달력을 만들어야 하는 경우가 있다. 그렇게 어렵진 않지만, 만들려고 하다보면 30분 이상 잡아먹기 일쑤다.

그래서 스스로 간단하고 이해하기 쉬운 코드를 작성해 보았다.

<table width="200" border="1">
    <tr>
        <td>日</td>
        <td>月</td>
        <td>火</td>
        <td>水</td>
        <td>木</td>
        <td>金</td>
        <td>土</td>
    </tr>
    <tr>
    <?php
        // Generate carendar data
        $dat = split(',',date('n,Y')); 
        $first = mktime(0,0,0,$dat[0],1,$dat[1]); 
        $last = mktime(23,59,59,$dat[0]+1,0,$dat[1]); 
        $firstDayWeeksign = date("w", $first);
        $thisMonthTotal = date("t", $first);
        $lastDayWeeksign = date("w", $last);
        $thisMonth = array();
    
        // Header space
        for ( $i=1; $i<=$firstDayWeeksign; $i++ )
            $thisMonth[] = '';
        // Days
        for ( $i=1; $i<=$thisMonthTotal; $i++ )
            $thisMonth[] = $i;
        // Footer space
        for ( $i=1; $i<=(6-$lastDayWeeksign); $i++ )
            $thisMonth[] = '';
            
        // Make the carlendar
        $divideCount = 0;
        foreach ( $thisMonth as $day ) :
            switch ( $divideCount%7 ) {
                case 0: $weeksign = "red"; break;
                case 6: $weeksign = "blue"; break;
                default: $weeksign = "black";
            }
    ?>
            <td style="color:<?php echo @$weeksign; ?>"><?php echo $day; ?></td>
    <?php
            if ( ++$divideCount % 7 == 0 ) print "</tr>\r\n<tr>";
        endforeach;
    ?>
    </tr>
</table>

이를 응용해서 스케쥴 관리 프로그램등을 작성할 수 있겠다.

,

댓글 없음

isset by Javascript

TinyMCE 에서 TinyMCE 가 설정되었나를 판별하기 위해서 구상을 하다가 PHP의 isset 과 같은 기능의 함수를 다음과 같은 코드로 구현해 보았다.

function isset(varname) {
    return(typeof(window[varname]) != 'undefined');
}

아직까지는 이렇다 할 버그는 발견하지 못했다.

, ,

댓글 없음

TinyMCE setting for Japanese (not English languages)

내가 프로그래머를 ‘못해먹겠다!’ 고 생각하는 이유 중 하나는, 엄청난 프로그램을 한푼도 받지 않고 공개하는 프로그래머들의 실력을 보고는 털썩 주저앉을 수 밖에 없기 때문이다. 그런 프로그램중 하나, TinyMCE.

Javascript WYSIWYG Editor 이다. 이 프로그램을 현재 개발중인 일본어 시스템에 적용하는 과정을 기록해 둔다.

1. Full examples from TinyMCE hompage

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
 
    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
 
    // Example content CSS (should be your site CSS)
    content_css : "css/example.css",
 
    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "js/template_list.js",
    external_link_list_url : "js/link_list.js",
    external_image_list_url : "js/image_list.js",
    media_external_list_url : "js/media_list.js",
 
    // Replace values for the template plugin
    template_replace_values : {
        username : "Some User",
        staffid : "991234"
    }
});
</script>
 
<form method="post" action="somepage">
    <textarea name="content" style="width:100%">
    </textarea>
</form>

이렇게 하면 성공적으로 동작을 하게 된다. 이 예제를 고쳐가며 설정을 한다.

2. Change target from ‘name=content’ to ‘class=mceEditor’

기본적으로 textarea 태그 중 name 이 content 인 값을 찾아 그 value 를 Active Content 로 만들어 주는데, name 속성을 content 이외의 값으로 해야 할 경우가 있다.

mode : "textareas",
to
mode : "specific_textareas",
editor_selector : "mceEditor",
 
<textarea name="description" class="mceEditor" style="width:98%"><?php echo ...; ?></textarea>

이처럼 class 속성을 인식하게 할 수 있다.

3. Change language to Japanese

이제 언어를 일본어로 바꿔보자.

Language packs for TinyMCE 에서 필요한 언어를 체크한 후 밑의 다운로드 버튼을 이용해서 다운로드를 하고 압축을 풀면, 몇개의 디렉토리가 생기는데 이를 그대로 덮어쓰기 하여 업로드 하면 된다.

/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/themes/advanced/langs/
/tinymce/jscripts/tiny_mce/plugins/<pluginname>/langs/

Using a Language Pack 의 설명에 의하면

  • The themes and langs folder, simply upload the folders into /tinymce-advanced
  • The third one is a bit more complicated. Enter the plugins folder. It contains several folders. This contents of the plugins folder: upload it into the folder /tinymce-advanced/mce .

이와같이 설명되어 있으나, 새로운 버젼이 되면서 plugins 디렉토리도 그냥 통째로 업로드 할 수 있도록 바뀐 모양이다. 그냥 전체를 TinyMCE 를 설치한 디렉토리에 업로드하면 되겠다. 그 후, Option: language 를 참고하여

tinyMCE.init({
    mode : "textareas",
    language : "ja"
...
});

설정을 한다. 코드의 중간에 설정을 할 경우에는  language : "ja", 처럼 맨 뒤의 , 콤마를 잊지 말 것.

4. Pannel setting

// 'styleselect' remove
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
// Comment out theme_advanced_buttons4
//theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
 
// Set font list
/*
    Windows base font. XP, Vista
    font-family: "MS UI Gothic"
    font-family: "MS Pゴシック","MS PGothic"
    font-family: "MS ゴシック","MS Gothic"
    font-family: "MS P明朝","MS PMincho"
    font-family: "MS 明朝","MS Mincho"
*/
theme_advanced_fonts : "MS Pゴシック='MS PGothic';MS ゴシック='MS Gothic';MS P明朝='MS PMincho';MS 明朝='MS Mincho';Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace",

별로 필요없는 4번째 버튼들은 없애고, 설정을 하지 않으면 소용이 없는 styleselect 를 뺐다.

5. Change Active Content Style

…/tiny_mce/themes/advanced/skins/default/content.css

를 수정하면 된다.

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
to
body, td, pre {font-family: "MS PGothic",Verdana, Arial, Helvetica, sans-serif;    font-size: 13px;}
p { margin:2px 0;}

이런식으로 일본어 폰트로 함과 동시에, 엔터를 눌렀을때의 행간 간격을 조금 벌였다.

Option: content_css 에 나와 있는 여러가지 편한 방법들을 테스트 해 보았지만, 직접 css 파일을 고치는 방법이 아니면 효과가 나타나질 않았다. 여러 브라우저에서 테스트할 필요가 있다.

6. for Ajax form data sending

Ajax 에서 폼을 송신하는 코드 부분에 다음 코드를 추가 한다.

if ( typeof(window['tinyMCE']) != 'undefined' ) {
    var MCEContent = tinyMCE.activeEditor.getContent();
    if ( MCEContent )
        $('[@name=description]:first').attr('value', MCEContent); // Using jQuery
}

tinyMCE 가 설정 되어 있으면 name=description 으로 지정된 form 의 value 를 tinyMCE active contnet 의 값으로 대체하는 코드이다.

- Reference

, , , , ,

댓글 없음

td nowrap

간혹가다 통계자료를 테이블로 보여줘야 할 일이 생긴다.

이때 브라우저의 폭에 따라서 테이블이 이리저리 찌그러지게 되는데, 이를 방지하기 위한 방법을 알아보았다.

참 어렵게 생각했었는데, 항상 알고나면 쉽다.

<td nowrap="nowrap">

이렇게 th 나 td 에 nowrap 속성을 부여하면 된다. 이를 CSS로 구현하면,

td {
white-space: nowrap;
}

이렇게 하면 되겠다.

참고로, 테이블 크기를 고정하는 방법은 아래와같다.

<table border="1"cellspacing="0" cellpadding="0" width="310"  height="150"
style="table-layout: fixed">

홈페이지를 여러해 만져보지만, 이렇게 기본적인 것을 모를 때가 많다.

- Reference

, , ,

댓글 없음

jQuery Datepicker setting for Japanese

jQuery

   1: <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
   2: <script src="js/jquery-ui-personalized-1.5.1.packed.js" type="text/javascript"></script>
   3: <link rel="stylesheet" href="js/flora.datepicker.css" type="text/css" media="screen" title="Flora (Default)" />
   4: <script type="text/javascript">
   5: /* French initialisation for the jQuery UI date picker plugin. */
   6: /* Written by Keith Wood (kbwood@virginbroadband.com.au) and Stéphane Nahmani (sholby@sholby.net). */
   7: jQuery(function($){
   8:     $.datepicker.regional['ja'] = {clearText: 'クリア', clearStatus: '',
   9:         closeText: '閉じる', closeStatus: '閉じる(変更なし)',
  10:         prevText: '&laquo;先月', prevStatus: '先月に移動',
  11:         nextText: '来月&raquo;', nextStatus: '来月に移動',
  12:         currentText: '今月', currentStatus: '今月に移動',
  13:         monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  14:         monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  15:         monthStatus: '月変更', yearStatus: '年変更',
  16:         weekHeader: 'Wk', weekStatus: '',
  17:         dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
  18:         dayNamesShort: ['日','月','火','水','木','金','土'],
  19:         dayNamesMin: ['日','月','火','水','木','金','土'],
  20:         dayStatus: '', dateStatus: '',
  21:         dateFormat: 'yy-mm-dd', firstDay: 0, 
  22:         initStatus: '選択して下さい', isRTL: false,
  23:         yearRange: '-80:+0',
  24:         buttonImageOnly: true, buttonImage: '/images/calendar.jpg', buttonText: 'カレンダー',
  25:         firstDay: 0, changeFirstDay: false};
  26:     $.datepicker.setDefaults($.datepicker.regional['ja']);
  27: });
  28:  
  29: $(document).ready(function() {
  30:     $('#birthday').datepicker();
  31: });
  32: </script>

Html

<li><strong>誕生日</strong><br />
    <input name="birthday" id="birthday" type="text" value="" readonly="readonly" />
</li>

CSS

/* Main Flora Style Sheet for jQuery UI ui-datepicker */
#ui-datepicker-div, .ui-datepicker-inline {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    background: #E0F4D7;
    width: 185px;
}
#ui-datepicker-div {
    display: none;
    border: 1px solid #FF9900;
    z-index: 10;
}
.ui-datepicker-inline {
    float: left;
    display: block;
    border: 0;
}
.ui-datepicker-rtl {
    direction: rtl;
}
.ui-datepicker-dialog {
    padding: 5px !important;
    border: 4px ridge #83C948 !important;
}
button.ui-datepicker-trigger {
    width: 25px;
}
img.ui-datepicker-trigger {
    margin: 2px;
    vertical-align: middle;
}
.ui-datepicker-prompt {
    float: left;
    padding: 2px;
    background: #E0F4D7;
    color: #000;
}
*html .ui-datepicker-prompt {
    width: 185px;
}
.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
    clear: both;
    float: left;
    width: 100%;
    color: #FFF;
}
.ui-datepicker-control {
    background: #FF9900;
    padding: 2px 0px;
}
.ui-datepicker-links {
    background: #E0F4D7;
    padding: 2px 0px;
}
.ui-datepicker-control, .ui-datepicker-links {
    font-weight: bold;
    font-size: 80%;
    letter-spacing: 1px;
}
.ui-datepicker-links label {
    padding: 2px 5px;
    color: #888;
}
.ui-datepicker-clear, .ui-datepicker-prev {
    float: left;
    width: 34%;
}
.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
    float: right;
    text-align: right;
}
.ui-datepicker-current {
    float: left;
    width: 30%;
    text-align: center;
}
.ui-datepicker-close, .ui-datepicker-next {
    float: right;
    width: 34%;
    text-align: right;
}
.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next {
    float: left;
    text-align: left;
}
.ui-datepicker-header {
    padding: 1px 0 3px;
    background: #83C948;
    text-align: center;
    font-weight: bold;
    height: 1.3em;
}
.ui-datepicker-header select {
    background: #83C948;
    color: #000;
    border: 0px;
    font-weight: bold;
}
.ui-datepicker {
    background: #CCC;
    text-align: center;
    font-size: 100%;
}
.ui-datepicker a {
    display: block;
    width: 100%;
}
.ui-datepicker-title-row {
    background: #B1DB87;
    color: #000;
}
.ui-datepicker-title-row .ui-datepicker-week-end-cell {
    background: #B1DB87;
}
.ui-datepicker-days-row {
    background: #FFF;
    color: #666;
}
.ui-datepicker-week-col {
    background: #B1DB87;
    color: #000;
}
.ui-datepicker-days-cell {
    color: #000;
    border: 1px solid #DDD;
}
.ui-datepicker-days-cell a {
    display: block;
}
.ui-datepicker-week-end-cell {
    background: #E0F4D7;
}
.ui-datepicker-unselectable {
    color: #888;
}
.ui-datepicker-week-over, .ui-datepicker-week-over .ui-datepicker-week-end-cell {
    background: #B1DB87 !important;
}
.ui-datepicker-days-cell-over, .ui-datepicker-days-cell-over.ui-datepicker-week-end-cell {
    background: #FFF !important;
    border: 1px solid #777;
}
* html .ui-datepicker-title-row .ui-datepicker-week-end-cell {
    background: #B1DB87 !important;
}
* html .ui-datepicker-week-end-cell {
    background: #E0F4D7 !important;
    border: 1px solid #DDD !important;
}
* html .ui-datepicker-days-cell-over {
    background: #FFF !important;
    border: 1px solid #777 !important;
}
* html .ui-datepicker-current-day {
    background: #83C948 !important;
}
.ui-datepicker-today {
    background: #B1DB87 !important;
}
.ui-datepicker-current-day {
    background: #83C948 !important;
}
.ui-datepicker-status {
    background: #E0F4D7;
    width: 100%;
    font-size: 80%;
    text-align: center;
}
#ui-datepicker-div a, .ui-datepicker-inline a {
    cursor: pointer;
    margin: 0;
    padding: 0;
    background: none;
    color: #000;
}
.ui-datepicker-inline .ui-datepicker-links a {
    padding: 0 5px !important;
}
.ui-datepicker-control a, .ui-datepicker-links a {
    padding: 2px 5px !important;
    color: #000 !important;
}
.ui-datepicker-title-row a {
    color: #000 !important;
}
.ui-datepicker-control a:hover {
    background: #FDD !important;
    color: #333 !important;
}
.ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
    background: #FFF !important;
    color: #333 !important;
}
.ui-datepicker-multi .ui-datepicker {
    border: 1px solid #83C948;
}
.ui-datepicker-one-month {
    float: left;
    width: 185px;
}
.ui-datepicker-header {
    margin-left:30px;
    width:130px;
}
.ui-datepicker-new-month {
    float: right;
}
.ui-datepicker-new-year {
    float: left;
}
 
.ui-datepicker-new-row {
    clear: left;
}
.ui-datepicker-cover {
    display: none;
    display/**/: block;
    position: absolute;
    z-index: -1;
    filter: mask();
    top: -4px;
    left: -4px;
    width: 193px;
    height: 200px;
}

응용하면 얼마든지 Korean 도 가능하겠다.

, , ,

댓글 없음

Form error check by jQuery ajax

First, let’s see source code.

PHP

if ( !@$_POST['login_name'] || !preg_match("/^[a-z0-9]*$/", @$_POST['login_name']) ) { $err++; $errMsg['login_name']     = "会員IDは半角英数でお願いします。"; }
if ( empty($_POST['lastname']) || empty($_POST['firstname']) )             { $err++; $errMsg['lastname']         = "お名前は「姓」と「名」を共に入力お願いします。"; }
if ( !@$_POST['email'] || !@$_POST['email_confirm'] )                    { $err++; $errMsg['passwd']         = "ご入力お願いします。"; }
if ( !@$_POST['passwd'] || !@$_POST['passwd_confirm'] )                 { $err++; $errMsg['passwd']         = "ご入力お願いします。"; }
if ( @$_POST['passwd'] != @$_POST['passwd_confirm'] )                     { $err++; $errMsg['passwd']         = "一致しません。ご確認お願いします。"; }
if ( empty($_POST['birthday']) )                                         { $err++; $errMsg['birthday']         = "ご入力お願いします。"; }
if ( !@$_POST['email'] || !@$_POST['email_confirm'] )                    { $err++; $errMsg['email']             = "ご入力お願いします。"; }
if ( @$_POST['email'] != @$_POST['email_confirm'] )                     { $err++; $errMsg['email']             = "一致しません。ご確認お願いします。"; }
if ( !preg_match("/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)*\.([a-zA-Z]{2,6})$/", @$_POST['email']) ) { $err++; $errMsg['email'] = "正しいメールアドレスを入力して下さい。"; }
if ( @$_POST['mobilemail'] != @$_POST['mobilemail_confirm'] )             { $err++; $errMsg['mobilemail']     = "一致しません。ご確認お願いします。"; }
if ( @$_POST['mobilemail'] && !preg_match("/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)*\.([a-zA-Z]{2,6})$/", @$_POST['mobilemail']) ) { $err++; $errMsg['mobilemail'] = "正しいメールアドレスを入力して下さい。"; }
if ( !@$_POST['zipcode'] || !preg_match("/^[0-9-]*$/", @$_POST['zipcode']) ) { $err++; $errMsg['zipcode']         = "半角数字でご入力お願いします。"; }
if ( empty($_POST['pref']) )                                             { $err++; $errMsg['pref']             = "お選びお願いします。"; }
if ( empty($_POST['address']) )                                         { $err++; $errMsg['address']         = "ご入力お願いします。"; }
if ( !@$_POST['tel'] || !preg_match("/^[0-9-]*$/", @$_POST['tel']) )     { $err++; $errMsg['tel']             = "半角数字でご入力お願いします。"; }
 
if ( empty($_POST['sex']) )                                             { $err++; $errMsg['sex']             = "お選びお願いします。"; }
if ( empty($_POST['job']) )                                             { $err++; $errMsg['job']             = "お選びお願いします。"; }
if ( empty($_POST['marriage']) )                                         { $err++; $errMsg['marriage']             = "お選びお願いします。"; }
if ( empty($_POST['children']) )                                         { $err++; $errMsg['children']             = "お選びお願いします。"; }
 
if ( $err ) {
    $message = json_encode($errMsg);
}

jQuery

$(document).ready(function() {
    $('#save-btn').click(function(){
        $.post('registerCheck.php', $('form').serializeArray(), function(data){
            if ( !data.code ) {
                $('.error').remove();
                var errmsgs = eval('('+data.message+')');
                $.each(errmsgs, function(key, value) {
                    if ( $('[@name='+key+']:first').parent()[0].tagName.toLowerCase() == "label" )
                    $('[@name='+key+']:first').parent().parent().append('<small><strong style="color:red;" class="error">'+value+'</strong></small>');
                    else
                    $('[@name='+key+']:first').parent().append('<small><strong style="color:red;" class="error">'+value+'</strong></small>');
                });
                //$('.error').show('highlight', {}, 1000, function(){});
                alert("!!! ご確認 !!!\n ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄\nいくつかの項目に入力の間違いがありました。\nご確認お願いします。");
            }
            else {
                $('.error').remove();
                //alert(data.message);
                $('form').submit();
            }
        }, "json"); // Serve script return value must be Json
    });
});

Html

<li>
    <strong>会員ID</strong><br />
    <input name="login_name" type="text" value="" />
</li>
<li>
    <strong></strong>
    <input name="lastname" type="text" value="" />
    <br />
    <strong></strong>
    <input name="firstname" type="text" value="" />
</li>
<li>
    <strong>パスワード</strong><br />
    <input name="passwd" type="password" value="" />
    <br />
    <input name="passwd_confirm" type="password" value="" /> (確認)
</li>
<li><strong>誕生日</strong><br />
    <input name="birthday" id="birthday" type="text" value="" readonly="readonly" />
</li>
<li>
    <strong>PCメール</strong><br />
    <input name="email" type="text" value="" />
    <br />
    <input name="email_confirm" type="text" value="" /> (確認)
</li>
<li>
    <strong>携帯メール</strong><br />
    <input name="mobilemail" type="text" value="" />
    <br />
    <input name="mobilemail_confirm" type="text" value="" /> (確認)
</li>
<li>
    <strong>ホームページ</strong><br />
    <input name="url" type="text" value="" />
</li>
<li>
    <strong>郵便番号</strong><br />
    <input name="zipcode" type="text" value="" />
</li>
<li>
    <strong>都道府県</strong><br />
    <?php genSelect('pref'); ?>
</li>
<li>
    <strong>住所</strong><br />
    <input name="address" type="text" value="" />
</li>
<li>
    <strong>電話番号</strong><br />
    <input name="tel" type="text" value="" />
</li>

이런식으로 간단히 해결 할 수 있었다.

Point is…

$.each(DATA, function(KEY, VALUE){});

, , , , ,

댓글 없음