|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
用C语言重新编写,包括可以访问数据库。他将这些程序和一些表单直译器整合起来,称为PHP/FI。PHP/FI可以和数据库连接,产生简单的动态网页程序。- /***http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yiiJavascriptandAJAXwithYiitranslatedbyphp工程师http://blog.csdn.net/phpgcs1.OfficialJSwrappers1.1Formvalidation1.2CGridView1.3CJui*classes1.4PartialupdatewithAJAXandCHtml1.5ExtensionsthatwrapJSintoPHPclasses2.WritingcustomJScode2.1RequiringsomeJSlibraries(jQueryandsuch)2.2InlineJS(embeddedintheHTMLpage)2.3JSinanexternalfile2.5Inlinecodeorexternalfile?3.Finalwords****/这篇文档要给出一个完全周全的教程,关于怎样在Yii中利用JS。并非要讲怎样用JS编程,而是怎样用Yii的体例。。。第一部分先容几个例子关于Yii中埋没JS的。第二部分先容怎样写自界说的JS。1,官方JSwrappers即便开辟者没有明白请求利用JS,Yii也常常会这么干。Yii选择JQuery作为JS库,跟着分歧Yii版本的刊行,响应会刊行对照新的JQuery库。不倡议年夜伙自行加载别的的JQuery库,很有大概会招致抵触。1.1表单考证Formvalidation这类情形下,JS几近完整是埋没的。(只管从Yii1.1.11版本以后JS默许是禁用的)有2种考证利用了JS:client-sidevalidation,AJAXvalidation.1.2CGridView默许的,脚手架gii创立包容了CGridView的admin页面和包括了CListView的Index页面。奇异的是,CGridView和CListView默许利用Ajax。假如你必要定制,在API中有几个参数。默许地利用AJAX有pros和cons。跟默许举动最次要的争议是用户actions不会在扫瞄器扫瞄汗青中呈现:如,用户没法前往到之前的searchfilter。假如这个弊端让你想要在CGridView中禁用AJAX的话,你能够在初始化CGridViewwidget时用ajaxUpdate=>false.1.3CJui*classes在Yii中利用JS最复杂的举措就是利用Yiiclasses。Jui插件已被包括在PHP类中了。你能够参照这些类的列表。每个文档页面都是从一个例子入手下手的。CJuiWidgetzii.widgets.juiCJuiAccordionCJuiAccordiondisplaysanaccordionwidget.CJuiAutoCompleteCJuiAutoCompletedisplaysanautocompletefield.CJuiButtonCJuiButtondisplaysabuttonwidget.CJuiDatePickerCJuiDatePickerdisplaysadatepicker.CJuiDialogCJuiDialogdisplaysadialogwidget.CJuiDraggableCJuiDraggabledisplaysadraggablewidget.CJuiDroppableCJuiDroppabledisplaysadroppablewidget.CJuiInputWidgetCJuiInputWidgetisthebaseclassforJUIwidgetsthatcancollectuserinput.CJuiProgressBarCJuiProgressBardisplaysaprogressbarwidget.CJuiResizableCJuiResizabledisplaysaresizablewidget.CJuiSelectableCJuiSelectabledisplaysanaccordionwidget.CJuiSliderCJuiSliderdisplaysaslider.CJuiSliderInputCJuiSliderInputdisplaysaslider.Itcanbeusedinformsandpostitsvalue.CJuiSortableCJuiSortablemakesselectedelementssortablebydraggingwiththemouse.CJuiTabsCJuiTabsdisplaysatabswidget.在Yii的webwidgets中也有几个JS类,出格是CTreeView。1.3.1向一个PHPclass传送JS代码。(以CJuiAutoComplete为例)在良多时分,利用CJui类的基础例子是不敷的。我们常常还必要自界说JS举措。拿CJuiAutoComplete来讲,我们必要定制一个实例有以下2个特征:A,主动完成的备选项都是经由过程AJAX异步失掉的,B,被选中的项目标id会被增加到form中。AJAXsource和Yiihtmlform的静态更新CJuiAutoComplete的设置是一个联系关系数组。它的“source”主键必需跟AJAX联系关系,意味着它的value必需是一个JSfunction我们不成以复杂的如许写“function()..”由于这会被注释实行为一个stringvalue!准确的语法是:"js:fucntion(request,response){...}"这个“js:“前缀告知yii前面的都是纯JS代码,应当跳过。更新form的准绳跟这个是一样的:fromwithinPHP,wepassaJSfunctionthatwillreadtheitemchosen.在这里,语法是:select=>"js:function(…".1.3.2完全的例子:Thecompleteexample界面上只显现项目标names可是form传送的是一个数字ID。echo$form->hiddenField($model,userId);$quotedUrl=CJavascript::encode($this->createUrl(array(user/complete)));$params=array(name=>"userComplete",source=>js:function(request,response){$.ajax({url:".$quotedUrl.",data:{"term":request.term,"fulltext":1},success:function(data){response(data);}});},//additionaljavascriptoptionsfortheautocompleteplugin//See<http://jqueryui.com/demos/autocomplete/#options>options=>array(minLength=>3,//minletterstypedbeforewetrytocompleteselect=>"js:function(event,ui){jQuery(#MyModel_userId).val(ui.item.id);returntrue;}",),);$this->widget(zii.widgets.jui.CJuiAutoComplete,$params);这段代码输入了一个保留有被选择的user的ID的hiddenformfield。在selectfunction中,经由过程它的htmlid,在selectfuction中更新。固然,这个ID是依存于model的名字的。常常是"ModuleName_AttributeName"种情势,可是你应当反省你的HTMLform来断定一下。更天真的代码应当用CHtml::resolveNameID()来算出这个ID。稍后将会说几个要点。A,在ajax参数中,”data”不该该是像"fulltext=1&term="+request.term如许的string。B,假如你必要在”data“中夹杂PHP值,利用CJavaScript::encode().C,AJAXcall的url是在PHP中组建的,由于这是独一的可移植的计划。/***Proposecompletionsforaterm(AJAX).*/publicfunctionactionAjaxComplete(){if(!YII_DEBUG&&!Yii::app()->request->isAjaxRequest){thrownewCHttpException(403,Forbiddenaccess.);}if(empty($_GET[term])){thrownewCHttpException(404,Missing"term"GETparameter.);}$term=$_GET[term];$filters=empty($_GET[exclude])?null:(int)$_GET[exclude]);header(Content-Type:application/json;charset="UTF-8");echojson_encode(User::completeTerm($term,$exclude));Yii::app()->end();}重点的几行读取GET”term“参数,发送JSON头,用JSON加密了局。假如你的编码不是utf-8,你应当用实行效力稍慢的Yii静态办法CJson::encode()而不是json_encode()下面的办法中静态办法User::completeTerm()应当前往一个array(array("id"=>xx,"value"=>xx,"label"=>xx),array(...),array(...),...)1.4用AJAX和CHtml部分革新在Yii中有2个静态办法CHtml::ajaxLink()CHtml::ajaxbutton()ThefollowingcodewillreplacethecontentoftheHTMLelementofID"my-profile"withtheoutputofacalltotheaction"ajaxcontent"ofthecontroller"profile".echoCHtml::ajaxLink(Updateprofile,array(profile/ajaxcontent,id=>$id),//YiiURLarray(update=>#my-profile)//jQueryselector);固然了,这类情形下,action"profile/ajaxcontent"必需输入HTML,只管不是一个完全的HTML页面。假如你更喜好前往一个布局化数据并在JS中剖析它,能够用一个"success"替换"update",以下://thedatareceivedcouldlooklike:{"id":3,"msg":"Noerrorfound"}array(success=>js:function(data){$("#newid").val(data.id);$("#message").val(data.msg);})输入JSON最烦琐的办法就是用CJson::encode()。1.5ExtensionsthatwrapJSintoPHPclasses除官方的Yii类,很多extension都供应JS特征。一些extensions仅仅是一些wrappers,试图让yii跟某些JS插件的整合更便利。假如你正在着一些特别的特征,请参照JSextensions列表。/****2.WritingcustomJScodetranslatedbyphp工程师http://blog.csdn.net/phpgcs****/在写你自界说的代码之前,别忘了反省下是不是有合适你需求的PHPwrappers如,JUIWidgetsWebWidgetsJSextensions2.1加载JS库。RequiringsomeJSlibraries(jQueryandsuch)一些JS库跟着Yii刊行。当PHP代码必要的合适会主动加载。假如你想要确保它们一般加载,能够用://LoadjQueryUI(andalsojQuerywhichisrequiredbyjQueryUI)Yii::app()->clientScript->registerCoreScript(jquery.ui);默许地,CClientScript::registerCoreScript()会在页面的底端加载。反复写两遍没有影响。2.2行内JS(嵌进HTML的JS)InlineJS(embeddedintheHTMLpage)一小段的JS能够写在一个PHPstring中。Yii::app()->clientScript->registerScript(uniqueid,alert("ok"););关于长的JS代码,没有了语法高亮的撑持的确很疾苦。但我们能够如许://rawJSfileexpandedintothepageYii::app()->clientScript->registerScript(uniqueid,file_get_contents(js/mycode.js));//JSfilewithembeddedPHPcodeob_start();includejs/mycode.js;Yii::app()->clientScript->registerScript(uniqueid,ob_get_clean());2.3援用内部的JS固然了,假如一个JS老是必要的话,修正layouttemplate是一种办法,可是当JS文件只要在某些哀求中必要的话,能够如许://LoadafilewithanabosluteandexternalURLYii::app()->clientScript->registerScriptFile(http://example.com/a.js);//Loadafilefrom"js/custom.js"undertherootoftheapplicationYii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl./js/custom.js);我们还能够用CClientScript::POS_HEAD,等参数来决意甚么合适加载我们的script我们也能够用相似办法加载其他的文件,如CSS等。2.4经由过程assets加载内部JS一些情形下,JS代码不在一个public的目次下。好比,当你开辟一个extension后,一切的文件都在"protected/extensions"之下。这时候候,你必需起首引诱Yii将你的JS代码公布到assets目次下。//Putthelocaldirectoryintotheapplicationsassets$assetsUrl=Yii::app()->assetManager->publish(__DIR__./myassets);//LoadapublishedfileYii::app()->clientScript->registerScriptFile($assetsUrl./custom.js);更多具体用法参考CAssetManager::publish()2.5用inline代码仍是内部文件?在加载js时,经由过程一个JS文件加载会更让人喜爱,有良多缘故原由,最次要的是可读性好。可是,有些义务不成以地道在JS中完成的。举例来讲:没有可移植的举措来经由过程JS来天生一个Yii的URL。路径取决于CUrlManager的设置。一种办理举措就是把一切的JS代码放进一个文件,用在PHP中界说的JS变量来完成。Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl./js/custom.js);$vars=array(ajaxUrl=>$this->createUrl(complete,id=>$model->id,);Yii::app()->clientScript->registerScript(variables,varmyApp=.CJavascript::encode($vars).;);除CJavascript::encode(),静态的办法CJavascript::quote()也是有效的。$url=$this->createUrl(app/ajaxProcessor);$cs->registerScript(var1,"varmyUrl=".$url.";");//canbreakwithsomeURLs$cs->registerScript(var1,"varmyUrl=".CJavascript::quote($url,true).";");3.停止语只管你能够在不体贴PHP框架的情形下在一个Yii使用中写JS,可是有良多坏处。好比,JS利用的URL在初次设置改动时,大概会堕落。大概一些页面会由于Yii的JS跟开辟者的JS库抵触而溃散失落。只管你能够不必Yii供应的wrappers,你仍旧应当利用一下3个:CClientScript::registerCoreScript()CClientScript::registerScriptFile()CClientScript::registerScript()
复制代码 怎么培养啊别光说不练啊,好,比如新人入门自己步是配置环境,虽然现在都有很多的集成环境,但是真实的体验下配置环境还是会有很多帮助,不论是你以后工作还是在真实的linux下开发。 |
|