Archive for the ‘ JQUERY ’ Category

wordpress tinymce add button

i been working out for a new plugin which is called the files attachment plugin. for now i want share to you how add button in tinymce.you can download it here WordPress Attach File

First, i will show the php code how to hook in wordpress.  this line allow you to hook in tinymce

add_filter(‘mce_external_plugins’, ‘attachDaw’); //This function include editor_plugin.js;

add_filter(‘mce_buttons’, ‘attachAddButton’, 0); //hook this function to  tinymce

add_action(‘plugins_loaded’, ‘loadlibrary’); // loaded jquery plugin..

Set function..

function attachAddButton($button){

array_push($button, "separator", "daganPlugin");

return $button;

}
function attachDaw($plugin_array){
$url = trim(get_bloginfo('url'), "/")."/wp-content/plugins/sumifruAttachFile/editor_plugin.js";
$plugin_array['daganPlugin'] = $url; //call jscript editor_plugin.js

return $plugin_array;

}

function loadlibrary(){

wp_enqueue_script('jquery'); //call jquery script
}

js script editor_plugin.js
the init is link up container bind with function attachDaw($plugin_array)

ed.addCommand('string Name', 's:Object')
ed.addButton('string Name', s:Object)
you can see the documentation here

init : function(ed, url){
ed.addCommand('OpenDawBeh', function() {
ed.windowManager.open({
file : url + '/attachmeFiles.php', //source file
width : 500, // max width
height : 300, // max height
inline : 1
}, {
plugin_url : url // Plugin absolute URL
});
});

ed.addButton('daganPlugin', {
title : 'Attach Files', // title plugin name
cmd : 'OpenDawBeh', // call ed.addCommand('OpenDawBeh')
image: url + "/attachment.png" //button Image
});

ed.onNodeChange.add(function(ed, cm, n) {
cm.setActive('daganPlugin', n.nodeName == 'IMG');
});
}

// Add a node change handler, selects the button in the UI when a image is selected

getInfo : function() {
return {
longname : 'amew ka he',
author : 'Ryl Denn Sagun',
authorurl : 'http://nanat.kagayan.com',
infourl : 'http://nanat.kagayan.com',
version : "1.0"
};
},
});

tinymce.PluginManager.add('daganPlugin', tinymce.plugins.daganPlugin);

JQPLOT With php, mssql and jquery.

jqplot line graph

jqplot line graph

You can download jqplot by this link : http://www.jqplot.com/

1st Step:

Sample Query using sql statement code. this code will set as data connector :

sql Query

sql Query

2nd step:

convert  php array to javascript array

foreach($mygraphMapet->magGrp as $array) {
$jsArray[] = array($array['Focus_Date'], (int) $array['Accomplishment']);
}
$dataArray = json_encode($jsArray);// return [[2010-02-10, 9826],[2010-02-11, 9680] ]
}
 Array(
    [0]=>Array
        (
            [WorkHrs]=>9826
            [Focus_Date]=>2010-02-10
        )

    [1]=>Array
        (
            [WorkHrs]=>9680            
            [Focus_Date]=>2010-02-11
        ))// javascript: [[2010-02-10, 9826],[2010-02-11, 9680] ]
PHP Code:

 

<?php
class graphEffbuncesPermandays {
private function minDate() // this function allowed to access inside the class only
{
global $mygraphMapet;// get

graphEffbuncesPermandaysQuery() form

$mygraphMapet->unaQuery($dataFrom, $dateTo, $location);// execute 1st the function unaQuery in order to exucute the $mygraphMapet->magGrp
foreach($mygraphMapet->magGrp as $array) {
$jsArray[] = array($array['Focus_Date'], (int) $array['Accomplishment']);
}
$dataArray = json_encode($jsArray);// return [[2010-02-10, 9826],[2010-02-11, 9680] ]
}
$rdata = '<div class="BackGroundContent">
<title>INLAV '.$mygraphMapet->plantation.' Bunches Accomplishments Graph </title>
<!--[if IE]><script language="javascript" type="text/javascript" src="testjs/excanvas.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />
<link rel="stylesheet" type="text/css" href="css/examples.css" />
<!-- BEGIN: load jquery -->
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="testjs/jquery.jqplot.js"></script>
<!-- to render rotated axis ticks, include both the canvasText and canvasAxisTick renderers -->
<script language="javascript" type="text/javascript" src="testjs/jqplot.canvasAxisLabelRenderer.js"></script>
<script language="javascript" type="text/javascript" src="testjs/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="testjs/jqplot.canvasAxisTickRenderer.js"></script>
<script language="javascript" type="text/javascript" src="testjs/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="testjs/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="testjs/jqplot.cursor.js"></script>
<style type="text/css" media="screen">.jqplot-axis-tick {}</style>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
line1='.$dataArray.';
dateNako = "'.$mindate.'";
gipiliNatype = "'.$myDateorWeek.'"
if(gipiliNatype == "day"){
plot1 = $.jqplot("chart", [line1], {
title:"INLAV '.$mygraphMapet->plantation.' Bunches Accomplishments Graph",
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
min: dateNako,
label:"DAYS",
tickInterval:"1 days",
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{formatString:\'%b %#d, %Y\', fontSize:\'8pt\', fontFamily:\'Tahoma\', angle:-40, fontWeight:\'normal\', fontStretch:1}
},
yaxis:{
label:"BUNCHES",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
highlighter:
{
bringSeriesToFront: true,
tooltipLocation: "e",
tooltipOffset: 0,
formatString: "<div class=\'jqplot-highlighter\'>%s: <strong>%s</strong></div>"
},
series:[{lineWidth:4, markerOptions:{style:"square"}, color:"#5FAB78"}]
});
}else{
plot1 = $.jqplot("chart", [line1], {
title:"INLAV '.$mygraphMapet->plantation.' Accomplishments Graph",
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
min: dateNako,
label:"WEEKS",
tickInterval:"1 week",
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{formatString:\'%b %#d, %Y\', fontSize:\'8pt\', fontFamily:\'Tahoma\', angle:-40, fontWeight:\'normal\', fontStretch:1}
},
yaxis:{
label:"BUNCHES",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
highlighter:
{
bringSeriesToFront: true,
tooltipLocation: "e",
tooltipOffset: 0,
formatString: "<div class=\'jqplot-highlighter\'>%s: <strong>%s</strong></div>"
},
series:[{lineWidth:4, markerOptions:{style:"square"}, color:"#5FAB78"}]
});
}
});
</script>
<div id="chart" style="margin-top:20px; margin-left:20px;"></div>
</div>
}
$mygraphMapet = new graphEffbuncesPermandaysQuery();// get the graphEffbuncesPermandaysQuery.php class

?>
hehe kapoy explain taas kaayo

INFORMATION