站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
Xoops表单
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
===自定义控件=== 上一节介绍了XOOPS系统中提供的表单基础控件,这些控件是对HTML元素的简单封装。除了直接使用基础控件外,在XOOPS系统中还支持自定义控件,使用自定义控件与使用基础控件同样方便,本节中将介绍XOOPS系统中的自定义控件。本例的文件夹结构如下: <pre> /modules/formextends /images /logo.png /index.php /xoops_version.php </pre> 其中xoops_version.php文件内容如下: <pre> /modules/formextends/xoops_version.php <?php $modversion['name'] = "表单 - 自定义控件"; $modversion['version'] = 0.01; $modversion['description'] = "演示表单的自定义控件"; $modversion['author'] = <<<AUTHOR 胡争辉 QQ: 443089607 QQMail: hu_zhenghui@qq.com GTalk: huzhengh GMail: huzhengh@gmail.com Skype: huzhenghui" AUTHOR; $modversion['credits'] = ""; $modversion['license'] = "版权所有"; $modversion['image'] = "images/logo.png"; $modversion['dirname'] = "formextends"; $modversion["hasMain"] = 1; ?> </pre> 页面源代码如下。 <pre> /modules/formelement/index.php <?php require_once dirname(__FILE__)."/../../mainfile.php"; /* 详见源文件 */ include XOOPS_ROOT_PATH."/header.php"; include_once XOOPS_ROOT_PATH."/class/xoopsformloader.php"; $form_extends = new XoopsThemeForm("Form Extends", "form_extends", ""); /* 详见源文件 */ $form_element->display(); include XOOPS_ROOT_PATH."/footer.php"; ?> </pre> 生成的页面效果如图3-5自定义控件所示。 <div> [[Image:xop108.png]] </div> XOOPS系统支持多种自定义控件的开发方式,最简单的自定义控件就是自定义数据,例如本例中使用的RadioYN控件,就是继承自基础控件中Radio控件,然后自定义选项。源代码如下: <pre> /class/xoopsform/formradioyn.php class XoopsFormRadioYN extends XoopsFormRadio { function XoopsFormRadioYN($caption, $name, $value=null, $yes=_YES, $no=_NO) { $this->XoopsFormRadio($caption, $name, $value); $this->addOption(1, $yes); $this->addOption(0, $no); } } </pre> 从代码中可以看出自定义数据控件需要替换父类的构造函数,在构造函数中先调用父对象的构造函数,然后添加自定义的选项。在使用时和使用对应的基础控件相同,可以省略添加选项的代码。由于自定义数据控件中预先定义了选项,所以在判断没有提交自定义数据控件的数据时,该控件的默认值也应当是选项之一,本例中RadioYN控件的数据范围是0和1,所以默认值选择了其中的0。 <pre> if (false === isset($_POST["radioyn"])) { $radioyn = "0"; </pre> 如果提交了自定义数据控件的数据,则需要进一步判断提交的数据是否是自定义数据控件中预先定义的选项,如果提交的数据值不是选项之一,则也需要设定默认值。 <pre> } elseif (false === in_array($_POST["radioyn"], array("0", "1"))) { $radioyn = "0"; </pre> 如果提交的数据值是选项之一,则控件的值为提交的数据。 <pre> } else { $radioyn = $_POST["radioyn"]; } </pre> 这样就获取了预定义数据控件提交的数据。 注意:本例中RadioYN控件预定义的选项值是0和1,均为整数类型,而PHP中提交的数据值均为字符串类型,所以在判断是应当按字符串类型判断,而取值时则应按需要进行相应的类型转换。由于本例中预定义的选项不涉及转义相关字符,所以不需要进行转义。如果预定义数据控件涉及转义字符,则应当先进行转义恢复原始数据。 通过以上步骤获取的数据可以作为预定义数据控件的初始值。 <pre> $form_radioyn = new XoopsFormRadioYN("Radio Yes/No", "radioyn", $radioyn); $form_extends->addElement($form_radioyn); </pre> 最后在页面中生成的[[HTML]]代码如下。 <pre> <input type='radio' name='radioyn' value='1' />是 <input type='radio' name='radioyn' value='0' checked='checked' />否 </pre> 通过对比前一小节的单选按钮控件可以了解自定义数据控件的工作方式。自定义数据控件是自定义控件的两种常见形式之一,另一种常见形式是自定义浏览器脚本控件,通过将特定的客户端脚本封装在控件中,增加控件在浏览器中的交互功能,例如本例中的Color Picker控件就是继承自Text控件,并增加颜色选择器功能,颜色选择器控件在文本框控件的基础上实现了三个函数的替换。首先是替换了文本框控件的构造函数,按照HTML中颜色所使用的#XXXXXX格式设置了文本框的长度。 <pre> /class/xoopsform/formcolorpicker.php class XoopsFormColorPicker extends XoopsFormText { function XoopsFormColorPicker($caption, $name, $value="#FFFFFF") { $this->XoopsFormText($caption, $name, 9, 7, $value); } } </pre> 第二个是替换显示函数,在调用文本框控件的显示函数之前,先加载颜色选择器相关的javascript脚本,在调用文本框的显示函数之后,显示启动颜色选择器的按钮。 <pre> /class/xoopsform/formcolorpicker.php class XoopsFormColorPicker extends XoopsFormText { function render() { if(isset($GLOBALS['xoTheme'])) { $GLOBALS['xoTheme']->addScript('include/color-picker.js'); } else { echo "<script type=\"text/javascript\" src=\"".XOOPS_URL."/include/color-picker.js\"></script>"; } $this->setExtra(' style="background-color:'.$this->getValue().';"'); return parent::render()."\n<input type='reset' value=' ... ' onclick=\"return TCP.popup('".XOOPS_URL."/include /',document.getElementById('".$this->getName()."'));\">\n"; } } </pre> 第三个是替换客户端验证函数,在用户提交数据前,在客户端验证文本框中的内容是否符合颜色所使用的格式要求。 <pre> /class/xoopsform/formcolorpicker.php class XoopsFormColorPicker extends XoopsFormText { /** * Returns custom validation Javascript * * @return string Element validation Javascript */ function renderValidationJS() { $eltname = $this->getName(); $eltcaption = trim( $this->getCaption() ); $eltmsg = empty($eltcaption) ? sprintf( _FORM_ENTER, $eltname ) : sprintf( _FORM_ENTER, $eltcaption ); return "if ( !(new RegExp(\"^#[0-9a-fA-F]{6}\",\"i\").test(myform.{$eltname}.value)) ) { window.alert(\"{$eltmsg}\"); myform. {$eltname}.focus(); return false; }"; } } </pre> 由于颜色选择器需要特定的数据格式,所以在判断没有提交颜色选择器数据时,默认颜色应当符合格式要求,本例中选择#FFFFFF作为默认颜色。 <pre> if (false === isset($_POST["colorpicker"])) { $colorpicker = "#FFFFFF"; </pre> 如果提交了颜色选择器的数据,则需要进一步判断提交的数据是否是字符串,如果提交的数据不是字符串,则也需要设定为默认颜色。 <pre> } elseif (false === is_string($_POST["colorpicker"])) { $colorpicker = "#FFFFFF"; </pre> 如果提交的数据是字符串,则还需要判断字符串是否符合颜色格式的要求,如果不符合颜色格式的要求,则也需要设定默认值。 <pre> } elseif (0 === preg_match("/^#[0-9a-fA-F]{6}$/i", $_POST["colorpicker"])) { $colorpicker = "#FFFFFF"; </pre> 如果提交的字符串符合颜色格式,则控件的值为提交的数据。 <pre> } else { $colorpicker = $_POST["colorpicker"]; } </pre> 这样就获取了颜色选择器提交的数据,该数据可以作为颜色选择器的初始值。 <pre> $form_colorpicker = new XoopsFormColorPicker("Color Picker", "colorpicker", $colorpicker); $form_extends->addElement($form_colorpicker); </pre> 最后在页面中生成的HTML代码如下。 <pre> <input type='text' name='colorpicker' id='colorpicker' size='9' maxlength='7' value='#FFFFFF' style="background-color:#FFFFFF;" /> <input type='reset' value=' ... ' onclick="return TCP.popup('http://localhost/xoopstutorial/include/',document.getElementById('colorpicker'));"> </pre> 通过对比前一小节的文本框控件可以了解自定义[[浏览器]]脚本控件的工作方式。 [[category:Xoops模块开发指南]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)